Skip to content

Commit

Permalink
stats: auto chart added (opensearch-project#913)
Browse files Browse the repository at this point in the history 
* auto chart type added

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* pr feedback

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* lint

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* threshold label fixed, save button error fixed

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* label/value annotations: in progress

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* metric unit text input added, precision value added

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* thresholds auto chart type: done, testing: in progress

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* thresholds label color fixed

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* testing + fixing, code optimization

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* base threshold added, bugs fixing

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* base threshold delete disabled

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* pr feedback: in progress

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* feedback: in progress

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* pr feedback: code optimization

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* code optimization

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* intend

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* metric value last index bug fixed

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* feedback

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* intend

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* test case added for stat

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* extend yaxis modified, test case fixed, reused axis calculations

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* reabse with main, style variables optimized, tooltip added

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* yarn test

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* eslint, test case fixed

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* getTextCoordinate upadted

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* checks within threshold loops updated

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* stats modified for 2-way sync

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* pr feedback, text input reset fixed

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* yarn test

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* alias handling for metric label

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* input fields useffect fixed

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* naming conventions updated

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* alias replaced with CUSTOM_LABEL

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* naming conventions updated

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* snapshots upadted

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* cypress test cases upadted

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

* rebased + snapshots updated

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>

Signed-off-by: Ramneet Chopra <ramneet_chopra@persistent.com>
  • Loading branch information
@ramneet-persistent
ramneet-persistent authored Sep 29, 2022
1 parent cad95f2 commit bdf5291
Show file tree
Hide file tree
Showing 33 changed files with 2,004 additions and 250 deletions.
135 changes: 61 additions & 74 deletions dashboards-observability/.cypress/integration/VisualizationCharts/13_stats_chart.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@ import {
delay,
TEST_QUERIES,
querySearch,
landOnEventVisualizations,
landOnEventVisualizations
} from '../../utils/event_constants';

const numberOfWindow = 4;
const metricsPrecisionUpdated = 2;
const metricUnit = 'cm';
const metricUnit = 'cm' ;
const titleSize = '25.5px';
const titleSizeUpdated = '40px';
const valueSize = '60.8px';
Expand All @@ -22,9 +22,7 @@ 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}');
cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Stats').type('{enter}');
};

describe('Render stats chart and verify default behaviour ', () => {
Expand Down Expand Up @@ -67,7 +65,7 @@ describe('Render stats chart for data configuration panel', () => {
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', () => {
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');
Expand All @@ -78,17 +76,17 @@ describe('Render stats chart for data configuration panel', () => {
});

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');
});
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', () => {
Expand All @@ -97,7 +95,7 @@ describe('Render stats chart for panel options', () => {
});

it('Render stats chart and verify the title gets updated according to user input ', () => {
cy.get('input[name="title"]').type('stats chart');
cy.get('input[name="title"]').type("stats chart");
cy.get('textarea[name="description"]').should('exist').click();
cy.get('.gtitle').contains('stats chart').should('exist');
});
Expand All @@ -107,13 +105,11 @@ 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();
cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(1).should('have.text', 'Hidden')
.click();
});
});

Expand All @@ -124,14 +120,10 @@ describe('Render stats chart verfiy functionality for Tooltip text', () => {

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', 'Metrics')
.click();
cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(3).should('have.text', 'Dimension')
.click();
cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(4).should('have.text', 'Metrics')
.click();
});
});

Expand All @@ -142,83 +134,78 @@ describe('Render stats chart for Chart Styles ', () => {

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();
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();
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('[data-test-subj="visualizeEditorRenderButton"]').click();
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('[data-test-subj="visualizeEditorRenderButton"]').click();
cy.get('.euiSpacer.euiSpacer--s').eq(12).click();
});
});

describe('Render stats chart and verify the Text Mode options', () => {
describe('Render stats chart and verify the Text Mode options' , () => {
beforeEach(() => {
renderStatsChart();
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.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', () => {
describe('Render stats chart and verify the +add threshold button option' , () => {
beforeEach(() => {
renderStatsChart();
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();
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', () => {
describe('Render stats chart and verify the reset button' , () => {
beforeEach(() => {
renderStatsChart();
});

it.only('Render stats chart and test the Reset button functionality', () => {
cy.get('[data-test-subj="valueFieldText"]').click().type(metricUnit);
cy.get('[data-test-subj="valueFieldNumber"]').eq(0).click().type(metricsPrecisionUpdated);
cy.get('[data-test-subj="valueFieldNumber"]').eq(1).click().type(titleSizeUpdated);
cy.get('[data-test-subj="valueFieldNumber"]').eq(2).click().type(valueSizeUpdated);
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
cy.get('[data-test-subj="euiColorPickerAnchor"]').click();
cy.get('.euiColorPickerSwatch.euiColorPicker__swatchSelect').eq(5).click();
cy.get('[data-test-subj="visualizeEditorResetButton"]').click();
});
});
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();
});
});
6 changes: 4 additions & 2 deletions dashboards-observability/common/constants/colors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ export const COLOR_PALETTES = [
type: 'gradient',
},
];
export const HEX_CONTRAST_COLOR = 0xFFFFFF;
export const HEX_CONTRAST_COLOR = 0xffffff;
export const PIE_PALETTES = [
{
value: DEFAULT_PALETTE,
Expand All @@ -177,10 +177,12 @@ export const PIE_PALETTES = [
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)';
66 changes: 66 additions & 0 deletions dashboards-observability/common/constants/explorer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@
* 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 =
Expand Down Expand Up @@ -79,6 +82,7 @@ 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 ADD_BUTTON_TEXT = '+ Add color theme';
export const NUMBER_INPUT_MIN_LIMIT = 1;

export const VIZ_CONTAIN_XY_AXIS = [
VIS_CHART_TYPES.Bar,
Expand Down Expand Up @@ -175,3 +179,65 @@ export const DEFAULT_PIE_CHART_PARAMETERS: DefaultPieChartParameterProps = {
};
export const GROUPBY = 'dimensions';
export const AGGREGATIONS = 'series';

// stats constants
export const STATS_GRID_SPACE_BETWEEN_X_AXIS = 0.01;
export const STATS_GRID_SPACE_BETWEEN_Y_AXIS = 100;
export const STATS_REDUCE_VALUE_SIZE_PERCENTAGE = 0.08;
export const STATS_REDUCE_TITLE_SIZE_PERCENTAGE = 0.05;
export const STATS_REDUCE_SERIES_UNIT_SIZE_PERCENTAGE = 0.2;
export const STATS_SERIES_UNIT_SUBSTRING_LENGTH = 3;
export const STATS_AXIS_MARGIN = {
l: 0,
r: 0,
b: 0,
t: 80,
};

export const STATS_ANNOTATION = {
xref: 'paper',
yref: 'paper',
showarrow: false,
};

export interface DefaultStatsChartParametersProps {
DefaultTextMode: string;
DefaultOrientation: string;
DefaultTitleSize: number;
DefaultChartType: string;
TextAlignment: string;
DefaultPrecision: number;
DefaultValueSize: number;
BaseThreshold: ThresholdUnitType;
}

export const DEFAULT_STATS_CHART_PARAMETERS: DefaultStatsChartParametersProps = {
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,
},
};

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';
5 changes: 4 additions & 1 deletion dashboards-observability/common/constants/shared.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
* SPDX-License-Identifier: Apache-2.0
*/
import CSS from 'csstype';
import { IField } from '../../common/types/explorer';

// Client route
export const PPL_BASE = '/api/ppl';
Expand Down Expand Up @@ -82,6 +83,7 @@ export enum VIS_CHART_TYPES {
TreeMap = 'tree_map',
Scatter = 'scatter',
LogsView = 'logs_view',
Stats = 'stats',
}

export const NUMERICAL_FIELDS = ['short', 'integer', 'long', 'float', 'double'];
Expand All @@ -98,9 +100,10 @@ export const ENABLED_VIS_TYPES = [
VIS_CHART_TYPES.Histogram,
VIS_CHART_TYPES.Scatter,
VIS_CHART_TYPES.LogsView,
VIS_CHART_TYPES.Stats,
];

//Live tail constants
// Live tail constants
export const LIVE_OPTIONS = [
{
label: '5s',
Expand Down
Loading

0 comments on commit bdf5291

Please sign in to comment.