From ed78cfff3d05f6f8af4f791aab7fbbb5c3dc9f05 Mon Sep 17 00:00:00 2001 From: rinku-kumar-psl Date: Wed, 18 May 2022 18:36:35 +0530 Subject: [PATCH 01/40] graph style section UI schema Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts --- .../config_controls/config_graph_style.tsx | 86 +++++++ .../notebook/repo/OpenSearchNotebookRepo.java | 219 ------------------ .../visualizations/charts/lines/line_type.ts | 48 ++++ 3 files changed, 134 insertions(+), 219 deletions(-) create mode 100644 dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_graph_style.tsx delete mode 100644 dashboards-observability/public/components/notebooks/docs/poc/zeppelin/zeppelin-plugins/notebookrepo/opensearch/src/main/java/org/apache/zeppelin/notebook/repo/OpenSearchNotebookRepo.java diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_graph_style.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_graph_style.tsx new file mode 100644 index 000000000..7c1e79a74 --- /dev/null +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_graph_style.tsx @@ -0,0 +1,86 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { useMemo, useCallback } from 'react'; +import { EuiAccordion, EuiButtonGroup, EuiSpacer, EuiTitle } from '@elastic/eui'; +import { PanelItem } from './config_panel_item'; +import { visChartTypes } from 'common/constants/shared'; + +interface options { + id: string; + label: string; +} +interface Props { + title: string + legend: string + options: options[] + idSelected: string + onChange: React.ChangeEvent +} + + +export const ConfigGraphStyle = ({ + visualizations, + schemas, + vizState, + handleConfigChange, + sectionName, + sectionId +}: any) => { + const { data } = visualizations; + const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData; + const handleConfigurationChange = useCallback( + (stateFiledName) => { + return (changes) => { + handleConfigChange({ + ...vizState, + [stateFiledName]: changes, + }); + }; + }, + [handleConfigChange, vizState] + ); + + const handleChange = (id) => {} + const toggleStyeButtons = schemas[0].props.options.map((btn: any) => ({ id: btn.modeId, label: btn.name })); + + + + const EuiToggleButtonGroup: React.FC = ({ title, legend, options, idSelected, onChange }) => { + return ( + <> + +

{title}

+ + + + + ) + } + console.log("schemas:", schemas); + + return ( + + handleChange(id)} + /> + + + ); +}; diff --git a/dashboards-observability/public/components/notebooks/docs/poc/zeppelin/zeppelin-plugins/notebookrepo/opensearch/src/main/java/org/apache/zeppelin/notebook/repo/OpenSearchNotebookRepo.java b/dashboards-observability/public/components/notebooks/docs/poc/zeppelin/zeppelin-plugins/notebookrepo/opensearch/src/main/java/org/apache/zeppelin/notebook/repo/OpenSearchNotebookRepo.java deleted file mode 100644 index 4405c3a6f..000000000 --- a/dashboards-observability/public/components/notebooks/docs/poc/zeppelin/zeppelin-plugins/notebookrepo/opensearch/src/main/java/org/apache/zeppelin/notebook/repo/OpenSearchNotebookRepo.java +++ /dev/null @@ -1,219 +0,0 @@ -/* - * 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 list(AuthenticationInfo subject) throws IOException { - Map 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 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 getSettings(AuthenticationInfo subject) { - LOGGER.warn("Method not implemented"); - return Collections.emptyList(); - } - - @Override - public void updateSettings(Map settings, AuthenticationInfo subject) { - LOGGER.warn("Method not implemented"); - } - -} - diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts index 20e452388..0b74942e6 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts @@ -14,6 +14,7 @@ import { ConfigThresholds, } 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 { ConfigGraphStyle } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_graph_style'; const sharedConfigs = getPlotlySharedConfigs(); const VIS_CATEGORY = getPlotlyCategory(); @@ -82,6 +83,53 @@ export const createLineTypeDefinition = (params: any = {}) => ({ }, ], }, + { + id: 'graph_style', + name: 'Graph Style', + editor: ConfigGraphStyle, + mapTo: 'graphStyle', + schemas: [ + { + name: 'Style', + component: null, + mapTo: 'style', + props: { + options: [ + { name: 'Lines', modeId: 'lines' }, + { name: 'Bars', modeId: 'bars' }, + { name: 'Points', modeId: 'points' }, + ], + defaultSelections: [{ name: 'Lines', modeId: 'lines' }], + }, + }, + { + name: 'Interpolation', + component: null, + mapTo: 'interpolation', + props: { + options: [ + { name: 'Linear', modeId: 'linear' }, + { name: 'Smooth', modeId: 'smooth' }, + { name: 'Step before', modeId: 'step_before' }, + { name: 'Step after', modeId: 'step_after' }, + ], + defaultSelections: [{ name: 'Smooth', modeId: 'smooth' }], + }, + }, + { + name: 'Line width', + component: null, + mapTo: 'lineWidth', + defaultState: 2, + }, + { + name: 'Fill Opacity', + component: null, + mapTo: 'fillOpacity', + defaultState: 30, + }, + ], + }, { id: 'thresholds', name: 'Thresholds', From 5f8ed2bd91a65fe6dea74a0a73e7ac690ea0cfde Mon Sep 17 00:00:00 2001 From: rinku-kumar-psl Date: Fri, 24 Jun 2022 10:57:33 +0530 Subject: [PATCH 02/40] changes for style mode and interpolation Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts --- .../config_controls/config_graph_style.tsx | 109 +++++++++++------- .../config_controls/config_style_item.tsx | 32 +++++ .../visualizations/charts/lines/line.tsx | 13 ++- .../visualizations/charts/lines/line_type.ts | 18 +-- 4 files changed, 115 insertions(+), 57 deletions(-) create mode 100644 dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_item.tsx diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_graph_style.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_graph_style.tsx index 7c1e79a74..cc579b0ba 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_graph_style.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_graph_style.tsx @@ -3,23 +3,9 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useMemo, useCallback } from 'react'; -import { EuiAccordion, EuiButtonGroup, EuiSpacer, EuiTitle } from '@elastic/eui'; -import { PanelItem } from './config_panel_item'; -import { visChartTypes } from 'common/constants/shared'; - -interface options { - id: string; - label: string; -} -interface Props { - title: string - legend: string - options: options[] - idSelected: string - onChange: React.ChangeEvent -} - +import React, { useMemo, useCallback, useState, Fragment } from 'react'; +import { EuiAccordion, EuiButtonGroup, EuiRange, EuiSpacer, EuiTitle } from '@elastic/eui'; +import { StyleItem } from './config_style_item'; export const ConfigGraphStyle = ({ visualizations, @@ -27,7 +13,7 @@ export const ConfigGraphStyle = ({ vizState, handleConfigChange, sectionName, - sectionId + sectionId = 'graphStyle' }: any) => { const { data } = visualizations; const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData; @@ -43,29 +29,40 @@ export const ConfigGraphStyle = ({ [handleConfigChange, vizState] ); - const handleChange = (id) => {} - const toggleStyeButtons = schemas[0].props.options.map((btn: any) => ({ id: btn.modeId, label: btn.name })); + const [styleGroup, interpolationGroup, lineWidth, fillOpacity] = schemas; - + const [sliderRange, setValue] = useState({ + lineWidth: lineWidth.defaultState, + opacity: fillOpacity.defaultState + }); + const onChange = (e) => { + const { name, value } = e.target; + setValue(state => ({ ...state, [name]: value })); + }; - const EuiToggleButtonGroup: React.FC = ({ title, legend, options, idSelected, onChange }) => { - return ( - <> - -

{title}

- - - - - ) - } - console.log("schemas:", schemas); + const dimensions = useMemo(() => { + return [styleGroup, interpolationGroup].map((schema, index) => { + const DimensionComponent = schema.component || StyleItem; + const params = { + title: schema.name, + legend: schema.name, + groupOptions: schema?.props?.options.map((btn: { name: string, modeId: string }) => ({ id: btn.modeId, label: btn.name })), + idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.modeId, + handleButtonChange: handleConfigurationChange(schema.mapTo), + vizState, + ...schema.props, + }; + return ( + <> + + + + ); + }); + }, [schemas, vizState, handleConfigurationChange]) + console.log("visualization:: ", visualizations) + console.log("vizState::", vizState) return ( - handleChange(id)} + {dimensions} + + + +

{lineWidth.name}

+ + + + + + +

{fillOpacity.name}

+ + + diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_item.tsx new file mode 100644 index 000000000..8b180364c --- /dev/null +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_item.tsx @@ -0,0 +1,32 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { uniqueId } from 'lodash'; +import { EuiTitle, EuiSpacer, EuiButtonGroup } from '@elastic/eui'; + +export const StyleItem = ({ + title, legend, groupOptions, idSelected, handleButtonChange +}: any) => { + return ( + <> + +

{title}

+ + + + + + ); +}; diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx index 4ce620efd..3e88f2d93 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -25,10 +25,12 @@ export const Line = ({ visualizations, layout, config }: any) => { const yaxis = dataConfig?.valueOptions && dataConfig.valueOptions.xaxis ? dataConfig.valueOptions.yaxis : []; const lastIndex = fields.length - 1; - const mode = - dataConfig?.chartOptions && dataConfig.chartOptions.mode && dataConfig.chartOptions.mode[0] - ? dataConfig.chartOptions.mode[0].modeId - : 'line'; + + const mode = dataConfig?.graphStyle?.style + ? dataConfig.graphStyle.style + : 'lines'; + const lineShape = dataConfig?.graphStyle?.interpolation + ? dataConfig.graphStyle.interpolation : 'spline'; let valueSeries; if (!isEmpty(xaxis) && !isEmpty(yaxis)) { @@ -42,9 +44,10 @@ export const Line = ({ visualizations, layout, config }: any) => { return { x: data[!isEmpty(xaxis) ? xaxis[0]?.label : fields[lastIndex].name], y: data[field.name], - type: 'line', + type: mode === 'bar' ? 'bar' : 'scatter', name: field.name, mode, + line: {shape: lineShape}, }; }); diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts index 0b74942e6..c7f38ddd8 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts @@ -12,9 +12,9 @@ import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/c import { ConfigValueOptions, ConfigThresholds, + ConfigGraphStyle, } 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 { ConfigGraphStyle } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_graph_style'; const sharedConfigs = getPlotlySharedConfigs(); const VIS_CATEGORY = getPlotlyCategory(); @@ -88,7 +88,7 @@ export const createLineTypeDefinition = (params: any = {}) => ({ name: 'Graph Style', editor: ConfigGraphStyle, mapTo: 'graphStyle', - schemas: [ + schemas: [ { name: 'Style', component: null, @@ -96,8 +96,8 @@ export const createLineTypeDefinition = (params: any = {}) => ({ props: { options: [ { name: 'Lines', modeId: 'lines' }, - { name: 'Bars', modeId: 'bars' }, - { name: 'Points', modeId: 'points' }, + { name: 'Bars', modeId: 'bar' }, + { name: 'Points', modeId: 'markers' }, ], defaultSelections: [{ name: 'Lines', modeId: 'lines' }], }, @@ -109,11 +109,11 @@ export const createLineTypeDefinition = (params: any = {}) => ({ props: { options: [ { name: 'Linear', modeId: 'linear' }, - { name: 'Smooth', modeId: 'smooth' }, - { name: 'Step before', modeId: 'step_before' }, - { name: 'Step after', modeId: 'step_after' }, + { name: 'Smooth', modeId: 'spline' }, + { name: 'Step before', modeId: 'hv' }, + { name: 'Step after', modeId: 'vh' }, ], - defaultSelections: [{ name: 'Smooth', modeId: 'smooth' }], + defaultSelections: [{ name: 'Smooth', modeId: 'spline' }], }, }, { @@ -121,12 +121,14 @@ export const createLineTypeDefinition = (params: any = {}) => ({ component: null, mapTo: 'lineWidth', defaultState: 2, + max:10, }, { name: 'Fill Opacity', component: null, mapTo: 'fillOpacity', defaultState: 30, + max:100, }, ], }, From 3da4b49cbae96c878ba549ed8db131a3ba596c25 Mon Sep 17 00:00:00 2001 From: rinku-kumar-psl Date: Fri, 24 Jun 2022 11:00:35 +0530 Subject: [PATCH 03/40] lineWidth integration for line mode Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line.tsx # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts # Conflicts: # dashboards-observability/common/constants/shared.ts # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx --- .../config_controls/config_graph_style.tsx | 69 +++++++------------ .../visualizations/charts/lines/line.tsx | 12 ++-- .../visualizations/charts/lines/line_type.ts | 10 +-- 3 files changed, 38 insertions(+), 53 deletions(-) diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_graph_style.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_graph_style.tsx index cc579b0ba..fd54889d5 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_graph_style.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_graph_style.tsx @@ -3,9 +3,10 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useMemo, useCallback, useState, Fragment } from 'react'; -import { EuiAccordion, EuiButtonGroup, EuiRange, EuiSpacer, EuiTitle } from '@elastic/eui'; +import React, { useMemo, useCallback } from 'react'; +import { EuiAccordion, EuiSpacer } from '@elastic/eui'; import { StyleItem } from './config_style_item'; +import { SliderConfig } from './config_style_slider'; export const ConfigGraphStyle = ({ visualizations, @@ -31,15 +32,6 @@ export const ConfigGraphStyle = ({ const [styleGroup, interpolationGroup, lineWidth, fillOpacity] = schemas; - const [sliderRange, setValue] = useState({ - lineWidth: lineWidth.defaultState, - opacity: fillOpacity.defaultState - }); - const onChange = (e) => { - const { name, value } = e.target; - setValue(state => ({ ...state, [name]: value })); - }; - const dimensions = useMemo(() => { return [styleGroup, interpolationGroup].map((schema, index) => { const DimensionComponent = schema.component || StyleItem; @@ -59,10 +51,30 @@ export const ConfigGraphStyle = ({ ); }); - }, [schemas, vizState, handleConfigurationChange]) + }, [schemas, vizState, handleConfigurationChange]); + + const sliderItem = useMemo(() => { + return [lineWidth, fillOpacity].map((schema, index) => { + const DimensionComponent = schema.component || SliderConfig; + const params = { + maxRange: schema.max, + title: schema.name, + currentRange: vizState[schema.mapTo] || schema?.defaultState, + handleSliderChange: handleConfigurationChange(schema.mapTo), + vizState, + ...schema.props, + }; + return ( + <> + + + + ); + }); + }, [schemas, vizState, handleConfigurationChange]); console.log("visualization:: ", visualizations) - console.log("vizState::", vizState) + console.log("vizStateeeeeeccccccc::", vizState) return ( {dimensions} - - -

{lineWidth.name}

- - - - - - -

{fillOpacity.name}

- - - - + {sliderItem} ); }; diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx index 3e88f2d93..c9d8fd946 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -8,8 +8,10 @@ import { take, isEmpty, last } from 'lodash'; import { Plt } from '../../plotly/plot'; 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 { DefaultGraphStyle } from '../../../../../common/constants/shared'; export const Line = ({ visualizations, layout, config }: any) => { + const { DefaultMode,Interpolation,LineWidth,FillOpacity } = DefaultGraphStyle; const { data = {}, metadata: { fields }, @@ -26,11 +28,9 @@ export const Line = ({ visualizations, layout, config }: any) => { dataConfig?.valueOptions && dataConfig.valueOptions.xaxis ? dataConfig.valueOptions.yaxis : []; const lastIndex = fields.length - 1; - const mode = dataConfig?.graphStyle?.style - ? dataConfig.graphStyle.style - : 'lines'; - const lineShape = dataConfig?.graphStyle?.interpolation - ? dataConfig.graphStyle.interpolation : 'spline'; + const mode = dataConfig?.graphStyle?.style || DefaultMode; + const lineShape = dataConfig?.graphStyle?.interpolation || Interpolation; + const lineWidth = dataConfig?.graphStyle?.lineWidth || LineWidth; let valueSeries; if (!isEmpty(xaxis) && !isEmpty(yaxis)) { @@ -47,7 +47,7 @@ export const Line = ({ visualizations, layout, config }: any) => { type: mode === 'bar' ? 'bar' : 'scatter', name: field.name, mode, - line: {shape: lineShape}, + line: { shape: lineShape, width: lineWidth }, }; }); diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts index c7f38ddd8..437b25725 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts @@ -16,8 +16,10 @@ import { } 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 { DefaultGraphStyle } from '../../../../../common/constants/shared'; const sharedConfigs = getPlotlySharedConfigs(); const VIS_CATEGORY = getPlotlyCategory(); +const { DefaultMode,Interpolation,LineWidth,FillOpacity } = DefaultGraphStyle; export const createLineTypeDefinition = (params: any = {}) => ({ name: 'line', @@ -99,7 +101,7 @@ export const createLineTypeDefinition = (params: any = {}) => ({ { name: 'Bars', modeId: 'bar' }, { name: 'Points', modeId: 'markers' }, ], - defaultSelections: [{ name: 'Lines', modeId: 'lines' }], + defaultSelections: [{ name: 'Lines', modeId: DefaultMode }], }, }, { @@ -113,21 +115,21 @@ export const createLineTypeDefinition = (params: any = {}) => ({ { name: 'Step before', modeId: 'hv' }, { name: 'Step after', modeId: 'vh' }, ], - defaultSelections: [{ name: 'Smooth', modeId: 'spline' }], + defaultSelections: [{ name: 'Smooth', modeId: Interpolation }], }, }, { name: 'Line width', component: null, mapTo: 'lineWidth', - defaultState: 2, + defaultState: LineWidth, max:10, }, { name: 'Fill Opacity', component: null, mapTo: 'fillOpacity', - defaultState: 30, + defaultState: FillOpacity, max:100, }, ], From 4a4207c30f3351a53dedd4eb2c424038a213da94 Mon Sep 17 00:00:00 2001 From: rinku-kumar-psl Date: Fri, 24 Jun 2022 11:03:22 +0530 Subject: [PATCH 04/40] changes for Legend and Orientation in Line Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_legend.tsx # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx --- .../config_controls/config_graph_style.tsx | 8 +-- .../config_controls/config_style_item.tsx | 32 ----------- .../visualizations/charts/lines/line.tsx | 7 +++ .../visualizations/charts/lines/line_type.ts | 54 +++++++++++++++++-- 4 files changed, 61 insertions(+), 40 deletions(-) delete mode 100644 dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_item.tsx diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_graph_style.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_graph_style.tsx index fd54889d5..aa612b050 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_graph_style.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_graph_style.tsx @@ -5,7 +5,7 @@ import React, { useMemo, useCallback } from 'react'; import { EuiAccordion, EuiSpacer } from '@elastic/eui'; -import { StyleItem } from './config_style_item'; +import { ButtonGroupItem } from './config_button_group'; import { SliderConfig } from './config_style_slider'; export const ConfigGraphStyle = ({ @@ -30,11 +30,11 @@ export const ConfigGraphStyle = ({ [handleConfigChange, vizState] ); - const [styleGroup, interpolationGroup, lineWidth, fillOpacity] = schemas; + const [orientationMode, styleGroup, interpolationGroup, lineWidth, fillOpacity] = schemas; const dimensions = useMemo(() => { - return [styleGroup, interpolationGroup].map((schema, index) => { - const DimensionComponent = schema.component || StyleItem; + return [orientationMode, styleGroup, interpolationGroup].map((schema, index) => { + const DimensionComponent = schema.component || ButtonGroupItem; const params = { title: schema.name, legend: schema.name, diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_item.tsx deleted file mode 100644 index 8b180364c..000000000 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_item.tsx +++ /dev/null @@ -1,32 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import React from 'react'; -import { uniqueId } from 'lodash'; -import { EuiTitle, EuiSpacer, EuiButtonGroup } from '@elastic/eui'; - -export const StyleItem = ({ - title, legend, groupOptions, idSelected, handleButtonChange -}: any) => { - return ( - <> - -

{title}

- - - - - - ); -}; diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx index c9d8fd946..0ad66ffa0 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -31,6 +31,8 @@ export const Line = ({ visualizations, layout, config }: any) => { const mode = dataConfig?.graphStyle?.style || DefaultMode; const lineShape = dataConfig?.graphStyle?.interpolation || Interpolation; const lineWidth = dataConfig?.graphStyle?.lineWidth || LineWidth; + const showLegend = dataConfig?.legend?.showLegend === 'hidden' ? false : true; + const legendPosition = dataConfig?.legend?.position || 'v'; let valueSeries; if (!isEmpty(xaxis) && !isEmpty(yaxis)) { @@ -55,6 +57,11 @@ export const Line = ({ visualizations, layout, config }: any) => { ...layout, ...layoutConfig.layout, title: dataConfig?.panelOptions?.title || layoutConfig.layout?.title || '', + legend:{ + ...layout.legend, + orientation: legendPosition, + }, + showlegend: showLegend, }; if (dataConfig.thresholds || availabilityConfig.level) { diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts index 437b25725..d558f1ae0 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts @@ -13,13 +13,14 @@ import { ConfigValueOptions, ConfigThresholds, ConfigGraphStyle, + ConfigLegend, } 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 { DefaultGraphStyle } from '../../../../../common/constants/shared'; const sharedConfigs = getPlotlySharedConfigs(); const VIS_CATEGORY = getPlotlyCategory(); -const { DefaultMode,Interpolation,LineWidth,FillOpacity } = DefaultGraphStyle; +const { DefaultMode, Interpolation, LineWidth, FillOpacity } = DefaultGraphStyle; export const createLineTypeDefinition = (params: any = {}) => ({ name: 'line', @@ -85,12 +86,57 @@ export const createLineTypeDefinition = (params: any = {}) => ({ }, ], }, + { + id: 'legend', + name: 'Legend', + editor: ConfigLegend, + mapTo: 'legend', + schemas: [ + { + name: 'Show Legend', + mapTo: 'showLegend', + component: null, + props: { + options: [ + { name: 'Show', modeId: "show" }, + { name: 'Hidden', modeId: "hidden" }, + ], + defaultSelections: [{ name: 'Show', modeId: "show" }], + }, + }, + { + name: 'Position', + mapTo: 'position', + component: null, + props: { + options: [ + { name: 'Right', modeId: 'v' }, + { name: 'Bottom', modeId: 'h' }, + ], + defaultSelections: [{ name: 'Right', modeId: 'v' }], + }, + }, + ], + }, { id: 'graph_style', name: 'Graph Style', editor: ConfigGraphStyle, mapTo: 'graphStyle', - schemas: [ + schemas: [ + { + name: 'Orientation', + component: null, + mapTo: 'orientation', + props: { + options: [ + { name: 'Auto', modeId: 'v' }, + { name: 'Horizontal', modeId: 'h' }, + { name: 'Vertical', modeId: 'v' }, + ], + defaultSelections: [{ name: 'Auto', modeId: 'v' }], + }, + }, { name: 'Style', component: null, @@ -123,14 +169,14 @@ export const createLineTypeDefinition = (params: any = {}) => ({ component: null, mapTo: 'lineWidth', defaultState: LineWidth, - max:10, + max: 10, }, { name: 'Fill Opacity', component: null, mapTo: 'fillOpacity', defaultState: FillOpacity, - max:100, + max: 100, }, ], }, From 790b33b3e474491cde9e6f363f082a626cbccc3b Mon Sep 17 00:00:00 2001 From: rinku-kumar-psl Date: Fri, 24 Jun 2022 11:05:50 +0530 Subject: [PATCH 05/40] point size and Bar Alignment changes Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line.tsx # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/common/constants/shared.ts # dashboards-observability/common/types/explorer.ts --- ...raph_style.tsx => config_chart_styles.tsx} | 34 ++++++++++--- .../config_panes/config_controls/index.ts | 1 + .../visualizations/charts/lines/line.tsx | 16 +++--- .../visualizations/charts/lines/line_type.ts | 49 +++++++++++-------- 4 files changed, 65 insertions(+), 35 deletions(-) rename dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/{config_graph_style.tsx => config_chart_styles.tsx} (62%) diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_graph_style.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_styles.tsx similarity index 62% rename from dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_graph_style.tsx rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_styles.tsx index aa612b050..bc93dd283 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_graph_style.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_styles.tsx @@ -7,14 +7,15 @@ import React, { useMemo, useCallback } from 'react'; import { EuiAccordion, EuiSpacer } from '@elastic/eui'; import { ButtonGroupItem } from './config_button_group'; import { SliderConfig } from './config_style_slider'; +import { IConfigPanelOptionSection } from 'common/types/explorer'; -export const ConfigGraphStyle = ({ +export const ConfigChartStyles = ({ visualizations, schemas, vizState, handleConfigChange, sectionName, - sectionId = 'graphStyle' + sectionId = 'chartStyles' }: any) => { const { data } = visualizations; const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData; @@ -30,10 +31,28 @@ export const ConfigGraphStyle = ({ [handleConfigChange, vizState] ); - const [orientationMode, styleGroup, interpolationGroup, lineWidth, fillOpacity] = schemas; + const [styleGroup, interpolationGroup, barAlignment, lineWidth, fillOpacity, pointSize] = schemas; + + const dimensionOption = useMemo(() => { + let dimensionItems: { [key: string]: IConfigPanelOptionSection[] } = { buttonOptions: [], sliderOptions: [] }; + if (!vizState?.style || vizState?.style === "lines") { + dimensionItems.buttonOptions = [styleGroup, interpolationGroup]; + dimensionItems.sliderOptions = [lineWidth, fillOpacity]; + } else if (vizState?.style === "bar") { + dimensionItems.buttonOptions = [styleGroup, barAlignment]; + dimensionItems.sliderOptions = [lineWidth, fillOpacity]; + } else if(vizState?.style === "markers") { + dimensionItems.buttonOptions = [styleGroup]; + dimensionItems.sliderOptions = [pointSize]; + } else if(vizState?.style === "lines+markers"){ + dimensionItems.buttonOptions = [styleGroup]; + dimensionItems.sliderOptions = [lineWidth, pointSize]; + } + return dimensionItems; + }, [vizState]); const dimensions = useMemo(() => { - return [orientationMode, styleGroup, interpolationGroup].map((schema, index) => { + return dimensionOption.buttonOptions.map((schema, index) => { const DimensionComponent = schema.component || ButtonGroupItem; const params = { title: schema.name, @@ -51,10 +70,10 @@ export const ConfigGraphStyle = ({ ); }); - }, [schemas, vizState, handleConfigurationChange]); + }, [schemas, vizState, handleConfigurationChange, dimensionOption]); const sliderItem = useMemo(() => { - return [lineWidth, fillOpacity].map((schema, index) => { + return dimensionOption.sliderOptions.map((schema, index) => { const DimensionComponent = schema.component || SliderConfig; const params = { maxRange: schema.max, @@ -71,7 +90,7 @@ export const ConfigGraphStyle = ({ ); }); - }, [schemas, vizState, handleConfigurationChange]); + }, [schemas, vizState, handleConfigurationChange, dimensionOption]); console.log("visualization:: ", visualizations) console.log("vizStateeeeeeccccccc::", vizState) @@ -83,7 +102,6 @@ export const ConfigGraphStyle = ({ paddingSize="s" > {dimensions} - {sliderItem} ); diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts index dd0dd73c3..550d80f2f 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts @@ -11,6 +11,7 @@ export { ConfigThresholds } from './config_thresholds'; export { ConfigText } from './config_text'; export { ConfigGaugeValueOptions } from './config_gauge_options'; export { ColorPalettePicker } from './config_color_palette_picker'; +export { ConfigChartStyles } from './config_chart_styles'; export { ConfigLegend } from './config_legend'; export { HeatmapColorPalettePicker } from './config_heatmap_color_palette_picker'; export { SingleColorPicker } from './config_single_color_picker'; diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx index 0ad66ffa0..be5f4ad35 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -8,10 +8,10 @@ import { take, isEmpty, last } from 'lodash'; import { Plt } from '../../plotly/plot'; 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 { DefaultGraphStyle } from '../../../../../common/constants/shared'; +import { DefaultChartStyles } from '../../../../../common/constants/shared'; export const Line = ({ visualizations, layout, config }: any) => { - const { DefaultMode,Interpolation,LineWidth,FillOpacity } = DefaultGraphStyle; + const { DefaultMode,Interpolation,LineWidth,FillOpacity } = DefaultChartStyles; const { data = {}, metadata: { fields }, @@ -28,11 +28,12 @@ export const Line = ({ visualizations, layout, config }: any) => { dataConfig?.valueOptions && dataConfig.valueOptions.xaxis ? dataConfig.valueOptions.yaxis : []; const lastIndex = fields.length - 1; - const mode = dataConfig?.graphStyle?.style || DefaultMode; - const lineShape = dataConfig?.graphStyle?.interpolation || Interpolation; - const lineWidth = dataConfig?.graphStyle?.lineWidth || LineWidth; + const mode = dataConfig?.chartStyles?.style || DefaultMode; + const lineShape = dataConfig?.chartStyles?.interpolation || Interpolation; + const lineWidth = dataConfig?.chartStyles?.lineWidth || LineWidth; const showLegend = dataConfig?.legend?.showLegend === 'hidden' ? false : true; const legendPosition = dataConfig?.legend?.position || 'v'; + const markerSize = dataConfig?.chartStyles?.pointSize || 5; let valueSeries; if (!isEmpty(xaxis) && !isEmpty(yaxis)) { @@ -50,6 +51,9 @@ export const Line = ({ visualizations, layout, config }: any) => { name: field.name, mode, line: { shape: lineShape, width: lineWidth }, + marker: { + size: markerSize + }, }; }); @@ -111,6 +115,6 @@ export const Line = ({ visualizations, layout, config }: any) => { ...config, ...(layoutConfig.config && layoutConfig.config), }; - + return ; }; diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts index d558f1ae0..103126552 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts @@ -12,15 +12,14 @@ import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/c import { ConfigValueOptions, ConfigThresholds, - ConfigGraphStyle, + ConfigChartStyles, ConfigLegend, } 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 { DefaultGraphStyle } from '../../../../../common/constants/shared'; +import { DefaultChartStyles } from '../../../../../common/constants/shared'; const sharedConfigs = getPlotlySharedConfigs(); const VIS_CATEGORY = getPlotlyCategory(); -const { DefaultMode, Interpolation, LineWidth, FillOpacity } = DefaultGraphStyle; +const { DefaultMode, Interpolation, LineWidth, FillOpacity } = DefaultChartStyles; export const createLineTypeDefinition = (params: any = {}) => ({ name: 'line', @@ -119,24 +118,11 @@ export const createLineTypeDefinition = (params: any = {}) => ({ ], }, { - id: 'graph_style', - name: 'Graph Style', - editor: ConfigGraphStyle, - mapTo: 'graphStyle', + id: 'chart_styles', + name: 'Chart styles', + editor: ConfigChartStyles, + mapTo: 'chartStyles', schemas: [ - { - name: 'Orientation', - component: null, - mapTo: 'orientation', - props: { - options: [ - { name: 'Auto', modeId: 'v' }, - { name: 'Horizontal', modeId: 'h' }, - { name: 'Vertical', modeId: 'v' }, - ], - defaultSelections: [{ name: 'Auto', modeId: 'v' }], - }, - }, { name: 'Style', component: null, @@ -146,6 +132,7 @@ export const createLineTypeDefinition = (params: any = {}) => ({ { name: 'Lines', modeId: 'lines' }, { name: 'Bars', modeId: 'bar' }, { name: 'Points', modeId: 'markers' }, + { name: 'Lines + Points', modeId: 'lines+markers' } ], defaultSelections: [{ name: 'Lines', modeId: DefaultMode }], }, @@ -164,6 +151,19 @@ export const createLineTypeDefinition = (params: any = {}) => ({ defaultSelections: [{ name: 'Smooth', modeId: Interpolation }], }, }, + { + name: 'Bar alignment', + component: null, + mapTo: 'barAlignment', + props: { + options: [ + { name: 'Before', modeId: 'before' }, + { name: 'Center', modeId: 'center' }, + { name: 'After', modeId: 'after' }, + ], + defaultSelections: [{ name: 'Center', modeId: 'Center' }], + }, + }, { name: 'Line width', component: null, @@ -178,6 +178,13 @@ export const createLineTypeDefinition = (params: any = {}) => ({ defaultState: FillOpacity, max: 100, }, + { + name: 'Point Size', + component: null, + mapTo: 'pointSize', + defaultState: 5, + max: 40, + }, ], }, { From b5a61910280ca78389e947c054418f811956b6a3 Mon Sep 17 00:00:00 2001 From: rinku-kumar-psl Date: Thu, 23 Jun 2022 19:59:11 +0530 Subject: [PATCH 06/40] implemented fill opacity for line chart Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line.tsx # Conflicts: # dashboards-observability/public/components/event_analytics/utils/utils.tsx --- .../config_controls/config_chart_styles.tsx | 2 +- .../visualizations/charts/lines/line.tsx | 22 ++++++++++++++----- 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_styles.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_styles.tsx index bc93dd283..6692cd32d 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_styles.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_styles.tsx @@ -46,7 +46,7 @@ export const ConfigChartStyles = ({ dimensionItems.sliderOptions = [pointSize]; } else if(vizState?.style === "lines+markers"){ dimensionItems.buttonOptions = [styleGroup]; - dimensionItems.sliderOptions = [lineWidth, pointSize]; + dimensionItems.sliderOptions = [lineWidth, fillOpacity, pointSize]; } return dimensionItems; }, [vizState]); diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx index be5f4ad35..d5866d588 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -8,10 +8,11 @@ import { take, isEmpty, last } from 'lodash'; import { Plt } from '../../plotly/plot'; 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 { DefaultChartStyles } from '../../../../../common/constants/shared'; +import { DefaultChartStyles, PLOTLY_COLOR } from '../../../../../common/constants/shared'; +import { hexToRgba } from '../../../../components/event_analytics/utils/utils'; export const Line = ({ visualizations, layout, config }: any) => { - const { DefaultMode,Interpolation,LineWidth,FillOpacity } = DefaultChartStyles; + const { DefaultMode, Interpolation, LineWidth, FillOpacity } = DefaultChartStyles; const { data = {}, metadata: { fields }, @@ -34,6 +35,7 @@ export const Line = ({ visualizations, layout, config }: any) => { const showLegend = dataConfig?.legend?.showLegend === 'hidden' ? false : true; const legendPosition = dataConfig?.legend?.position || 'v'; const markerSize = dataConfig?.chartStyles?.pointSize || 5; + const fillOpacity = dataConfig?.chartStyles?.fillOpacity !== undefined ? dataConfig?.chartStyles?.fillOpacity / 100 : FillOpacity / 100; let valueSeries; if (!isEmpty(xaxis) && !isEmpty(yaxis)) { @@ -43,14 +45,22 @@ export const Line = ({ visualizations, layout, config }: any) => { } const [calculatedLayout, lineValues] = useMemo(() => { - let calculatedLineValues = valueSeries.map((field: any) => { + + let calculatedLineValues = valueSeries.map((field: any, index: number) => { + const fillColor = hexToRgba(PLOTLY_COLOR[index % PLOTLY_COLOR.length], fillOpacity); return { x: data[!isEmpty(xaxis) ? xaxis[0]?.label : fields[lastIndex].name], y: data[field.name], type: mode === 'bar' ? 'bar' : 'scatter', name: field.name, mode, - line: { shape: lineShape, width: lineWidth }, + fill: 'tozeroy', + fillcolor: fillColor, + line: { + shape: lineShape, + width: lineWidth, + color: PLOTLY_COLOR[index], + }, marker: { size: markerSize }, @@ -61,7 +71,7 @@ export const Line = ({ visualizations, layout, config }: any) => { ...layout, ...layoutConfig.layout, title: dataConfig?.panelOptions?.title || layoutConfig.layout?.title || '', - legend:{ + legend: { ...layout.legend, orientation: legendPosition, }, @@ -115,6 +125,6 @@ export const Line = ({ visualizations, layout, config }: any) => { ...config, ...(layoutConfig.config && layoutConfig.config), }; - + return ; }; From bae6b962617943b129a1a9973fe4ba4d5dcd486a Mon Sep 17 00:00:00 2001 From: rinku-kumar-psl Date: Fri, 24 Jun 2022 11:07:54 +0530 Subject: [PATCH 07/40] changes for line width and fill opacity in bar mode and removed mode from chartOption Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/common/constants/shared.ts --- .../visualizations/charts/lines/line.tsx | 27 +++++++++++++++---- .../visualizations/charts/lines/line_type.ts | 26 ++---------------- 2 files changed, 24 insertions(+), 29 deletions(-) diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx index d5866d588..51177868c 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -35,7 +35,7 @@ export const Line = ({ visualizations, layout, config }: any) => { const showLegend = dataConfig?.legend?.showLegend === 'hidden' ? false : true; const legendPosition = dataConfig?.legend?.position || 'v'; const markerSize = dataConfig?.chartStyles?.pointSize || 5; - const fillOpacity = dataConfig?.chartStyles?.fillOpacity !== undefined ? dataConfig?.chartStyles?.fillOpacity / 100 : FillOpacity / 100; + const fillOpacity = dataConfig?.chartStyles?.fillOpacity !== undefined ? dataConfig?.chartStyles?.fillOpacity / 200 : FillOpacity / 200; let valueSeries; if (!isEmpty(xaxis) && !isEmpty(yaxis)) { @@ -45,28 +45,44 @@ export const Line = ({ visualizations, layout, config }: any) => { } const [calculatedLayout, lineValues] = useMemo(() => { + const isBarMode = mode === 'bar'; let calculatedLineValues = valueSeries.map((field: any, index: number) => { const fillColor = hexToRgba(PLOTLY_COLOR[index % PLOTLY_COLOR.length], fillOpacity); + const barMarker = { + color: PLOTLY_COLOR[index], + opacity: fillOpacity, + line: { + color: PLOTLY_COLOR[index], + width: lineWidth + } + }; + const fillProperty = { + fill: 'tozeroy', + fillcolor: fillColor, + }; return { x: data[!isEmpty(xaxis) ? xaxis[0]?.label : fields[lastIndex].name], y: data[field.name], - type: mode === 'bar' ? 'bar' : 'scatter', + type: isBarMode ? 'bar' : 'scatter', name: field.name, mode, - fill: 'tozeroy', - fillcolor: fillColor, + ...!['bar', 'markers'].includes(mode) && fillProperty, line: { shape: lineShape, width: lineWidth, color: PLOTLY_COLOR[index], }, marker: { - size: markerSize + size: markerSize, + ...isBarMode && barMarker, }, }; }); + var layoutForBarMode = { + barmode: 'group', + }; const mergedLayout = { ...layout, ...layoutConfig.layout, @@ -76,6 +92,7 @@ export const Line = ({ visualizations, layout, config }: any) => { orientation: legendPosition, }, showlegend: showLegend, + ...isBarMode && layoutForBarMode, }; if (dataConfig.thresholds || availabilityConfig.level) { diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts index 103126552..e18568733 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts @@ -63,28 +63,6 @@ export const createLineTypeDefinition = (params: any = {}) => ({ }, ], }, - { - id: 'chart_options', - name: 'Chart options', - editor: ConfigValueOptions, - mapTo: 'chartOptions', - schemas: [ - { - name: 'Mode', - isSingleSelection: true, - component: null, - mapTo: 'mode', - props: { - dropdownList: [ - { name: 'Markers', modeId: 'markers' }, - { name: 'Lines', modeId: 'lines' }, - { name: 'Lines + Markers', modeId: 'lines+markers' }, - ], - defaultSelections: [{ name: 'Lines', modeId: 'lines' }], - }, - }, - ], - }, { id: 'legend', name: 'Legend', @@ -124,7 +102,7 @@ export const createLineTypeDefinition = (params: any = {}) => ({ mapTo: 'chartStyles', schemas: [ { - name: 'Style', + name: 'Mode', component: null, mapTo: 'style', props: { @@ -161,7 +139,7 @@ export const createLineTypeDefinition = (params: any = {}) => ({ { name: 'Center', modeId: 'center' }, { name: 'After', modeId: 'after' }, ], - defaultSelections: [{ name: 'Center', modeId: 'Center' }], + defaultSelections: [{ name: 'Center', modeId: 'center' }], }, }, { From c91c93497b7358a6978212ed68da8f44536696e4 Mon Sep 17 00:00:00 2001 From: rinku-kumar-psl Date: Fri, 13 May 2022 15:51:37 +0530 Subject: [PATCH 08/40] updated bar mode opacity in line chart Signed-off-by: rinku-kumar-psl --- .../public/components/visualizations/charts/lines/line.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx index 51177868c..93a59f54b 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -50,8 +50,7 @@ export const Line = ({ visualizations, layout, config }: any) => { let calculatedLineValues = valueSeries.map((field: any, index: number) => { const fillColor = hexToRgba(PLOTLY_COLOR[index % PLOTLY_COLOR.length], fillOpacity); const barMarker = { - color: PLOTLY_COLOR[index], - opacity: fillOpacity, + color: fillColor, line: { color: PLOTLY_COLOR[index], width: lineWidth From 30e7e8837ba22653992bef75e41ccba7897aca68 Mon Sep 17 00:00:00 2001 From: rinku-kumar-psl Date: Fri, 24 Jun 2022 11:10:26 +0530 Subject: [PATCH 09/40] refactored the config chart style code Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/common/constants/shared.ts # dashboards-observability/common/types/explorer.ts --- .../config_controls/config_chart_styles.tsx | 108 ------------------ .../config_line_chart_styles.tsx | 88 ++++++++++++++ .../config_panes/config_controls/index.ts | 2 +- .../visualizations/charts/lines/line.tsx | 8 +- .../visualizations/charts/lines/line_type.ts | 42 +++---- 5 files changed, 111 insertions(+), 137 deletions(-) delete mode 100644 dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_styles.tsx create mode 100644 dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_styles.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_styles.tsx deleted file mode 100644 index 6692cd32d..000000000 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_styles.tsx +++ /dev/null @@ -1,108 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import React, { useMemo, useCallback } from 'react'; -import { EuiAccordion, EuiSpacer } from '@elastic/eui'; -import { ButtonGroupItem } from './config_button_group'; -import { SliderConfig } from './config_style_slider'; -import { IConfigPanelOptionSection } from 'common/types/explorer'; - -export const ConfigChartStyles = ({ - visualizations, - schemas, - vizState, - handleConfigChange, - sectionName, - sectionId = 'chartStyles' -}: any) => { - const { data } = visualizations; - const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData; - const handleConfigurationChange = useCallback( - (stateFiledName) => { - return (changes) => { - handleConfigChange({ - ...vizState, - [stateFiledName]: changes, - }); - }; - }, - [handleConfigChange, vizState] - ); - - const [styleGroup, interpolationGroup, barAlignment, lineWidth, fillOpacity, pointSize] = schemas; - - const dimensionOption = useMemo(() => { - let dimensionItems: { [key: string]: IConfigPanelOptionSection[] } = { buttonOptions: [], sliderOptions: [] }; - if (!vizState?.style || vizState?.style === "lines") { - dimensionItems.buttonOptions = [styleGroup, interpolationGroup]; - dimensionItems.sliderOptions = [lineWidth, fillOpacity]; - } else if (vizState?.style === "bar") { - dimensionItems.buttonOptions = [styleGroup, barAlignment]; - dimensionItems.sliderOptions = [lineWidth, fillOpacity]; - } else if(vizState?.style === "markers") { - dimensionItems.buttonOptions = [styleGroup]; - dimensionItems.sliderOptions = [pointSize]; - } else if(vizState?.style === "lines+markers"){ - dimensionItems.buttonOptions = [styleGroup]; - dimensionItems.sliderOptions = [lineWidth, fillOpacity, pointSize]; - } - return dimensionItems; - }, [vizState]); - - const dimensions = useMemo(() => { - return dimensionOption.buttonOptions.map((schema, index) => { - const DimensionComponent = schema.component || ButtonGroupItem; - const params = { - title: schema.name, - legend: schema.name, - groupOptions: schema?.props?.options.map((btn: { name: string, modeId: string }) => ({ id: btn.modeId, label: btn.name })), - idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.modeId, - handleButtonChange: handleConfigurationChange(schema.mapTo), - vizState, - ...schema.props, - }; - return ( - <> - - - - ); - }); - }, [schemas, vizState, handleConfigurationChange, dimensionOption]); - - const sliderItem = useMemo(() => { - return dimensionOption.sliderOptions.map((schema, index) => { - const DimensionComponent = schema.component || SliderConfig; - const params = { - maxRange: schema.max, - title: schema.name, - currentRange: vizState[schema.mapTo] || schema?.defaultState, - handleSliderChange: handleConfigurationChange(schema.mapTo), - vizState, - ...schema.props, - }; - return ( - <> - - - - ); - }); - }, [schemas, vizState, handleConfigurationChange, dimensionOption]); - - console.log("visualization:: ", visualizations) - console.log("vizStateeeeeeccccccc::", vizState) - return ( - - {dimensions} - {sliderItem} - - ); -}; diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx new file mode 100644 index 000000000..a42f6daf8 --- /dev/null +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx @@ -0,0 +1,88 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { useMemo, useCallback } from 'react'; +import { EuiAccordion, EuiSpacer } from '@elastic/eui'; +import { ButtonGroupItem } from './config_button_group'; +import { IConfigPanelOptionSection } from 'common/types/explorer'; + +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) => { + return (changes) => { + handleConfigChange({ + ...vizState, + [stateFiledName]: changes, + }); + }; + }, + [handleConfigChange, vizState] + ); + + /* To update the schema options based on current style mode selection */ + const currentSchemas = useMemo(() => { + if (!vizState?.style || vizState?.style === "lines") { + return schemas.filter((schema: IConfigPanelOptionSection) => schema.mapTo !== 'pointSize'); + } else if (vizState?.style === "bar") { + return schemas.filter((schema: IConfigPanelOptionSection) => !["interpolation", "pointSize"].includes(schema.mapTo)); + } else if (vizState?.style === "markers") { + return schemas.filter((schema: IConfigPanelOptionSection) => ["style", "pointSize"].includes(schema.mapTo)); + } else return schemas.filter((schema: IConfigPanelOptionSection) => schema.mapTo !== 'interpolation'); + }, [vizState]); + + const dimensions = useMemo(() => + currentSchemas && currentSchemas.map((schema: IConfigPanelOptionSection, index: string) => { + let params; + const DimensionComponent = schema.component || ButtonGroupItem; + if (schema.eleType === 'buttons') { + params = { + title: schema.name, + legend: schema.name, + groupOptions: schema?.props?.options.map((btn: { name: string, modeId: string }) => ({ id: btn.modeId, label: btn.name })), + idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.modeId, + handleButtonChange: handleConfigurationChange(schema.mapTo), + vizState, + ...schema.props, + }; + } else if (schema.eleType === 'slider') { + params = { + maxRange: schema.max, + title: schema.name, + currentRange: vizState[schema.mapTo] || schema?.defaultState, + handleSliderChange: handleConfigurationChange(schema.mapTo), + vizState, + ...schema.props, + }; + } + return ( + <> + + + + ) + }) + , [schemas, vizState, handleConfigurationChange, currentSchemas]); + + return ( + + {dimensions} + + ); +}; diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts index 550d80f2f..5ac7e5773 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts @@ -11,7 +11,7 @@ export { ConfigThresholds } from './config_thresholds'; export { ConfigText } from './config_text'; export { ConfigGaugeValueOptions } from './config_gauge_options'; export { ColorPalettePicker } from './config_color_palette_picker'; -export { ConfigChartStyles } from './config_chart_styles'; +export { ConfigLineChartStyles } from './config_line_chart_styles'; export { ConfigLegend } from './config_legend'; export { HeatmapColorPalettePicker } from './config_heatmap_color_palette_picker'; export { SingleColorPicker } from './config_single_color_picker'; diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx index 93a59f54b..0ba385b4f 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -12,7 +12,7 @@ import { DefaultChartStyles, PLOTLY_COLOR } from '../../../../../common/constant import { hexToRgba } from '../../../../components/event_analytics/utils/utils'; export const Line = ({ visualizations, layout, config }: any) => { - const { DefaultMode, Interpolation, LineWidth, FillOpacity } = DefaultChartStyles; + const { DefaultMode, Interpolation, LineWidth, FillOpacity, MarkerSize, LegendPosition, ShowLegend } = DefaultChartStyles; const { data = {}, metadata: { fields }, @@ -32,9 +32,9 @@ export const Line = ({ visualizations, layout, config }: any) => { const mode = dataConfig?.chartStyles?.style || DefaultMode; const lineShape = dataConfig?.chartStyles?.interpolation || Interpolation; const lineWidth = dataConfig?.chartStyles?.lineWidth || LineWidth; - const showLegend = dataConfig?.legend?.showLegend === 'hidden' ? false : true; - const legendPosition = dataConfig?.legend?.position || 'v'; - const markerSize = dataConfig?.chartStyles?.pointSize || 5; + const showLegend = dataConfig.legend && dataConfig.legend?.showLegend !== ShowLegend ? false : true; + const legendPosition = dataConfig?.legend?.position || LegendPosition; + const markerSize = dataConfig?.chartStyles?.pointSize || MarkerSize; const fillOpacity = dataConfig?.chartStyles?.fillOpacity !== undefined ? dataConfig?.chartStyles?.fillOpacity / 200 : FillOpacity / 200; let valueSeries; diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts index e18568733..416e7fa13 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts @@ -12,14 +12,16 @@ import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/c import { ConfigValueOptions, ConfigThresholds, - ConfigChartStyles, + ConfigLineChartStyles, ConfigLegend, } 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 { DefaultChartStyles } 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'; const sharedConfigs = getPlotlySharedConfigs(); const VIS_CATEGORY = getPlotlyCategory(); -const { DefaultMode, Interpolation, LineWidth, FillOpacity } = DefaultChartStyles; +const { DefaultMode, Interpolation, LineWidth, FillOpacity, MarkerSize, LegendPosition, ShowLegend } = DefaultChartStyles; export const createLineTypeDefinition = (params: any = {}) => ({ name: 'line', @@ -78,7 +80,7 @@ export const createLineTypeDefinition = (params: any = {}) => ({ { name: 'Show', modeId: "show" }, { name: 'Hidden', modeId: "hidden" }, ], - defaultSelections: [{ name: 'Show', modeId: "show" }], + defaultSelections: [{ name: 'Show', modeId: ShowLegend }], }, }, { @@ -90,7 +92,7 @@ export const createLineTypeDefinition = (params: any = {}) => ({ { name: 'Right', modeId: 'v' }, { name: 'Bottom', modeId: 'h' }, ], - defaultSelections: [{ name: 'Right', modeId: 'v' }], + defaultSelections: [{ name: 'Right', modeId: LegendPosition }], }, }, ], @@ -98,13 +100,14 @@ export const createLineTypeDefinition = (params: any = {}) => ({ { id: 'chart_styles', name: 'Chart styles', - editor: ConfigChartStyles, + editor: ConfigLineChartStyles, mapTo: 'chartStyles', schemas: [ { name: 'Mode', - component: null, + component: ButtonGroupItem, mapTo: 'style', + eleType: 'buttons', props: { options: [ { name: 'Lines', modeId: 'lines' }, @@ -117,8 +120,9 @@ export const createLineTypeDefinition = (params: any = {}) => ({ }, { name: 'Interpolation', - component: null, + component: ButtonGroupItem, mapTo: 'interpolation', + eleType: 'buttons', props: { options: [ { name: 'Linear', modeId: 'linear' }, @@ -129,39 +133,29 @@ export const createLineTypeDefinition = (params: any = {}) => ({ defaultSelections: [{ name: 'Smooth', modeId: Interpolation }], }, }, - { - name: 'Bar alignment', - component: null, - mapTo: 'barAlignment', - props: { - options: [ - { name: 'Before', modeId: 'before' }, - { name: 'Center', modeId: 'center' }, - { name: 'After', modeId: 'after' }, - ], - defaultSelections: [{ name: 'Center', modeId: 'center' }], - }, - }, { name: 'Line width', - component: null, + component: SliderConfig, mapTo: 'lineWidth', defaultState: LineWidth, max: 10, + eleType: 'slider', }, { name: 'Fill Opacity', - component: null, + component: SliderConfig, mapTo: 'fillOpacity', defaultState: FillOpacity, max: 100, + eleType: 'slider', }, { name: 'Point Size', - component: null, + component: SliderConfig, mapTo: 'pointSize', - defaultState: 5, + defaultState: MarkerSize, max: 40, + eleType: 'slider', }, ], }, From 6e399dade6e78348a28a0f4670f9d0e4f9a32a37 Mon Sep 17 00:00:00 2001 From: rinku-kumar-psl Date: Thu, 23 Jun 2022 20:03:47 +0530 Subject: [PATCH 10/40] snapshot updated and code refactored Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/utils/utils.tsx --- .../__snapshots__/utils.test.tsx.snap | 436 ++++++++++++++++-- .../__snapshots__/config_panel.test.tsx.snap | 136 +++++- .../config_line_chart_styles.tsx | 4 +- .../notebook/repo/OpenSearchNotebookRepo.java | 218 +++++++++ .../__snapshots__/line.test.tsx.snap | 34 +- 5 files changed, 772 insertions(+), 56 deletions(-) create mode 100644 dashboards-observability/public/components/notebooks/docs/poc/zeppelin/zeppelin-plugins/notebookrepo/opensearch/src/main/java/org/apache/zeppelin/notebook/repo/OpenSearchNotebookRepo.java diff --git a/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap b/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap index 126ff2374..0ae9e38e8 100644 --- a/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap +++ b/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap @@ -1397,14 +1397,68 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, Object { "editor": [Function], - "id": "chart_options", - "mapTo": "chartOptions", - "name": "Chart options", + "id": "legend", + "mapTo": "legend", + "name": "Legend", "schemas": Array [ Object { "component": null, - "isSingleSelection": true, - "mapTo": "mode", + "mapTo": "showLegend", + "name": "Show Legend", + "props": Object { + "defaultSelections": Array [ + Object { + "modeId": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "modeId": "show", + "name": "Show", + }, + Object { + "modeId": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "position", + "name": "Position", + "props": Object { + "defaultSelections": Array [ + Object { + "modeId": "v", + "name": "Right", + }, + ], + "options": Array [ + Object { + "modeId": "v", + "name": "Right", + }, + Object { + "modeId": "h", + "name": "Bottom", + }, + ], + }, + }, + ], + }, + 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 [ @@ -1413,22 +1467,82 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "name": "Lines", }, ], - "dropdownList": Array [ - Object { - "modeId": "markers", - "name": "Markers", - }, + "options": Array [ Object { "modeId": "lines", "name": "Lines", }, + Object { + "modeId": "bar", + "name": "Bars", + }, + Object { + "modeId": "markers", + "name": "Points", + }, Object { "modeId": "lines+markers", - "name": "Lines + Markers", + "name": "Lines + Points", }, ], }, }, + Object { + "component": [Function], + "eleType": "buttons", + "mapTo": "interpolation", + "name": "Interpolation", + "props": Object { + "defaultSelections": Array [ + Object { + "modeId": "spline", + "name": "Smooth", + }, + ], + "options": Array [ + Object { + "modeId": "linear", + "name": "Linear", + }, + Object { + "modeId": "spline", + "name": "Smooth", + }, + Object { + "modeId": "hv", + "name": "Step before", + }, + Object { + "modeId": "vh", + "name": "Step after", + }, + ], + }, + }, + Object { + "component": [Function], + "defaultState": 2, + "eleType": "slider", + "mapTo": "lineWidth", + "max": 10, + "name": "Line width", + }, + Object { + "component": [Function], + "defaultState": 40, + "eleType": "slider", + "mapTo": "fillOpacity", + "max": 100, + "name": "Fill Opacity", + }, + Object { + "component": [Function], + "defaultState": 5, + "eleType": "slider", + "mapTo": "pointSize", + "max": 40, + "name": "Point Size", + }, ], }, Object { @@ -1630,14 +1744,68 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, Object { "editor": [Function], - "id": "chart_options", - "mapTo": "chartOptions", - "name": "Chart options", + "id": "legend", + "mapTo": "legend", + "name": "Legend", "schemas": Array [ Object { "component": null, - "isSingleSelection": true, - "mapTo": "mode", + "mapTo": "showLegend", + "name": "Show Legend", + "props": Object { + "defaultSelections": Array [ + Object { + "modeId": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "modeId": "show", + "name": "Show", + }, + Object { + "modeId": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "position", + "name": "Position", + "props": Object { + "defaultSelections": Array [ + Object { + "modeId": "v", + "name": "Right", + }, + ], + "options": Array [ + Object { + "modeId": "v", + "name": "Right", + }, + Object { + "modeId": "h", + "name": "Bottom", + }, + ], + }, + }, + ], + }, + 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 [ @@ -1646,22 +1814,82 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "name": "Lines", }, ], - "dropdownList": Array [ - Object { - "modeId": "markers", - "name": "Markers", - }, + "options": Array [ Object { "modeId": "lines", "name": "Lines", }, + Object { + "modeId": "bar", + "name": "Bars", + }, + Object { + "modeId": "markers", + "name": "Points", + }, Object { "modeId": "lines+markers", - "name": "Lines + Markers", + "name": "Lines + Points", + }, + ], + }, + }, + Object { + "component": [Function], + "eleType": "buttons", + "mapTo": "interpolation", + "name": "Interpolation", + "props": Object { + "defaultSelections": Array [ + Object { + "modeId": "spline", + "name": "Smooth", + }, + ], + "options": Array [ + Object { + "modeId": "linear", + "name": "Linear", + }, + Object { + "modeId": "spline", + "name": "Smooth", + }, + Object { + "modeId": "hv", + "name": "Step before", + }, + Object { + "modeId": "vh", + "name": "Step after", }, ], }, }, + Object { + "component": [Function], + "defaultState": 2, + "eleType": "slider", + "mapTo": "lineWidth", + "max": 10, + "name": "Line width", + }, + Object { + "component": [Function], + "defaultState": 40, + "eleType": "slider", + "mapTo": "fillOpacity", + "max": 100, + "name": "Fill Opacity", + }, + Object { + "component": [Function], + "defaultState": 5, + "eleType": "slider", + "mapTo": "pointSize", + "max": 40, + "name": "Point Size", + }, ], }, Object { @@ -1917,14 +2145,68 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, Object { "editor": [Function], - "id": "chart_options", - "mapTo": "chartOptions", - "name": "Chart options", + "id": "legend", + "mapTo": "legend", + "name": "Legend", "schemas": Array [ Object { "component": null, - "isSingleSelection": true, - "mapTo": "mode", + "mapTo": "showLegend", + "name": "Show Legend", + "props": Object { + "defaultSelections": Array [ + Object { + "modeId": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "modeId": "show", + "name": "Show", + }, + Object { + "modeId": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "position", + "name": "Position", + "props": Object { + "defaultSelections": Array [ + Object { + "modeId": "v", + "name": "Right", + }, + ], + "options": Array [ + Object { + "modeId": "v", + "name": "Right", + }, + Object { + "modeId": "h", + "name": "Bottom", + }, + ], + }, + }, + ], + }, + 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 [ @@ -1933,22 +2215,82 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "name": "Lines", }, ], - "dropdownList": Array [ - Object { - "modeId": "markers", - "name": "Markers", - }, + "options": Array [ Object { "modeId": "lines", "name": "Lines", }, + Object { + "modeId": "bar", + "name": "Bars", + }, + Object { + "modeId": "markers", + "name": "Points", + }, Object { "modeId": "lines+markers", - "name": "Lines + Markers", + "name": "Lines + Points", + }, + ], + }, + }, + Object { + "component": [Function], + "eleType": "buttons", + "mapTo": "interpolation", + "name": "Interpolation", + "props": Object { + "defaultSelections": Array [ + Object { + "modeId": "spline", + "name": "Smooth", + }, + ], + "options": Array [ + Object { + "modeId": "linear", + "name": "Linear", + }, + Object { + "modeId": "spline", + "name": "Smooth", + }, + Object { + "modeId": "hv", + "name": "Step before", + }, + Object { + "modeId": "vh", + "name": "Step after", }, ], }, }, + Object { + "component": [Function], + "defaultState": 2, + "eleType": "slider", + "mapTo": "lineWidth", + "max": 10, + "name": "Line width", + }, + Object { + "component": [Function], + "defaultState": 40, + "eleType": "slider", + "mapTo": "fillOpacity", + "max": 100, + "name": "Fill Opacity", + }, + Object { + "component": [Function], + "defaultState": 5, + "eleType": "slider", + "mapTo": "pointSize", + "max": 40, + "name": "Point Size", + }, ], }, Object { @@ -2060,9 +2402,19 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` data={ Array [ Object { - "mode": "line", + "fill": "tozeroy", + "fillcolor": "rgba(60,161,199,0.2)", + "line": Object { + "color": "#3CA1C7", + "shape": "spline", + "width": 2, + }, + "marker": Object { + "size": 5, + }, + "mode": "lines", "name": "avg(FlightDelayMin)", - "type": "line", + "type": "scatter", "x": Array [ "BeatsWest", "Logstash Airways", @@ -2139,9 +2491,19 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` data={ Array [ Object { - "mode": "line", + "fill": "tozeroy", + "fillcolor": "rgba(60,161,199,0.2)", + "line": Object { + "color": "#3CA1C7", + "shape": "spline", + "width": 2, + }, + "marker": Object { + "size": 5, + }, + "mode": "lines", "name": "avg(FlightDelayMin)", - "type": "line", + "type": "scatter", "x": Array [ "BeatsWest", "Logstash Airways", diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap index f09eccbdf..5be24f323 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap @@ -840,14 +840,68 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, Object { "editor": [Function], - "id": "chart_options", - "mapTo": "chartOptions", - "name": "Chart options", + "id": "legend", + "mapTo": "legend", + "name": "Legend", "schemas": Array [ Object { "component": null, - "isSingleSelection": true, - "mapTo": "mode", + "mapTo": "showLegend", + "name": "Show Legend", + "props": Object { + "defaultSelections": Array [ + Object { + "modeId": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "modeId": "show", + "name": "Show", + }, + Object { + "modeId": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "position", + "name": "Position", + "props": Object { + "defaultSelections": Array [ + Object { + "modeId": "v", + "name": "Right", + }, + ], + "options": Array [ + Object { + "modeId": "v", + "name": "Right", + }, + Object { + "modeId": "h", + "name": "Bottom", + }, + ], + }, + }, + ], + }, + 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 [ @@ -856,22 +910,82 @@ exports[`Config panel component Renders config panel with visualization data 1`] "name": "Lines", }, ], - "dropdownList": Array [ - Object { - "modeId": "markers", - "name": "Markers", - }, + "options": Array [ Object { "modeId": "lines", "name": "Lines", }, + Object { + "modeId": "bar", + "name": "Bars", + }, + Object { + "modeId": "markers", + "name": "Points", + }, Object { "modeId": "lines+markers", - "name": "Lines + Markers", + "name": "Lines + Points", + }, + ], + }, + }, + Object { + "component": [Function], + "eleType": "buttons", + "mapTo": "interpolation", + "name": "Interpolation", + "props": Object { + "defaultSelections": Array [ + Object { + "modeId": "spline", + "name": "Smooth", + }, + ], + "options": Array [ + Object { + "modeId": "linear", + "name": "Linear", + }, + Object { + "modeId": "spline", + "name": "Smooth", + }, + Object { + "modeId": "hv", + "name": "Step before", + }, + Object { + "modeId": "vh", + "name": "Step after", }, ], }, }, + Object { + "component": [Function], + "defaultState": 2, + "eleType": "slider", + "mapTo": "lineWidth", + "max": 10, + "name": "Line width", + }, + Object { + "component": [Function], + "defaultState": 40, + "eleType": "slider", + "mapTo": "fillOpacity", + "max": 100, + "name": "Fill Opacity", + }, + Object { + "component": [Function], + "defaultState": 5, + "eleType": "slider", + "mapTo": "pointSize", + "max": 40, + "name": "Point Size", + }, ], }, Object { diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx index a42f6daf8..e0db4845b 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx @@ -6,7 +6,7 @@ import React, { useMemo, useCallback } from 'react'; import { EuiAccordion, EuiSpacer } from '@elastic/eui'; import { ButtonGroupItem } from './config_button_group'; -import { IConfigPanelOptionSection } from 'common/types/explorer'; +import { IConfigPanelOptionSection } from '../../../../../../../../common/types/explorer'; export const ConfigLineChartStyles = ({ visualizations, @@ -73,7 +73,7 @@ export const ConfigLineChartStyles = ({ ) }) - , [schemas, vizState, handleConfigurationChange, currentSchemas]); + , [currentSchemas, vizState, handleConfigurationChange]); return ( list(AuthenticationInfo subject) throws IOException { + Map 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 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 getSettings(AuthenticationInfo subject) { + LOGGER.warn("Method not implemented"); + return Collections.emptyList(); + } + + @Override + public void updateSettings(Map settings, AuthenticationInfo subject) { + LOGGER.warn("Method not implemented"); + } + +} diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap index 8a061dfd6..30ff2a1f9 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap @@ -494,9 +494,19 @@ exports[`Line component Renders line component 1`] = ` data={ Array [ Object { - "mode": "line", + "fill": "tozeroy", + "fillcolor": "rgba(60,161,199,0.2)", + "line": Object { + "color": "#3CA1C7", + "shape": "spline", + "width": 2, + }, + "marker": Object { + "size": 5, + }, + "mode": "lines", "name": "count()", - "type": "line", + "type": "scatter", "x": Array [ "error", "info", @@ -522,6 +532,9 @@ exports[`Line component Renders line component 1`] = ` "#8C55A3", ], "height": 220, + "legend": Object { + "orientation": "v", + }, "margin": Object { "b": 15, "l": 60, @@ -543,9 +556,19 @@ exports[`Line component Renders line component 1`] = ` data={ Array [ Object { - "mode": "line", + "fill": "tozeroy", + "fillcolor": "rgba(60,161,199,0.2)", + "line": Object { + "color": "#3CA1C7", + "shape": "spline", + "width": 2, + }, + "marker": Object { + "size": 5, + }, + "mode": "lines", "name": "count()", - "type": "line", + "type": "scatter", "x": Array [ "error", "info", @@ -577,8 +600,7 @@ exports[`Line component Renders line component 1`] = ` "height": 220, "hovermode": "closest", "legend": Object { - "orientation": "h", - "traceorder": "normal", + "orientation": "v", }, "margin": Object { "b": 15, From 8235008ca18340733a4092fb964be5bfceec98dc Mon Sep 17 00:00:00 2001 From: rinku-kumar-psl Date: Fri, 24 Jun 2022 11:12:49 +0530 Subject: [PATCH 11/40] type added to new component Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx --- .../apache/zeppelin/notebook/repo/OpenSearchNotebookRepo.java | 1 + .../public/components/visualizations/charts/lines/line.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/dashboards-observability/public/components/notebooks/docs/poc/zeppelin/zeppelin-plugins/notebookrepo/opensearch/src/main/java/org/apache/zeppelin/notebook/repo/OpenSearchNotebookRepo.java b/dashboards-observability/public/components/notebooks/docs/poc/zeppelin/zeppelin-plugins/notebookrepo/opensearch/src/main/java/org/apache/zeppelin/notebook/repo/OpenSearchNotebookRepo.java index bc4c44aef..4405c3a6f 100644 --- a/dashboards-observability/public/components/notebooks/docs/poc/zeppelin/zeppelin-plugins/notebookrepo/opensearch/src/main/java/org/apache/zeppelin/notebook/repo/OpenSearchNotebookRepo.java +++ b/dashboards-observability/public/components/notebooks/docs/poc/zeppelin/zeppelin-plugins/notebookrepo/opensearch/src/main/java/org/apache/zeppelin/notebook/repo/OpenSearchNotebookRepo.java @@ -216,3 +216,4 @@ public void updateSettings(Map settings, AuthenticationInfo subj } } + diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx index 0ba385b4f..df9b27835 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -32,7 +32,7 @@ export const Line = ({ visualizations, layout, config }: any) => { const mode = dataConfig?.chartStyles?.style || DefaultMode; const lineShape = dataConfig?.chartStyles?.interpolation || Interpolation; const lineWidth = dataConfig?.chartStyles?.lineWidth || LineWidth; - const showLegend = dataConfig.legend && dataConfig.legend?.showLegend !== ShowLegend ? false : true; + const showLegend = dataConfig?.legend?.showLegend && dataConfig.legend.showLegend !== ShowLegend ? false : true; const legendPosition = dataConfig?.legend?.position || LegendPosition; const markerSize = dataConfig?.chartStyles?.pointSize || MarkerSize; const fillOpacity = dataConfig?.chartStyles?.fillOpacity !== undefined ? dataConfig?.chartStyles?.fillOpacity / 200 : FillOpacity / 200; From 68fd32af1462553241f41b26b3e1a2bbb003d6fb Mon Sep 17 00:00:00 2001 From: rinku-kumar-psl Date: Fri, 24 Jun 2022 11:16:21 +0530 Subject: [PATCH 12/40] review comments addressed Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/utils/utils.tsx # Conflicts: # dashboards-observability/common/constants/shared.ts --- .../config_controls/config_line_chart_styles.tsx | 11 ++++++++--- .../public/components/event_analytics/utils/utils.tsx | 4 ++-- .../components/visualizations/charts/lines/line.tsx | 6 +++--- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx index e0db4845b..faaffc824 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx @@ -35,11 +35,16 @@ export const ConfigLineChartStyles = ({ const currentSchemas = useMemo(() => { if (!vizState?.style || vizState?.style === "lines") { return schemas.filter((schema: IConfigPanelOptionSection) => schema.mapTo !== 'pointSize'); - } else if (vizState?.style === "bar") { + } + if (vizState?.style === "bar") { return schemas.filter((schema: IConfigPanelOptionSection) => !["interpolation", "pointSize"].includes(schema.mapTo)); - } else if (vizState?.style === "markers") { + } + if (vizState?.style === "markers") { return schemas.filter((schema: IConfigPanelOptionSection) => ["style", "pointSize"].includes(schema.mapTo)); - } else return schemas.filter((schema: IConfigPanelOptionSection) => schema.mapTo !== 'interpolation'); + } + if (vizState?.style === 'lines+markers') { + return schemas.filter((schema: IConfigPanelOptionSection) => schema.mapTo !== 'interpolation'); + } }, [vizState]); const dimensions = useMemo(() => diff --git a/dashboards-observability/public/components/event_analytics/utils/utils.tsx b/dashboards-observability/public/components/event_analytics/utils/utils.tsx index 35272fe5a..dd16885aa 100644 --- a/dashboards-observability/public/components/event_analytics/utils/utils.tsx +++ b/dashboards-observability/public/components/event_analytics/utils/utils.tsx @@ -120,8 +120,8 @@ export const populateDataGrid = ( )} {explorerFields?.queriedFields && - explorerFields?.queriedFields?.length > 0 && - explorerFields.selectedFields?.length === 0 ? null : ( + explorerFields?.queriedFields?.length > 0 && + explorerFields.selectedFields?.length === 0 ? null : ( {header2}{body2} diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx index df9b27835..27eb0e044 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -8,7 +8,7 @@ import { take, isEmpty, last } from 'lodash'; import { Plt } from '../../plotly/plot'; 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 { DefaultChartStyles, PLOTLY_COLOR } from '../../../../../common/constants/shared'; +import { DefaultChartStyles, FILLOPACITY_DIV_FACTOR, PLOTLY_COLOR } from '../../../../../common/constants/shared'; import { hexToRgba } from '../../../../components/event_analytics/utils/utils'; export const Line = ({ visualizations, layout, config }: any) => { @@ -35,7 +35,7 @@ export const Line = ({ visualizations, layout, config }: any) => { const showLegend = dataConfig?.legend?.showLegend && dataConfig.legend.showLegend !== ShowLegend ? false : true; const legendPosition = dataConfig?.legend?.position || LegendPosition; const markerSize = dataConfig?.chartStyles?.pointSize || MarkerSize; - const fillOpacity = dataConfig?.chartStyles?.fillOpacity !== undefined ? dataConfig?.chartStyles?.fillOpacity / 200 : FillOpacity / 200; + const fillOpacity = dataConfig?.chartStyles?.fillOpacity !== undefined ? dataConfig?.chartStyles?.fillOpacity / FILLOPACITY_DIV_FACTOR : FillOpacity / FILLOPACITY_DIV_FACTOR; let valueSeries; if (!isEmpty(xaxis) && !isEmpty(yaxis)) { @@ -66,7 +66,7 @@ export const Line = ({ visualizations, layout, config }: any) => { type: isBarMode ? 'bar' : 'scatter', name: field.name, mode, - ...!['bar', 'markers'].includes(mode) && fillProperty, + ...!['bar', 'markers'].includes(mode) && fillProperty, line: { shape: lineShape, width: lineWidth, From f2d3d32b7cf4f512728535e28678e94f672fc018 Mon Sep 17 00:00:00 2001 From: rinku-kumar-psl Date: Fri, 24 Jun 2022 11:29:48 +0530 Subject: [PATCH 13/40] cypress test case added and resolve button label wraping issue Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/.cypress/integration/1_event_analytics.spec.js # dashboards-observability/.cypress/utils/event_constants.js # Conflicts: # dashboards-observability/.cypress/integration/1_event_analytics.spec.js # Conflicts: # dashboards-observability/.cypress/integration/1_event_analytics.spec.js --- .../integration/1_event_analytics.spec.js | 223 ++++++++++++++++-- .../__snapshots__/utils.test.tsx.snap | 132 ++++++----- .../__snapshots__/config_panel.test.tsx.snap | 44 ++-- .../config_line_chart_styles.tsx | 6 +- .../visualizations/charts/lines/line_type.ts | 44 ++-- 5 files changed, 333 insertions(+), 116 deletions(-) diff --git a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js index e237252c3..e0c1e4e43 100644 --- a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js +++ b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js @@ -814,40 +814,86 @@ describe('Renders Tree Map', () => { }) }); -describe('Render Pie chart for Legend and single color contrast change', () => { + +describe('Render line chart for value options ', () => { beforeEach(() => { landOnEventVisualizations(); + 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="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Line').type('{enter}') }); - it('Render Pie chart and verify legends for Position Right and Bottom', () => { - renderPieChart(); - 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'); + + it('Render line chart and add value Options ', () => { + cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with value adding Parameter'); + cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(1).click(); + cy.get('.euiComboBoxOption__content').eq(0).click(); + cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(2).click(); + cy.get('.euiComboBoxOption__content').eq(0).click(); cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); + cy.get('.nsewdrag.drag.cursor-pointer').should('be.visible') }); +}); - it('Render Pie chart and verify legends for Show and Hidden', () => { - renderPieChart(); +describe('Render line chart for Legend ', () => { + beforeEach(() => { + cy.wait(2000); + landOnEventVisualizations(); + 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('Line').click(); + }); + + it('Render line 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-test-subj="visualizeEditorRenderButton"]').click({ force: true }); + cy.wait(delay); + cy.get('.nsewdrag.drag.cursor-pointer').should('be.visible') + .and(chart => { + expect(chart.height()).to.be.greaterThan(200) + }) }); - it('Renders Pie chart with single color', () => { - renderPieChart(); - cy.get('.euiIEFlexWrapFix').eq(3).contains('Chart Styles').should('exist'); - cy.get('[data-test-subj="comboBoxInput"]').eq(3).click(); - cy.get('[name="Pie"]').click(); - cy.get('.euiSuperSelectControl').click(); - cy.get('.euiContextMenuItem.euiSuperSelect__item.euiSuperSelect__item--hasDividers').eq(1).click(); - cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .euiButton__text').eq(2).click(); - cy.wait(delay); + it('Render line 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 }); }); }); +describe('Render Pie chart for Legend and single color contrast change', () => { + beforeEach(() => { + landOnEventVisualizations(); + }); + it('Render Pie chart and verify legends for Position Right and Bottom', () => { + renderPieChart(); + + it('Render Pie chart and verify legends for Show and Hidden', () => { + renderPieChart(); + 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-test-subj="visualizeEditorRenderButton"]').click({ force: true }); + }); + + it('Renders Pie chart with single color', () => { + renderPieChart(); + cy.get('.euiIEFlexWrapFix').eq(3).contains('Chart Styles').should('exist'); + cy.get('[data-test-subj="comboBoxInput"]').eq(3).click(); + cy.get('[name="Pie"]').click(); + cy.get('.euiSuperSelectControl').click(); + cy.get('.euiContextMenuItem.euiSuperSelect__item.euiSuperSelect__item--hasDividers').eq(1).click(); + cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .euiButton__text').eq(2).click(); + cy.wait(delay); + }); + }); +}) describe('Renders heatmap chart for Chart Style', () => { beforeEach(() => { landOnEventVisualizations(); @@ -910,6 +956,83 @@ describe('Renders heatmap chart for Chart Style', () => { cy.get('stop[stop-color="rgb(255, 255, 214)"]').should('exist'); cy.get('stop[stop-color="rgb(214, 191, 87)"]').should('exist'); }); +}) + + +describe('Render line chart for Chart Styles ', () => { + beforeEach(() => { + landOnEventVisualizations(); + 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="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Line').type('{enter}') + }); + + it('Render line chart and Verify Chart Style of Lines Mode with Smooth Interpolation ', () => { + cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with Line Mode and Smooth Interpolation'); + cy.get('[data-text="Lines"]').should('have.text', 'Lines'); + cy.get('[data-text="Lines"] [data-test-subj="lines"]').should('have.attr', 'checked'); + cy.get('[data-text="Smooth"]').should('have.text', 'Smooth'); + cy.get('[data-text="Smooth"] [data-test-subj="spline"]').should('have.attr', 'checked'); + cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); + }); + + it('Render line chart and Verify Chart Style of Lines Mode with Smooth Interpolation with higher Line width and Fill Opacity ', () => { + cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with Line Mode and Smooth Interpolation'); + cy.get('[data-text="Lines"]').should('have.text', 'Lines'); + cy.get('[data-text="Lines"] [data-test-subj="lines"]').should('have.attr', 'checked'); + cy.get('[data-text="Smooth"]').should('have.text', 'Smooth'); + cy.get('[data-text="Smooth"] [data-test-subj="spline"]').should('have.attr', 'checked'); + cy.get('input[type="range"]').eq(0) + .then($el => $el[0].stepUp(4)) + .trigger('change') + cy.get('.euiRangeSlider').eq(0).should('have.value', 6) + cy.get('input[type="range"]').eq(1) + .then($el => $el[0].stepUp(40)) + .trigger('change') + cy.get('.euiRangeSlider').eq(1).should('have.value', 80) + cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); + }); + + it('Render line chart and Verify Chart Style of Lines Mode with Linear Interpolation ', () => { + cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with Line Mode and Linear Interpolation'); + cy.get('[data-text="Lines"]').should('have.text', 'Lines'); + cy.get('[data-text="Lines"] [data-test-subj="lines"]').should('have.attr', 'checked'); + cy.get('[data-text="Linear"]').should('have.text', 'Linear').click(); + cy.get('[data-text="Linear"]').should('have.text', 'Linear'); + cy.get('[data-text="Linear"] [data-test-subj="linear"]').should('not.have.attr', 'checked'); + cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); + }); + + it('Render line chart and Verify Chart Style of Lines Mode with Step before Interpolation ', () => { + cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with Line Mode and Step before Interpolation'); + cy.get('[data-text="Lines"]').should('have.text', 'Lines'); + cy.get('[data-text="Lines"] [data-test-subj="lines"]').should('have.attr', 'checked'); + cy.get('[data-text="Step before"]').should('have.text', 'Step before').click(); + cy.get('[data-text="Step before"] [data-test-subj="Step before"]').should('not.have.attr', 'checked'); + cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); + }); + + it('Render line chart and Verify Chart Style of Lines Mode with Step after Interpolation ', () => { + cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with Line Mode and Step after Interpolation'); + cy.get('[data-text="Lines"]').should('have.text', 'Lines'); + cy.get('[data-text="Lines"] [data-test-subj="lines"]').should('have.attr', 'checked'); + cy.get('[data-text="Step after"]').should('have.text', 'Step after').click(); + cy.get('[data-text="Step after"] [data-test-subj="Step after"]').should('not.have.attr', 'checked'); + cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); + }); + + it('Render line chart and Verify Chart Style of Bars Mode with Center bar alignment ', () => { + cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Bars'); + cy.get('[data-text="Bars"]').should('have.text', 'Bars').click(); + cy.get('[data-text="Center"] [data-test-subj="center"]').should('have.attr', 'checked'); + cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); + }); }); describe('Renders Tree Map for Parent Fields ', () => { @@ -969,4 +1092,68 @@ describe('Renders Tree Map for Parent Fields Multicolor Option', () => { cy.get('.euiFormHelpText.euiFormRow__text').contains('Parent 1 field').should('exist'); cy.get('.euiFormHelpText.euiFormRow__text').contains('Parent 2 field').should('exist'); }); + + it('Render line chart and Verify Chart Style of Bars Mode with Before bar alignment ', () => { + cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Bars'); + cy.get('[data-text="Bars"]').should('have.text', 'Bars').click(); + cy.get('[data-text="Before"] [data-test-subj="before"]').should('not.have.attr', 'checked'); + cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); + }); + + it('Render line chart and Verify Chart Style of Bars Mode with After bar alignment ', () => { + cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Bars'); + cy.get('[data-text="Bars"]').should('have.text', 'Bars').click(); + cy.get('[data-text="After"] [data-test-subj="after"]').should('not.have.attr', 'checked'); + cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); + }); + + it('Render line chart and Verify Chart Style of Points Mode', () => { + cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Points'); + cy.get('[data-text="Points"]').should('have.text', 'Points').click(); + cy.get('[data-text="Points"] [data-test-subj="markers"]').should('not.have.attr', 'checked'); + cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); + }); + + it('Render line chart and Verify Chart Style of Points Mode with larger Point size', () => { + cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Points'); + cy.get('[data-text="Points"]').should('have.text', 'Points').click(); + cy.get('[data-text="Points"] [data-test-subj="markers"]').should('not.have.attr', 'checked'); + cy.get('input[type="range"]') + .then($el => $el[0].stepUp(30)) + .trigger('change') + cy.get('.euiRangeSlider').should('have.value', 35) + cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); + }); + + it('Render line chart and Verify Chart Style of Lines+Points Mode', () => { + cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Lines and Points'); + cy.get('[data-text="Lines + Points"]').should('have.text', 'Lines + Points').click(); + cy.get('[data-text="Lines + Points"] [data-test-subj="lines+markers"]').should('not.have.attr', 'checked'); + cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); + }); + + it('Render line chart and Verify Chart Style of Lines+Points Mode with Line Width, Fill Opacity and Point Size', () => { + cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Lines and Points'); + cy.get('[data-text="Lines + Points"]').should('have.text', 'Lines + Points').click(); + cy.get('[data-text="Lines + Points"] [data-test-subj="lines+markers"]').should('not.have.attr', 'checked'); + cy.get('input[type="range"]').eq(0) + .then($el => $el[0].stepUp(4)) + .trigger('change') + cy.get('.euiRangeSlider').eq(0).should('have.value', 6) + cy.get('input[type="range"]').eq(1) + .then($el => $el[0].stepUp(40)) + .trigger('change') + cy.get('.euiRangeSlider').eq(1).should('have.value', 80) + cy.get('input[type="range"]').eq(2) + .then($el => $el[0].stepUp(15)) + .trigger('change') + cy.get('.euiRangeSlider').eq(2).should('have.value', 20) + cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); + }); }); diff --git a/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap b/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap index 0ae9e38e8..ee155787f 100644 --- a/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap +++ b/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap @@ -1408,17 +1408,17 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "props": Object { "defaultSelections": Array [ Object { - "modeId": "show", + "id": "show", "name": "Show", }, ], "options": Array [ Object { - "modeId": "show", + "id": "show", "name": "Show", }, Object { - "modeId": "hidden", + "id": "hidden", "name": "Hidden", }, ], @@ -1431,17 +1431,17 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "props": Object { "defaultSelections": Array [ Object { - "modeId": "v", + "id": "v", "name": "Right", }, ], "options": Array [ Object { - "modeId": "v", + "id": "v", "name": "Right", }, Object { - "modeId": "h", + "id": "h", "name": "Bottom", }, ], @@ -1463,25 +1463,25 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "props": Object { "defaultSelections": Array [ Object { - "modeId": "lines", + "id": "lines", "name": "Lines", }, ], "options": Array [ Object { - "modeId": "lines", + "id": "lines", "name": "Lines", }, Object { - "modeId": "bar", + "id": "bar", "name": "Bars", }, Object { - "modeId": "markers", + "id": "markers", "name": "Points", }, Object { - "modeId": "lines+markers", + "id": "lines+markers", "name": "Lines + Points", }, ], @@ -1495,25 +1495,25 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "props": Object { "defaultSelections": Array [ Object { - "modeId": "spline", + "id": "spline", "name": "Smooth", }, ], "options": Array [ Object { - "modeId": "linear", + "id": "linear", "name": "Linear", }, Object { - "modeId": "spline", + "id": "spline", "name": "Smooth", }, Object { - "modeId": "hv", + "id": "hv", "name": "Step before", }, Object { - "modeId": "vh", + "id": "vh", "name": "Step after", }, ], @@ -1524,24 +1524,30 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "defaultState": 2, "eleType": "slider", "mapTo": "lineWidth", - "max": 10, "name": "Line width", + "props": Object { + "max": 10, + }, }, Object { "component": [Function], "defaultState": 40, "eleType": "slider", "mapTo": "fillOpacity", - "max": 100, "name": "Fill Opacity", + "props": Object { + "max": 100, + }, }, Object { "component": [Function], "defaultState": 5, "eleType": "slider", "mapTo": "pointSize", - "max": 40, "name": "Point Size", + "props": Object { + "max": 40, + }, }, ], }, @@ -1755,17 +1761,17 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "props": Object { "defaultSelections": Array [ Object { - "modeId": "show", + "id": "show", "name": "Show", }, ], "options": Array [ Object { - "modeId": "show", + "id": "show", "name": "Show", }, Object { - "modeId": "hidden", + "id": "hidden", "name": "Hidden", }, ], @@ -1778,17 +1784,17 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "props": Object { "defaultSelections": Array [ Object { - "modeId": "v", + "id": "v", "name": "Right", }, ], "options": Array [ Object { - "modeId": "v", + "id": "v", "name": "Right", }, Object { - "modeId": "h", + "id": "h", "name": "Bottom", }, ], @@ -1810,25 +1816,25 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "props": Object { "defaultSelections": Array [ Object { - "modeId": "lines", + "id": "lines", "name": "Lines", }, ], "options": Array [ Object { - "modeId": "lines", + "id": "lines", "name": "Lines", }, Object { - "modeId": "bar", + "id": "bar", "name": "Bars", }, Object { - "modeId": "markers", + "id": "markers", "name": "Points", }, Object { - "modeId": "lines+markers", + "id": "lines+markers", "name": "Lines + Points", }, ], @@ -1842,25 +1848,25 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "props": Object { "defaultSelections": Array [ Object { - "modeId": "spline", + "id": "spline", "name": "Smooth", }, ], "options": Array [ Object { - "modeId": "linear", + "id": "linear", "name": "Linear", }, Object { - "modeId": "spline", + "id": "spline", "name": "Smooth", }, Object { - "modeId": "hv", + "id": "hv", "name": "Step before", }, Object { - "modeId": "vh", + "id": "vh", "name": "Step after", }, ], @@ -1871,24 +1877,30 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "defaultState": 2, "eleType": "slider", "mapTo": "lineWidth", - "max": 10, "name": "Line width", + "props": Object { + "max": 10, + }, }, Object { "component": [Function], "defaultState": 40, "eleType": "slider", "mapTo": "fillOpacity", - "max": 100, "name": "Fill Opacity", + "props": Object { + "max": 100, + }, }, Object { "component": [Function], "defaultState": 5, "eleType": "slider", "mapTo": "pointSize", - "max": 40, "name": "Point Size", + "props": Object { + "max": 40, + }, }, ], }, @@ -2156,17 +2168,17 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "props": Object { "defaultSelections": Array [ Object { - "modeId": "show", + "id": "show", "name": "Show", }, ], "options": Array [ Object { - "modeId": "show", + "id": "show", "name": "Show", }, Object { - "modeId": "hidden", + "id": "hidden", "name": "Hidden", }, ], @@ -2179,17 +2191,17 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "props": Object { "defaultSelections": Array [ Object { - "modeId": "v", + "id": "v", "name": "Right", }, ], "options": Array [ Object { - "modeId": "v", + "id": "v", "name": "Right", }, Object { - "modeId": "h", + "id": "h", "name": "Bottom", }, ], @@ -2211,25 +2223,25 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "props": Object { "defaultSelections": Array [ Object { - "modeId": "lines", + "id": "lines", "name": "Lines", }, ], "options": Array [ Object { - "modeId": "lines", + "id": "lines", "name": "Lines", }, Object { - "modeId": "bar", + "id": "bar", "name": "Bars", }, Object { - "modeId": "markers", + "id": "markers", "name": "Points", }, Object { - "modeId": "lines+markers", + "id": "lines+markers", "name": "Lines + Points", }, ], @@ -2243,25 +2255,25 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "props": Object { "defaultSelections": Array [ Object { - "modeId": "spline", + "id": "spline", "name": "Smooth", }, ], "options": Array [ Object { - "modeId": "linear", + "id": "linear", "name": "Linear", }, Object { - "modeId": "spline", + "id": "spline", "name": "Smooth", }, Object { - "modeId": "hv", + "id": "hv", "name": "Step before", }, Object { - "modeId": "vh", + "id": "vh", "name": "Step after", }, ], @@ -2272,24 +2284,30 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "defaultState": 2, "eleType": "slider", "mapTo": "lineWidth", - "max": 10, "name": "Line width", + "props": Object { + "max": 10, + }, }, Object { "component": [Function], "defaultState": 40, "eleType": "slider", "mapTo": "fillOpacity", - "max": 100, "name": "Fill Opacity", + "props": Object { + "max": 100, + }, }, Object { "component": [Function], "defaultState": 5, "eleType": "slider", "mapTo": "pointSize", - "max": 40, "name": "Point Size", + "props": Object { + "max": 40, + }, }, ], }, diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap index 5be24f323..5fcf8e9e4 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap @@ -851,17 +851,17 @@ exports[`Config panel component Renders config panel with visualization data 1`] "props": Object { "defaultSelections": Array [ Object { - "modeId": "show", + "id": "show", "name": "Show", }, ], "options": Array [ Object { - "modeId": "show", + "id": "show", "name": "Show", }, Object { - "modeId": "hidden", + "id": "hidden", "name": "Hidden", }, ], @@ -874,17 +874,17 @@ exports[`Config panel component Renders config panel with visualization data 1`] "props": Object { "defaultSelections": Array [ Object { - "modeId": "v", + "id": "v", "name": "Right", }, ], "options": Array [ Object { - "modeId": "v", + "id": "v", "name": "Right", }, Object { - "modeId": "h", + "id": "h", "name": "Bottom", }, ], @@ -906,25 +906,25 @@ exports[`Config panel component Renders config panel with visualization data 1`] "props": Object { "defaultSelections": Array [ Object { - "modeId": "lines", + "id": "lines", "name": "Lines", }, ], "options": Array [ Object { - "modeId": "lines", + "id": "lines", "name": "Lines", }, Object { - "modeId": "bar", + "id": "bar", "name": "Bars", }, Object { - "modeId": "markers", + "id": "markers", "name": "Points", }, Object { - "modeId": "lines+markers", + "id": "lines+markers", "name": "Lines + Points", }, ], @@ -938,25 +938,25 @@ exports[`Config panel component Renders config panel with visualization data 1`] "props": Object { "defaultSelections": Array [ Object { - "modeId": "spline", + "id": "spline", "name": "Smooth", }, ], "options": Array [ Object { - "modeId": "linear", + "id": "linear", "name": "Linear", }, Object { - "modeId": "spline", + "id": "spline", "name": "Smooth", }, Object { - "modeId": "hv", + "id": "hv", "name": "Step before", }, Object { - "modeId": "vh", + "id": "vh", "name": "Step after", }, ], @@ -967,24 +967,30 @@ exports[`Config panel component Renders config panel with visualization data 1`] "defaultState": 2, "eleType": "slider", "mapTo": "lineWidth", - "max": 10, "name": "Line width", + "props": Object { + "max": 10, + }, }, Object { "component": [Function], "defaultState": 40, "eleType": "slider", "mapTo": "fillOpacity", - "max": 100, "name": "Fill Opacity", + "props": Object { + "max": 100, + }, }, Object { "component": [Function], "defaultState": 5, "eleType": "slider", "mapTo": "pointSize", - "max": 40, "name": "Point Size", + "props": Object { + "max": 40, + }, }, ], }, diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx index faaffc824..eac9410ee 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx @@ -55,15 +55,15 @@ export const ConfigLineChartStyles = ({ params = { title: schema.name, legend: schema.name, - groupOptions: schema?.props?.options.map((btn: { name: string, modeId: string }) => ({ id: btn.modeId, label: btn.name })), - idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.modeId, + 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 if (schema.eleType === 'slider') { params = { - maxRange: schema.max, + maxRange: schema?.props?.max, title: schema.name, currentRange: vizState[schema.mapTo] || schema?.defaultState, handleSliderChange: handleConfigurationChange(schema.mapTo), diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts index 416e7fa13..1f1f86779 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts @@ -77,10 +77,10 @@ export const createLineTypeDefinition = (params: any = {}) => ({ component: null, props: { options: [ - { name: 'Show', modeId: "show" }, - { name: 'Hidden', modeId: "hidden" }, + { name: 'Show', id: "show" }, + { name: 'Hidden', id: "hidden" }, ], - defaultSelections: [{ name: 'Show', modeId: ShowLegend }], + defaultSelections: [{ name: 'Show', id: ShowLegend }], }, }, { @@ -89,10 +89,10 @@ export const createLineTypeDefinition = (params: any = {}) => ({ component: null, props: { options: [ - { name: 'Right', modeId: 'v' }, - { name: 'Bottom', modeId: 'h' }, + { name: 'Right', id: 'v' }, + { name: 'Bottom', id: 'h' }, ], - defaultSelections: [{ name: 'Right', modeId: LegendPosition }], + defaultSelections: [{ name: 'Right', id: LegendPosition }], }, }, ], @@ -110,12 +110,12 @@ export const createLineTypeDefinition = (params: any = {}) => ({ eleType: 'buttons', props: { options: [ - { name: 'Lines', modeId: 'lines' }, - { name: 'Bars', modeId: 'bar' }, - { name: 'Points', modeId: 'markers' }, - { name: 'Lines + Points', modeId: 'lines+markers' } + { name: 'Lines', id: 'lines' }, + { name: 'Bars', id: 'bar' }, + { name: 'Points', id: 'markers' }, + { name: 'Lines + Points', id: 'lines+markers' } ], - defaultSelections: [{ name: 'Lines', modeId: DefaultMode }], + defaultSelections: [{ name: 'Lines', id: DefaultMode }], }, }, { @@ -125,12 +125,12 @@ export const createLineTypeDefinition = (params: any = {}) => ({ eleType: 'buttons', props: { options: [ - { name: 'Linear', modeId: 'linear' }, - { name: 'Smooth', modeId: 'spline' }, - { name: 'Step before', modeId: 'hv' }, - { name: 'Step after', modeId: 'vh' }, + { name: 'Linear', id: 'linear' }, + { name: 'Smooth', id: 'spline' }, + { name: 'Step before', id: 'hv' }, + { name: 'Step after', id: 'vh' }, ], - defaultSelections: [{ name: 'Smooth', modeId: Interpolation }], + defaultSelections: [{ name: 'Smooth', id: Interpolation }], }, }, { @@ -138,24 +138,30 @@ export const createLineTypeDefinition = (params: any = {}) => ({ component: SliderConfig, mapTo: 'lineWidth', defaultState: LineWidth, - max: 10, eleType: 'slider', + props:{ + max: 10, + } }, { name: 'Fill Opacity', component: SliderConfig, mapTo: 'fillOpacity', defaultState: FillOpacity, - max: 100, eleType: 'slider', + props:{ + max: 100, + } }, { name: 'Point Size', component: SliderConfig, mapTo: 'pointSize', defaultState: MarkerSize, - max: 40, eleType: 'slider', + props:{ + max: 40, + } }, ], }, From a76ac361194fe95a9f1481d8723485966ec68dd1 Mon Sep 17 00:00:00 2001 From: rinku-kumar-psl Date: Fri, 17 Jun 2022 14:01:09 +0530 Subject: [PATCH 14/40] multi matrices changes for Line Signed-off-by: rinku-kumar-psl --- .../visualizations/charts/lines/line.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx index 27eb0e044..9d443a8b7 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -44,6 +44,7 @@ export const Line = ({ visualizations, layout, config }: any) => { valueSeries = defaultAxes.yaxis || take(fields, lastIndex > 0 ? lastIndex : 1); } + let multiMetrics = {}; const [calculatedLayout, lineValues] = useMemo(() => { const isBarMode = mode === 'bar'; @@ -60,6 +61,22 @@ export const Line = ({ visualizations, layout, config }: any) => { fill: 'tozeroy', fillcolor: fillColor, }; + const multiYaxis = { yaxis: `y${index + 1}` }; + if (index >= 1) { + multiMetrics = { + ...multiMetrics, + [`yaxis${index + 1}`]: { + title: `yaxis${index + 1} title`, + titlefont: { color: PLOTLY_COLOR[index] }, + tickfont: { color: PLOTLY_COLOR[index] }, + overlaying: 'y', + side: 'right', + anchor: 'free', + position: 1 - 0.1 * (index - 1), + } + } + } + return { x: data[!isEmpty(xaxis) ? xaxis[0]?.label : fields[lastIndex].name], y: data[field.name], @@ -76,6 +93,7 @@ export const Line = ({ visualizations, layout, config }: any) => { size: markerSize, ...isBarMode && barMarker, }, + ...(index >= 1 && multiYaxis) }; }); @@ -92,6 +110,7 @@ export const Line = ({ visualizations, layout, config }: any) => { }, showlegend: showLegend, ...isBarMode && layoutForBarMode, + ...multiMetrics && multiMetrics, }; if (dataConfig.thresholds || availabilityConfig.level) { From 23373a16ed955f4e8a533aa35d9ca0d53c71f8fd Mon Sep 17 00:00:00 2001 From: rinku-kumar-psl Date: Fri, 24 Jun 2022 11:45:16 +0530 Subject: [PATCH 15/40] dimensions and metrics UI changes for time-series Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/common/constants/explorer.ts # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx # dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx --- .../explorer/visualizations/index.tsx | 2 +- .../visualizations/charts/lines/line.tsx | 7 +++++-- .../visualizations/charts/lines/line_type.ts | 20 ------------------- 3 files changed, 6 insertions(+), 23 deletions(-) diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx index c5763cbb0..4ab04e2b0 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx @@ -51,7 +51,7 @@ export const ExplorerVisualizations = ({ const fieldOptionList = fields.map((name) => { return { label: name.name }; - }); + }) return ( diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx index 9d443a8b7..253f9aac0 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -12,6 +12,7 @@ import { DefaultChartStyles, FILLOPACITY_DIV_FACTOR, PLOTLY_COLOR } from '../../ import { hexToRgba } from '../../../../components/event_analytics/utils/utils'; export const Line = ({ visualizations, layout, config }: any) => { + console.log("visualizations:################:", visualizations); const { DefaultMode, Interpolation, LineWidth, FillOpacity, MarkerSize, LegendPosition, ShowLegend } = DefaultChartStyles; const { data = {}, @@ -23,10 +24,12 @@ export const Line = ({ visualizations, layout, config }: any) => { layoutConfig = {}, availabilityConfig = {}, } = visualizations?.data?.userConfigs; + const xaxis = - dataConfig?.valueOptions && dataConfig.valueOptions.xaxis ? dataConfig.valueOptions.xaxis : []; + visualizations.data?.rawVizData?.dataConfig?.dimensions && visualizations.data?.rawVizData?.dataConfig?.dimensions ? visualizations.data?.rawVizData?.dataConfig?.dimensions : []; const yaxis = - dataConfig?.valueOptions && dataConfig.valueOptions.xaxis ? dataConfig.valueOptions.yaxis : []; + visualizations.data?.rawVizData?.dataConfig?.metrics ? visualizations.data?.rawVizData?.dataConfig?.metrics : []; + const lastIndex = fields.length - 1; const mode = dataConfig?.chartStyles?.style || DefaultMode; diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts index 1f1f86779..ed8e1ed8d 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts @@ -45,26 +45,6 @@ export const createLineTypeDefinition = (params: any = {}) => ({ 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: 'legend', name: 'Legend', From 988e76138a84c0755cf3c90f0a825f76adb5f535 Mon Sep 17 00:00:00 2001 From: rinku-kumar-psl Date: Fri, 24 Jun 2022 12:05:59 +0530 Subject: [PATCH 16/40] made data config pannel collapsable and initial fields render Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx # dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx --- .../__snapshots__/utils.test.tsx.snap | 80 +++++-------------- .../__snapshots__/config_panel.test.tsx.snap | 20 ----- .../data_config_panel_item.tsx | 18 +++-- .../__snapshots__/line.test.tsx.snap | 20 +++++ .../visualizations/charts/lines/line.tsx | 27 +++---- 5 files changed, 61 insertions(+), 104 deletions(-) diff --git a/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap b/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap index ee155787f..3feb1f635 100644 --- a/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap +++ b/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap @@ -1375,26 +1375,6 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "mapTo": "dataConfig", "name": "Data", "sections": Array [ - Object { - "editor": [Function], - "id": "value_options", - "mapTo": "valueOptions", - "name": "Value options", - "schemas": Array [ - Object { - "component": null, - "isSingleSelection": true, - "mapTo": "xaxis", - "name": "X-axis", - }, - Object { - "component": null, - "isSingleSelection": false, - "mapTo": "yaxis", - "name": "Y-axis", - }, - ], - }, Object { "editor": [Function], "id": "legend", @@ -1728,26 +1708,6 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "mapTo": "dataConfig", "name": "Data", "sections": Array [ - Object { - "editor": [Function], - "id": "value_options", - "mapTo": "valueOptions", - "name": "Value options", - "schemas": Array [ - Object { - "component": null, - "isSingleSelection": true, - "mapTo": "xaxis", - "name": "X-axis", - }, - Object { - "component": null, - "isSingleSelection": false, - "mapTo": "yaxis", - "name": "Y-axis", - }, - ], - }, Object { "editor": [Function], "id": "legend", @@ -2135,26 +2095,6 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "mapTo": "dataConfig", "name": "Data", "sections": Array [ - Object { - "editor": [Function], - "id": "value_options", - "mapTo": "valueOptions", - "name": "Value options", - "schemas": Array [ - Object { - "component": null, - "isSingleSelection": true, - "mapTo": "xaxis", - "name": "X-axis", - }, - Object { - "component": null, - "isSingleSelection": false, - "mapTo": "yaxis", - "name": "Y-axis", - }, - ], - }, Object { "editor": [Function], "id": "legend", @@ -2488,6 +2428,16 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "showgrid": false, "visible": true, }, + "yaxis1": Object { + "overlaying": "y", + "side": "left", + "tickfont": Object { + "color": "#3CA1C7", + }, + "titlefont": Object { + "color": "#3CA1C7", + }, + }, } } > @@ -2582,6 +2532,16 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "showgrid": false, "visible": true, }, + "yaxis1": Object { + "overlaying": "y", + "side": "left", + "tickfont": Object { + "color": "#3CA1C7", + }, + "titlefont": Object { + "color": "#3CA1C7", + }, + }, } } style={ diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap index 5fcf8e9e4..939cc60fd 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap @@ -818,26 +818,6 @@ exports[`Config panel component Renders config panel with visualization data 1`] "mapTo": "dataConfig", "name": "Data", "sections": Array [ - Object { - "editor": [Function], - "id": "value_options", - "mapTo": "valueOptions", - "name": "Value options", - "schemas": Array [ - Object { - "component": null, - "isSingleSelection": true, - "mapTo": "xaxis", - "name": "X-axis", - }, - Object { - "component": null, - "isSingleSelection": false, - "mapTo": "yaxis", - "name": "Y-axis", - }, - ], - }, Object { "editor": [Function], "id": "legend", diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx index f5df572fe..fe8ff9b3e 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx @@ -57,7 +57,7 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations, tabID }: let list = { ...configList }; let listItem = { ...list[name][index] }; listItem = { ...listItem, [field]: value }; - const newList = { + const x = { ...list, [name]: [ ...list[name].slice(0, index), @@ -65,22 +65,24 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations, tabID }: ...list[name].slice(index + 1, list[name].length), ], }; - setConfigList(newList); - }; + setConfigList(x); + } - const onFieldOptionChange = (e, index: number, name: string) => { - updateList(e[0]?.label, index, name, 'label'); + const onfieldOptionChange = (e, index: number, name: string) => { + let label = e.length > 0 ? e[0].label : ''; + updateList(label, index, name, 'label'); }; const onAggregationChange = (e, index: number, name: string) => { - updateList(e[0]?.label, index, name, 'aggregation'); + let label = e.length > 0 ? e[0].label : ''; + updateList(label, index, name, 'aggregation'); }; const onCustomLabelChange = (e, index: number, name: string) => { updateList(e.target.value, index, name, 'custom_label'); }; - const handleSideChange = (id, value, index: number, name: string) => { + const handleSideChange = (id: string, index: number, name: string) => { updateList(id, index, name, 'side'); }; @@ -150,7 +152,7 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations, tabID }: singleSelection={{ asPlainText: true }} options={fieldOptionList} selectedOptions={singleField.label ? [{ label: singleField.label }] : []} - onChange={(e) => onFieldOptionChange(e, index, sectionName)} + onChange={(e) => onfieldOptionChange(e, index, sectionName)} /> diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap index 30ff2a1f9..955825979 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap @@ -544,6 +544,16 @@ exports[`Line component Renders line component 1`] = ` }, "showlegend": true, "title": "", + "yaxis1": Object { + "overlaying": "y", + "side": "left", + "tickfont": Object { + "color": "#3CA1C7", + }, + "titlefont": Object { + "color": "#3CA1C7", + }, + }, } } > @@ -622,6 +632,16 @@ exports[`Line component Renders line component 1`] = ` "showgrid": true, "zeroline": false, }, + "yaxis1": Object { + "overlaying": "y", + "side": "left", + "tickfont": Object { + "color": "#3CA1C7", + }, + "titlefont": Object { + "color": "#3CA1C7", + }, + }, } } style={ diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx index 253f9aac0..0e54cdbeb 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -25,10 +25,9 @@ export const Line = ({ visualizations, layout, config }: any) => { availabilityConfig = {}, } = visualizations?.data?.userConfigs; - const xaxis = - visualizations.data?.rawVizData?.dataConfig?.dimensions && visualizations.data?.rawVizData?.dataConfig?.dimensions ? visualizations.data?.rawVizData?.dataConfig?.dimensions : []; - const yaxis = - visualizations.data?.rawVizData?.dataConfig?.metrics ? visualizations.data?.rawVizData?.dataConfig?.metrics : []; + const dataConfigTab = visualizations.data?.rawVizData?.dataConfig && visualizations.data.rawVizData.dataConfig; + const xaxis = dataConfigTab?.dimensions ? dataConfigTab?.dimensions : []; + const yaxis = dataConfigTab?.metrics ? dataConfigTab?.metrics : []; const lastIndex = fields.length - 1; @@ -65,18 +64,14 @@ export const Line = ({ visualizations, layout, config }: any) => { fillcolor: fillColor, }; const multiYaxis = { yaxis: `y${index + 1}` }; - if (index >= 1) { - multiMetrics = { - ...multiMetrics, - [`yaxis${index + 1}`]: { - title: `yaxis${index + 1} title`, - titlefont: { color: PLOTLY_COLOR[index] }, - tickfont: { color: PLOTLY_COLOR[index] }, - overlaying: 'y', - side: 'right', - anchor: 'free', - position: 1 - 0.1 * (index - 1), - } + multiMetrics = { + ...multiMetrics, + [`yaxis${index + 1}`]: { + // title: `yaxis${index + 1} title`, + titlefont: { color: PLOTLY_COLOR[index] }, + tickfont: { color: PLOTLY_COLOR[index] }, + overlaying: 'y', + side: index === 0 ? 'left' : field.side || "right" } } From 2cb28f71946b93d0bec833a0fa2d29aec7be282b Mon Sep 17 00:00:00 2001 From: rinku-kumar-psl Date: Fri, 24 Jun 2022 12:26:43 +0530 Subject: [PATCH 17/40] code refactored Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx --- .../integration/1_event_analytics.spec.js | 1 + .../config_controls/config_button_group.tsx | 35 ++-- .../data_config_panel_item.tsx | 184 ++++++++---------- .../visualizations/charts/lines/line.tsx | 7 +- 4 files changed, 101 insertions(+), 126 deletions(-) diff --git a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js index e0c1e4e43..6655200b1 100644 --- a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js +++ b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js @@ -870,6 +870,7 @@ describe('Render Pie chart for Legend and single color contrast change', () => { beforeEach(() => { landOnEventVisualizations(); }); + it('Render Pie chart and verify legends for Position Right and Bottom', () => { renderPieChart(); diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx index 31d8ffaac..c23653bb4 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx @@ -19,21 +19,22 @@ interface ToggleGroupProps { export const ButtonGroupItem: React.FC = ({ title, legend, groupOptions, idSelected, handleButtonChange }) => ( - <> - -

{title}

- - - - - + <> + +

{title}

+ + +
+ +
+ ); diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx index fe8ff9b3e..787bd4fdc 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx @@ -57,7 +57,7 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations, tabID }: let list = { ...configList }; let listItem = { ...list[name][index] }; listItem = { ...listItem, [field]: value }; - const x = { + const newList = { ...list, [name]: [ ...list[name].slice(0, index), @@ -65,27 +65,9 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations, tabID }: ...list[name].slice(index + 1, list[name].length), ], }; - setConfigList(x); + setConfigList(newList); } - const onfieldOptionChange = (e, index: number, name: string) => { - let label = e.length > 0 ? e[0].label : ''; - updateList(label, index, name, 'label'); - }; - - const onAggregationChange = (e, index: number, name: string) => { - let label = e.length > 0 ? e[0].label : ''; - updateList(label, index, name, 'aggregation'); - }; - - const onCustomLabelChange = (e, index: number, name: string) => { - updateList(e.target.value, index, name, 'custom_label'); - }; - - const handleSideChange = (id: string, index: number, name: string) => { - updateList(id, index, name, 'side'); - }; - const handleServiceRemove = (index: number, name: string) => { const list = { ...configList }; const arr = [...list[name]]; @@ -114,97 +96,89 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations, tabID }: ); }; - const getCommonUI = (lists, sectionName: string) => - lists.map((singleField, index: number) => ( - <> -
-
- - - handleServiceRemove(index, sectionName)} - /> - - ) - } - > - onAggregationChange(e, index, sectionName)} - /> - - - onfieldOptionChange(e, index, sectionName)} - /> - - - - onCustomLabelChange(e, index, sectionName)} - aria-label="Use aria labels when no actual label is in use" + const getCommonUI = (lists, sectionName: string) => lists.map((singleField, index: number) => ( + <> +
+
+ + + handleServiceRemove(index, sectionName)} /> + + ) + } + > + updateList(e.length > 0 ? e[0].label : '', index, sectionName, 'aggregation')} + /> + + + + updateList(e.length > 0 ? e[0].label : '', index, sectionName, 'label')} + /> + + + + updateList(e.target.value, index, sectionName, 'custom_label')} + aria-label="Use aria labels when no actual label is in use" /> + + + {sectionName === 'metrics' && visualizations.vis.name === visChartTypes.Line && ( + + updateList(id, index, sectionName, 'side')} /> - - {sectionName === 'metrics' && visualizations.vis.name === visChartTypes.Line && ( - - - handleSideChange(id, value, index, sectionName) - } - /> - - )} - - - {lists.length - 1 === index && ( - - handleServiceAdd(sectionName)} - > - Add - - - )} - -
+ )} + + + {lists.length - 1 === index && + + handleServiceAdd(sectionName)} + > + Add + + + } +
- - - )); +
+ + + )) return ( <> -

Data Configurations

+

Data Cofigurations

 @@ -230,4 +204,4 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations, tabID }: ); -}; +}; \ No newline at end of file diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx index 0e54cdbeb..c599311fc 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -9,10 +9,9 @@ import { Plt } from '../../plotly/plot'; 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 { DefaultChartStyles, FILLOPACITY_DIV_FACTOR, PLOTLY_COLOR } from '../../../../../common/constants/shared'; -import { hexToRgba } from '../../../../components/event_analytics/utils/utils'; +import { hexToRgb } from '../../../../components/event_analytics/utils/utils'; export const Line = ({ visualizations, layout, config }: any) => { - console.log("visualizations:################:", visualizations); const { DefaultMode, Interpolation, LineWidth, FillOpacity, MarkerSize, LegendPosition, ShowLegend } = DefaultChartStyles; const { data = {}, @@ -34,7 +33,7 @@ export const Line = ({ visualizations, layout, config }: any) => { const mode = dataConfig?.chartStyles?.style || DefaultMode; const lineShape = dataConfig?.chartStyles?.interpolation || Interpolation; const lineWidth = dataConfig?.chartStyles?.lineWidth || LineWidth; - const showLegend = dataConfig?.legend?.showLegend && dataConfig.legend.showLegend !== ShowLegend ? false : true; + const showLegend = !(dataConfig?.legend?.showLegend && dataConfig.legend.showLegend !== ShowLegend); const legendPosition = dataConfig?.legend?.position || LegendPosition; const markerSize = dataConfig?.chartStyles?.pointSize || MarkerSize; const fillOpacity = dataConfig?.chartStyles?.fillOpacity !== undefined ? dataConfig?.chartStyles?.fillOpacity / FILLOPACITY_DIV_FACTOR : FillOpacity / FILLOPACITY_DIV_FACTOR; @@ -51,7 +50,7 @@ export const Line = ({ visualizations, layout, config }: any) => { const isBarMode = mode === 'bar'; let calculatedLineValues = valueSeries.map((field: any, index: number) => { - const fillColor = hexToRgba(PLOTLY_COLOR[index % PLOTLY_COLOR.length], fillOpacity); + const fillColor = hexToRgb(PLOTLY_COLOR[index % PLOTLY_COLOR.length], fillOpacity); const barMarker = { color: fillColor, line: { From e632d77b1c968693b143d116313e26c29cb2615f Mon Sep 17 00:00:00 2001 From: rinku-kumar-psl Date: Fri, 24 Jun 2022 11:02:51 +0000 Subject: [PATCH 18/40] snapshot updated and handled corner cases Signed-off-by: rinku-kumar-psl --- .../__snapshots__/config_panel.test.tsx.snap | 1304 +++++++++-------- .../data_config_panel_item.tsx | 151 +- .../__snapshots__/line.test.tsx.snap | 22 +- .../visualizations/charts/lines/line.tsx | 4 +- 4 files changed, 750 insertions(+), 731 deletions(-) diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap index 939cc60fd..724090f83 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap @@ -9374,207 +9374,215 @@ exports[`Config panel component Renders config panel with visualization data 1`] className="euiSpacer euiSpacer--s" /> - -
- - - Show Legend - - -
- + + Show Legend + + +
- - - - - - + + + + - - - -
-
- + + + + +
+ + + - -
- - - Position - - -
- + + Position + + +
- - - - - - + + + + - - - -
-
- + + + + + + + + - -
- - - Orientation - - -
- + + Orientation + + +
- - - - - - + + + + - - - -
-
- + + + + + + + + - -
- - - Mode - - -
- + + Mode + + +
- - - - - - + + + + - - - -
-
- + + + + + + + + lists.map((singleField, index: number) => ( - <> -
-
- - - handleServiceRemove(index, sectionName)} /> - - ) - } - > - updateList(e.length > 0 ? e[0].label : '', index, sectionName, 'aggregation')} - /> - - - - updateList(e.length > 0 ? e[0].label : '', index, sectionName, 'label')} - /> - - - - updateList(e.target.value, index, sectionName, 'custom_label')} - aria-label="Use aria labels when no actual label is in use" /> - - - {sectionName === 'metrics' && visualizations.vis.name === visChartTypes.Line && ( - - updateList(id, index, sectionName, 'side')} + const getCommonUI = (lists, sectionName: string) => + lists && lists.map((singleField, index: number) => ( + <> +
+
+ + + handleServiceRemove(index, sectionName)} /> + + ) + } + > + updateList(e.length > 0 ? e[0].label : '', index, sectionName, 'aggregation')} + /> + + + + updateList(e.length > 0 ? e[0].label : '', index, sectionName, 'label')} /> - )} - - - {lists.length - 1 === index && - - handleServiceAdd(sectionName)} - > - Add - - - } - + + + updateList(e.target.value, index, sectionName, 'custom_label')} + aria-label="Use aria labels when no actual label is in use" /> + + + {sectionName === 'metrics' && visualizations.vis.name === visChartTypes.Line && ( + + updateList(id, index, sectionName, 'side')} + /> + + )} + + + {lists.length - 1 === index && + + handleServiceAdd(sectionName)} + > + Add + + + } + +
-
- - - )) + + + )) return ( <> diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap index 955825979..94701f7db 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap @@ -505,7 +505,7 @@ exports[`Line component Renders line component 1`] = ` "size": 5, }, "mode": "lines", - "name": "count()", + "name": undefined, "type": "scatter", "x": Array [ "error", @@ -515,14 +515,7 @@ exports[`Line component Renders line component 1`] = ` "success", "warning", ], - "y": Array [ - 154, - 1753, - 116, - 468, - 1964, - 219, - ], + "y": undefined, }, ] } @@ -577,7 +570,7 @@ exports[`Line component Renders line component 1`] = ` "size": 5, }, "mode": "lines", - "name": "count()", + "name": undefined, "type": "scatter", "x": Array [ "error", @@ -587,14 +580,7 @@ exports[`Line component Renders line component 1`] = ` "success", "warning", ], - "y": Array [ - 154, - 1753, - 116, - 468, - 1964, - 219, - ], + "y": undefined, }, ] } diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx index c599311fc..8aabaaa1c 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -76,9 +76,9 @@ export const Line = ({ visualizations, layout, config }: any) => { return { x: data[!isEmpty(xaxis) ? xaxis[0]?.label : fields[lastIndex].name], - y: data[field.name], + y: data[field.label], type: isBarMode ? 'bar' : 'scatter', - name: field.name, + name: field.label, mode, ...!['bar', 'markers'].includes(mode) && fillProperty, line: { From dbd564e547a6db562bd049e457bc634d97734c45 Mon Sep 17 00:00:00 2001 From: rinku-kumar-psl Date: Fri, 24 Jun 2022 11:46:24 +0000 Subject: [PATCH 19/40] code styling fixes and added TODO comment Signed-off-by: rinku-kumar-psl --- .../config_panes/config_controls/data_config_panel_item.tsx | 6 +++++- .../public/components/visualizations/charts/lines/line.tsx | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx index a192db8f7..2af6f1674 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx @@ -107,7 +107,11 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations, tabID }: labelAppend={ lists.length !== 1 && ( - handleServiceRemove(index, sectionName)} /> + handleServiceRemove(index, sectionName)} + /> ) } diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx index 8aabaaa1c..f38c50dce 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -66,7 +66,7 @@ export const Line = ({ visualizations, layout, config }: any) => { multiMetrics = { ...multiMetrics, [`yaxis${index + 1}`]: { - // title: `yaxis${index + 1} title`, + // title: `yaxis${index + 1} title`, TODO: need to add title titlefont: { color: PLOTLY_COLOR[index] }, tickfont: { color: PLOTLY_COLOR[index] }, overlaying: 'y', From 8e6769d52814c432b722a62616643f07960a8a64 Mon Sep 17 00:00:00 2001 From: Ramneet Chopra Date: Thu, 16 Jun 2022 13:19:40 +0530 Subject: [PATCH 20/40] table view: eui table replaced with ag-grid Signed-off-by: Ramneet Chopra --- dashboards-observability/package.json | 3 + .../workspace_panel/workspace_panel.tsx | 16 +- .../charts/data_table/data_table.scss | 63 ++ .../charts/data_table/data_table.tsx | 575 +++++++++++++++--- dashboards-observability/yarn.lock | 30 +- 5 files changed, 606 insertions(+), 81 deletions(-) create mode 100644 dashboards-observability/public/components/visualizations/charts/data_table/data_table.scss diff --git a/dashboards-observability/package.json b/dashboards-observability/package.json index 1bfdf7b80..d068e60c4 100644 --- a/dashboards-observability/package.json +++ b/dashboards-observability/package.json @@ -17,8 +17,11 @@ "@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", "plotly.js-dist": "^2.2.0", "react-graph-vis": "^1.0.5", + "react-paginate": "^8.1.3", "react-plotly.js": "^2.5.1" }, "devDependencies": { diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx index aaf9a4542..0fa68e4eb 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx @@ -21,7 +21,9 @@ interface IWorkSpacePanel { export function WorkspacePanel({ visualizations }: IWorkSpacePanel) { const [isTableViewOn, setIsTableViewOn] = useState(false); const VisualizationPanel = useMemo(() => { - return ; + return ( + + ); }, [visualizations]); return ( @@ -64,11 +66,13 @@ export function WorkspacePanel({ visualizations }: IWorkSpacePanel) { - - {isTableViewOn ? - : VisualizationPanel} + + {isTableViewOn ? : VisualizationPanel} diff --git a/dashboards-observability/public/components/visualizations/charts/data_table/data_table.scss b/dashboards-observability/public/components/visualizations/charts/data_table/data_table.scss new file mode 100644 index 000000000..86cb0b90e --- /dev/null +++ b/dashboards-observability/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/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx b/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx index 912a9dc2c..43f6759c2 100644 --- a/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx +++ b/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx @@ -3,102 +3,529 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useState, useMemo, useCallback } from 'react'; -import { EuiInMemoryTable, EuiDataGrid } from '@elastic/eui'; +import React, { useState, useMemo, useCallback, useRef, useEffect } from 'react'; +import { + EuiButtonIcon, + EuiFlexGroup, + EuiFlexItem, + EuiButtonEmpty, + EuiPopover, + EuiSwitch, + EuiIcon, + EuiContextMenuPanel, + EuiContextMenuItem, +} from '@elastic/eui'; -export const DataTable = ({ visualizations }: any) => { +// pagination +import ReactPaginate from 'react-paginate'; + +// af-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'; +import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css'; + +// styles +import './data_table.scss'; + +// theme +import { uiSettingsService } from '../../../../../common/utils'; + +export const DataTable = ({ visualizations, layout, config }: any) => { const { data: vizData, jsonData, metadata: { fields = [] }, } = visualizations.data.rawVizData; - const raw_data = [...jsonData]; + const columns = fields.map((field: any) => { + return { + headerName: field.name, + field: field.name, + id: field.name, + columnsMenuParams: { + suppressColumnFilter: true, + suppressColumnSelectAll: true, + suppressColumnExpandAll: true, + }, + }; + }); + + // ag-grid-react bindings + const gridRef = useRef(); + const [pageSize, setPageSize] = useState(10); + const [columnVisibility, setColumnVisibility] = useState([]); + const [selectedRowDensity, setSelectedRowDensity] = useState({ + icon: 'tableDensityNormal', + height: 40, + selected: true, + }); + const defaultColDef = useMemo(() => { + return { + editable: true, + enableRowGroup: true, + enablePivot: true, + enableValue: true, + sortable: true, + resizable: true, + filter: true, + flex: 1, + minWidth: 100, + suppressMenu: true, + }; + }, []); + + const onPageSizeChanged = useCallback((val) => { + setPageSize(val); + gridRef.current.api.paginationSetPageSize(val); + setActivePage(0); + gridRef.current.api.paginationGoToPage(0); + }, []); + + const paginationNumberFormatter = useCallback((params) => { + return '[' + params.value.toLocaleString() + ']'; + }, []); + + const selectDensityHandler = useCallback((value) => { + setSelectedRowDensity({ ...value }); + gridRef.current.api.forEachNode((rowNode) => { + if (rowNode.data) { + rowNode.setRowHeight(value.height); + } + }); + gridRef.current.api.onRowHeightChanged(); + }, []); + + const [isFullScreen, setIsFullScreen] = useState(false); + + const columnVisiblityHandler = useCallback((visible: boolean, feild: any) => { + const isExisting = columnVisibility.findIndex((i) => i === feild); + if (visible) { + if (isExisting > -1) { + columnVisibility.splice(isExisting, 1); + gridRef?.current?.columnApi?.setColumnsVisible([feild], true); + } + } else { + columnVisibility.push(feild); + gridRef?.current?.columnApi?.setColumnsVisible([feild], false); + } + setColumnVisibility([...columnVisibility]); + }, []); + + // pagination + const pageCount = Math.ceil(raw_data.length / pageSize); + const [activePage, setActivePage] = useState(0); + const goToPage = ({ selected }: { selected: number }) => { + setActivePage(selected); + gridRef.current.api.paginationGoToPage(selected); + }; + + const setIsFullScreenHandler = (val: boolean) => { + setIsFullScreen(val); + // const myGrid = document.getElementById('myGrid'); + // myGrid?.webkitRequestFullscreen(); + }; + + useEffect(() => { + document.addEventListener('keydown', hideGridFullScreenHandler); + return () => { + document.removeEventListener('keydown', hideGridFullScreenHandler); + }; + }, [isFullScreen]); + + const hideGridFullScreenHandler = (e: any) => { + if (e.key === 'Escape') { + if (isFullScreen) { + setIsFullScreen(false); + } + } + }; - // Pagination - const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 }); - const onChangeItemsPerPage = useCallback( - (pageSize) => - setPagination((pagination) => ({ - ...pagination, - pageSize, - pageIndex: 0, - })), - [setPagination] + return ( + <> + +
+ +
+ + {isFullScreen && ( + + + +
+ +
+ + + + + + + )} + ); - const onChangePage = useCallback( - (pageIndex) => setPagination((pagination) => ({ ...pagination, pageIndex })), - [setPagination] +}; + +const CustomOverlay = ({ children }: { children: any }) => { + return ( +
+ {children} +
); +}; - // Sorting - const [sortingColumns, setSortingColumns] = useState([]); - const onSort = useCallback( - (sortingColumns) => { - setSortingColumns(sortingColumns); - }, - [setSortingColumns] +const GridHeader = ({ + isFullScreen, + setIsFullScreenHandler, + selectedRowDensity, + selectDensityHandler, + columnVisiblityHandler, + columns, + columnVisibility, +}: { + isFullScreen: boolean; + setIsFullScreenHandler: (v: boolean) => void; + selectedRowDensity: any; + selectDensityHandler: (v: any) => void; + columnVisiblityHandler: (visible: boolean, feild: any) => void; + columns: any; + columnVisibility: any; +}) => { + return ( + <> + + + + + + + + + setIsFullScreenHandler(true)} + > + Full screen + + + {isFullScreen && ( + setIsFullScreenHandler(false)} + style={{ position: 'absolute', right: 20, cursor: 'pointer', top: 20 }} + /> + )} + + ); +}; - // Sort data - let data = useMemo(() => { - return [...raw_data].sort((a, b) => { - for (let i = 0; i < sortingColumns.length; i++) { - const column = sortingColumns[i]; - const aValue = a[column.id]; - const bValue = b[column.id]; +const GridFooter = ({ + onPageSizeChanged, + pageSize, + activePage, + goToPage, + pageCount, +}: { + onPageSizeChanged: (val: number) => void; + goToPage: (val: number) => void; + pageSize: number; + activePage: number; + pageCount: number; +}) => { + return ( + + + + + + } + forcePage={activePage} + onPageChange={goToPage} + pageRangeDisplayed={5} + pageCount={pageCount} + previousLabel={} + renderOnZeroPageCount={null} + /> + + + ); +}; - if (aValue < bValue) return column.direction === 'asc' ? -1 : 1; - if (aValue > bValue) return column.direction === 'asc' ? 1 : -1; - } +const DensityPopover = ({ + selectDensityHandler, + selectedDensity, +}: { + selectedDensity: any; + selectDensityHandler: (data: any) => void; +}) => { + const [isPopoverOpen, setIsPopoverOpen] = useState(false); - return 0; - }); - }, [sortingColumns]); + const onButtonClick = () => setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen); + const closePopover = () => setIsPopoverOpen(false); - // Pagination - data = useMemo(() => { - const rowStart = pagination.pageIndex * pagination.pageSize; - const rowEnd = Math.min(rowStart + pagination.pageSize, data.length); - return data.slice(rowStart, rowEnd); - }, [data, pagination]); + const button = ( + + Density + + ); - const columns = fields.map((field) => { - return { - id: field.name, - }; - }); + const rowDensities = [ + { icon: 'tableDensityExpanded', height: 60, selected: false }, + { icon: 'tableDensityNormal', height: 40, selected: true }, + { icon: 'tableDensityCompact', height: 30, selected: false }, + ]; - // Column visibility - const [visibleColumns, setVisibleColumns] = useState(columns.map(({ id }) => id)); + return ( + + + {rowDensities.map((i: any, index: number) => ( + + selectDensityHandler(i)} + display={selectedDensity.icon === i.icon ? 'fill' : 'base'} + iconType={i.icon} + aria-label="Next" + /> + + ))} + + + ); +}; - const renderCellValue = useMemo(() => { - return ({ rowIndex, columnId }) => { - let adjustedRowIndex = rowIndex; +// export const AlignPopover = ({ +// columnAlignment, +// setColumnAlignment, +// }: { +// columnAlignment: string; +// setColumnAlignment: (data: any) => void; +// }) => { +// const [isPopoverOpen, setIsPopoverOpen] = useState(false); - // If we are doing the pagination (instead of leaving that to the grid) - // then the row index must be adjusted as `data` has already been pruned to the page size - adjustedRowIndex = rowIndex - pagination.pageIndex * pagination.pageSize; +// const onButtonClick = () => setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen); +// const closePopover = () => setIsPopoverOpen(false); - return data.hasOwnProperty(adjustedRowIndex) ? data[adjustedRowIndex][columnId] : null; - }; - }, [data, pagination.pageIndex, pagination.pageSize]); +// const button = ( +// +// Align +// +// ); + +// const align = ['Left', 'Center', 'Right']; + +// return ( +// +// +// {align.map((i: any, index: number) => ( +// +// setColumnAlignment(i)} +// display={columnAlignment === i ? 'fill' : 'base'} +// iconType={`editorAlign${i}`} +// aria-label="Next" +// /> +// +// ))} +// +// +// ); +// }; + +const ColumnVisiblityPopover = ({ + columnVisibility, + columns, + columnVisiblityHandler, +}: { + columns: any; + columnVisibility: any; + columnVisiblityHandler: (visible: boolean, feild: any) => void; +}) => { + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + const onButtonClick = () => setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen); + const closePopover = () => setIsPopoverOpen(false); + + const button = ( + + Columns + + ); + + return ( + + + {columns.map((i: any, index: number) => { + return ( + + { + columnVisiblityHandler(e.target.checked, i.field); + }} + compressed + /> + + ); + })} + + + ); +}; + +const PageSizePopover = ({ + onPageSizeChanged, + pageSize, +}: { + onPageSizeChanged: (size: number) => void; + pageSize: number; +}) => { + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + const onButtonClick = () => setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen); + const closePopover = () => setIsPopoverOpen(false); + + const button = ( + + Rows per page: {pageSize} + + ); + + const sizes = [10, 50, 100]; + + const items = () => { + return sizes.map((i) => ( + { + onPageSizeChanged(i); + closePopover(); + }} + > + {i} rows + + )); + }; return ( - + + + ); }; diff --git a/dashboards-observability/yarn.lock b/dashboards-observability/yarn.lock index c205c9bf8..1bff758f9 100644 --- a/dashboards-observability/yarn.lock +++ b/dashboards-observability/yarn.lock @@ -325,6 +325,18 @@ acorn@^7.1.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" @@ -2133,6 +2145,15 @@ prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: 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" @@ -2216,7 +2237,7 @@ react-graph-vis@^1.0.5: vis-data "^7.1.2" vis-network "^9.0.0" -react-is@^16.8.1, react-is@^16.8.6: +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== @@ -2248,6 +2269,13 @@ react-markdown@^4.0.0: 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" From 6789e810462fbff4f2fb5aa1d53542b8d3c41a36 Mon Sep 17 00:00:00 2001 From: Ramneet Chopra Date: Tue, 21 Jun 2022 16:54:18 +0530 Subject: [PATCH 21/40] drag-drop issue fixed Signed-off-by: Ramneet Chopra --- .../charts/data_table/data_table.tsx | 39 ++++++++++++------- 1 file changed, 25 insertions(+), 14 deletions(-) diff --git a/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx b/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx index 43f6759c2..bbf66d266 100644 --- a/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx +++ b/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx @@ -43,6 +43,7 @@ export const DataTable = ({ visualizations, layout, config }: any) => { headerName: field.name, field: field.name, id: field.name, + lockVisible: true, columnsMenuParams: { suppressColumnFilter: true, suppressColumnSelectAll: true, @@ -53,8 +54,10 @@ export const DataTable = ({ visualizations, layout, config }: any) => { // ag-grid-react bindings const gridRef = useRef(); + const gridRefFullScreen = useRef(); const [pageSize, setPageSize] = useState(10); const [columnVisibility, setColumnVisibility] = useState([]); + const [isFullScreen, setIsFullScreen] = useState(false); const [selectedRowDensity, setSelectedRowDensity] = useState({ icon: 'tableDensityNormal', height: 40, @@ -75,12 +78,19 @@ export const DataTable = ({ visualizations, layout, config }: any) => { }; }, []); - const onPageSizeChanged = useCallback((val) => { - setPageSize(val); - gridRef.current.api.paginationSetPageSize(val); - setActivePage(0); - gridRef.current.api.paginationGoToPage(0); - }, []); + const onPageSizeChanged = useCallback( + (val) => { + 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 paginationNumberFormatter = useCallback((params) => { return '[' + params.value.toLocaleString() + ']'; @@ -96,8 +106,6 @@ export const DataTable = ({ visualizations, layout, config }: any) => { gridRef.current.api.onRowHeightChanged(); }, []); - const [isFullScreen, setIsFullScreen] = useState(false); - const columnVisiblityHandler = useCallback((visible: boolean, feild: any) => { const isExisting = columnVisibility.findIndex((i) => i === feild); if (visible) { @@ -118,6 +126,9 @@ export const DataTable = ({ visualizations, layout, config }: any) => { const goToPage = ({ selected }: { selected: number }) => { setActivePage(selected); gridRef.current.api.paginationGoToPage(selected); + if (isFullScreen) { + gridRefFullScreen.current.api.paginationGoToPage(selected); + } }; const setIsFullScreenHandler = (val: boolean) => { @@ -131,16 +142,16 @@ export const DataTable = ({ visualizations, layout, config }: any) => { return () => { document.removeEventListener('keydown', hideGridFullScreenHandler); }; - }, [isFullScreen]); + }, []); const hideGridFullScreenHandler = (e: any) => { if (e.key === 'Escape') { - if (isFullScreen) { - setIsFullScreen(false); - } + setIsFullScreen(false); + // if (isFullScreen) { + // setIsFullScreen(false); + // } } }; - return ( <> {
Date: Thu, 23 Jun 2022 09:10:04 +0000 Subject: [PATCH 22/40] test case of data_table updated Signed-off-by: Ramneet Chopra --- .../__snapshots__/data_table.test.tsx.snap | 747 +++--------------- .../charts/__tests__/data_table.test.tsx | 17 +- .../charts/data_table/data_table.tsx | 55 +- 3 files changed, 127 insertions(+), 692 deletions(-) diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap index 6031f476d..a89573694 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap @@ -1,649 +1,140 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Data table component Renders data table component 1`] = ` - - + +
- - - - -
- -
-
-
- -
- - - - - - + +
+ + `; diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/data_table.test.tsx b/dashboards-observability/public/components/visualizations/charts/__tests__/data_table.test.tsx index e6826ac2a..07a78ce49 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/data_table.test.tsx +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/data_table.test.tsx @@ -3,27 +3,24 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { configure, mount } from 'enzyme'; +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 wrapper = mount( - - ); - - wrapper.update(); - + const gridWrapper = shallow(); + const agGridReactObj = gridWrapper.find(AgGridReact); + agGridReactObj.simulate('gridReady') + expect(agGridReactObj).toBeTruthy(); await waitFor(() => { - expect(wrapper).toMatchSnapshot(); + expect(gridWrapper).toMatchSnapshot(); }); }); }); diff --git a/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx b/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx index bbf66d266..cbba277da 100644 --- a/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx +++ b/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx @@ -43,6 +43,7 @@ export const DataTable = ({ visualizations, layout, config }: any) => { headerName: field.name, field: field.name, id: field.name, + colId: field.name, lockVisible: true, columnsMenuParams: { suppressColumnFilter: true, @@ -66,9 +67,6 @@ export const DataTable = ({ visualizations, layout, config }: any) => { const defaultColDef = useMemo(() => { return { editable: true, - enableRowGroup: true, - enablePivot: true, - enableValue: true, sortable: true, resizable: true, filter: true, @@ -133,8 +131,6 @@ export const DataTable = ({ visualizations, layout, config }: any) => { const setIsFullScreenHandler = (val: boolean) => { setIsFullScreen(val); - // const myGrid = document.getElementById('myGrid'); - // myGrid?.webkitRequestFullscreen(); }; useEffect(() => { @@ -147,9 +143,6 @@ export const DataTable = ({ visualizations, layout, config }: any) => { const hideGridFullScreenHandler = (e: any) => { if (e.key === 'Escape') { setIsFullScreen(false); - // if (isFullScreen) { - // setIsFullScreen(false); - // } } }; return ( @@ -173,7 +166,6 @@ export const DataTable = ({ visualizations, layout, config }: any) => { rowSelection="multiple" enableRangeSelection={true} pagination={true} - // domLayout={'autoHeight'} paginationPageSize={pageSize} paginationNumberFormatter={paginationNumberFormatter} suppressPaginationPanel={true} @@ -392,50 +384,6 @@ const DensityPopover = ({ ); }; -// export const AlignPopover = ({ -// columnAlignment, -// setColumnAlignment, -// }: { -// columnAlignment: string; -// setColumnAlignment: (data: any) => void; -// }) => { -// const [isPopoverOpen, setIsPopoverOpen] = useState(false); - -// const onButtonClick = () => setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen); -// const closePopover = () => setIsPopoverOpen(false); - -// const button = ( -// -// Align -// -// ); - -// const align = ['Left', 'Center', 'Right']; - -// return ( -// -// -// {align.map((i: any, index: number) => ( -// -// setColumnAlignment(i)} -// display={columnAlignment === i ? 'fill' : 'base'} -// iconType={`editorAlign${i}`} -// aria-label="Next" -// /> -// -// ))} -// -// -// ); -// }; - const ColumnVisiblityPopover = ({ columnVisibility, columns, @@ -456,7 +404,6 @@ const ColumnVisiblityPopover = ({ aria-label="Next" iconType="listAdd" onClick={onButtonClick} - //style={{width: "30px"}} > Columns From 3b54ee03dc67581e1b028090b7298890fda3bc0d Mon Sep 17 00:00:00 2001 From: Ramneet Chopra Date: Thu, 23 Jun 2022 13:57:08 +0000 Subject: [PATCH 23/40] feedback comments resolved Signed-off-by: Ramneet Chopra --- .../common/constants/data_table.ts | 16 ++ .../__snapshots__/data_table.test.tsx.snap | 4 - .../charts/data_table/data_table.tsx | 225 +++++++++--------- 3 files changed, 135 insertions(+), 110 deletions(-) create mode 100644 dashboards-observability/common/constants/data_table.ts diff --git a/dashboards-observability/common/constants/data_table.ts b/dashboards-observability/common/constants/data_table.ts new file mode 100644 index 000000000..6d99e43ca --- /dev/null +++ b/dashboards-observability/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_HEIGHT = '460px'; +export const GRID_HEIGHT_FULLSCREEN = '500px'; +export const GRID_PAGE_RANGE_DSIPLAY = 5; +export const COLUMN_DEFAULT_MIN_WIDTH = 100; +export const GRID_PAGE_SIZES = [10, 50, 100]; +export const ROW_DENSITIES = [ + { icon: 'tableDensityExpanded', height: 60, selected: false }, + { icon: 'tableDensityNormal', height: 40, selected: true }, + { icon: 'tableDensityCompact', height: 30, selected: false }, +]; diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap index a89573694..e5cb1629e 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap @@ -83,7 +83,6 @@ exports[`Data table component Renders data table component 1`] = ` } defaultColDef={ Object { - "editable": true, "filter": true, "flex": 1, "minWidth": 100, @@ -92,9 +91,7 @@ exports[`Data table component Renders data table component 1`] = ` "suppressMenu": true, } } - enableRangeSelection={true} pagination={true} - paginationNumberFormatter={[Function]} paginationPageSize={10} rowData={ Array [ @@ -125,7 +122,6 @@ exports[`Data table component Renders data table component 1`] = ` ] } rowHeight={40} - rowSelection="multiple" suppressPaginationPanel={true} />
diff --git a/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx b/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx index cbba277da..cb754d58d 100644 --- a/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx +++ b/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx @@ -3,7 +3,15 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useState, useMemo, useCallback, useRef, useEffect } from 'react'; +import React, { + useState, + useMemo, + useCallback, + useRef, + useEffect, + ReactChildren, + ReactChild, +} from 'react'; import { EuiButtonIcon, EuiFlexGroup, @@ -19,7 +27,7 @@ import { // pagination import ReactPaginate from 'react-paginate'; -// af-data-grid +// 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'; @@ -31,12 +39,38 @@ import './data_table.scss'; // theme import { uiSettingsService } from '../../../../../common/utils'; +// constants +import { + GRID_HEADER_COLUMN_MAX_WIDTH, + GRID_HEIGHT, + GRID_HEIGHT_FULLSCREEN, + GRID_PAGE_RANGE_DSIPLAY, + COLUMN_DEFAULT_MIN_WIDTH, + ROW_DENSITIES, + GRID_PAGE_SIZES, +} from '../../../../../common/constants/data_table'; + +interface RowConfig { + icon: string; + height: number; + selected: boolean; +} + export const DataTable = ({ visualizations, layout, config }: any) => { const { data: vizData, jsonData, metadata: { fields = [] }, } = visualizations.data.rawVizData; + + useEffect(() => { + document.addEventListener('keydown', hideGridFullScreenHandler); + return () => { + document.removeEventListener('keydown', hideGridFullScreenHandler); + }; + }, []); + + // rows and columns const raw_data = [...jsonData]; const columns = fields.map((field: any) => { return { @@ -56,28 +90,31 @@ export const DataTable = ({ visualizations, layout, config }: any) => { // ag-grid-react bindings const gridRef = useRef(); const gridRefFullScreen = useRef(); - const [pageSize, setPageSize] = useState(10); - const [columnVisibility, setColumnVisibility] = useState([]); + const [pageSize, setPageSize] = useState(10); + const [columnVisibility, setColumnVisibility] = useState([]); const [isFullScreen, setIsFullScreen] = useState(false); - const [selectedRowDensity, setSelectedRowDensity] = useState({ + const [selectedRowDensity, setSelectedRowDensity] = useState({ icon: 'tableDensityNormal', height: 40, selected: true, }); + // pagination + const [activePage, setActivePage] = useState(0); + const pageCount = Math.ceil(raw_data.length / pageSize); + const defaultColDef = useMemo(() => { return { - editable: true, sortable: true, resizable: true, filter: true, flex: 1, - minWidth: 100, + minWidth: COLUMN_DEFAULT_MIN_WIDTH, suppressMenu: true, }; }, []); const onPageSizeChanged = useCallback( - (val) => { + (val: number) => { setPageSize(val); gridRef.current.api.paginationSetPageSize(val); setActivePage(0); @@ -90,11 +127,7 @@ export const DataTable = ({ visualizations, layout, config }: any) => { [isFullScreen] ); - const paginationNumberFormatter = useCallback((params) => { - return '[' + params.value.toLocaleString() + ']'; - }, []); - - const selectDensityHandler = useCallback((value) => { + const selectDensityHandler = useCallback((value: RowConfig) => { setSelectedRowDensity({ ...value }); gridRef.current.api.forEachNode((rowNode) => { if (rowNode.data) { @@ -104,23 +137,20 @@ export const DataTable = ({ visualizations, layout, config }: any) => { gridRef.current.api.onRowHeightChanged(); }, []); - const columnVisiblityHandler = useCallback((visible: boolean, feild: any) => { - const isExisting = columnVisibility.findIndex((i) => i === feild); + 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([feild], true); + gridRef?.current?.columnApi?.setColumnsVisible([field], true); } } else { - columnVisibility.push(feild); - gridRef?.current?.columnApi?.setColumnsVisible([feild], false); + columnVisibility.push(field); + gridRef?.current?.columnApi?.setColumnsVisible([field], false); } setColumnVisibility([...columnVisibility]); }, []); - // pagination - const pageCount = Math.ceil(raw_data.length / pageSize); - const [activePage, setActivePage] = useState(0); const goToPage = ({ selected }: { selected: number }) => { setActivePage(selected); gridRef.current.api.paginationGoToPage(selected); @@ -133,13 +163,6 @@ export const DataTable = ({ visualizations, layout, config }: any) => { setIsFullScreen(val); }; - useEffect(() => { - document.addEventListener('keydown', hideGridFullScreenHandler); - return () => { - document.removeEventListener('keydown', hideGridFullScreenHandler); - }; - }, []); - const hideGridFullScreenHandler = (e: any) => { if (e.key === 'Escape') { setIsFullScreen(false); @@ -156,19 +179,16 @@ export const DataTable = ({ visualizations, layout, config }: any) => { columns={columns} columnVisibility={columnVisibility} /> -
+
@@ -183,20 +203,16 @@ export const DataTable = ({ visualizations, layout, config }: any) => { -
+
@@ -217,7 +233,11 @@ export const DataTable = ({ visualizations, layout, config }: any) => { ); }; -const CustomOverlay = ({ children }: { children: any }) => { +const CustomOverlay = ({ + children, +}: { + children: ReactChild | ReactChild[] | ReactChildren | ReactChildren[]; +}) => { return (
void; selectedRowDensity: any; - selectDensityHandler: (v: any) => void; - columnVisiblityHandler: (visible: boolean, feild: any) => void; + selectDensityHandler: (v: RowConfig) => void; + columnVisiblityHandler: (visible: boolean, field: string) => void; columns: any; columnVisibility: any; }) => { return ( - <> - - - - - - - - - setIsFullScreenHandler(true)} - > - Full screen - - - {isFullScreen && ( - setIsFullScreenHandler(false)} - style={{ position: 'absolute', right: 20, cursor: 'pointer', top: 20 }} - /> - )} - - + + + + + + + + + setIsFullScreenHandler(true)} + > + Full screen + + + {isFullScreen && ( + setIsFullScreenHandler(false)} + style={{ position: 'absolute', right: 20, cursor: 'pointer', top: 20 }} + /> + )} + ); }; @@ -300,14 +318,14 @@ const GridFooter = ({ pageCount, }: { onPageSizeChanged: (val: number) => void; - goToPage: (val: number) => void; + goToPage: ({ selected }: { selected: number }) => void; pageSize: number; activePage: number; pageCount: number; }) => { return ( } forcePage={activePage} onPageChange={goToPage} - pageRangeDisplayed={5} + pageRangeDisplayed={GRID_PAGE_RANGE_DSIPLAY} pageCount={pageCount} previousLabel={} renderOnZeroPageCount={null} @@ -341,10 +359,9 @@ const DensityPopover = ({ selectedDensity, }: { selectedDensity: any; - selectDensityHandler: (data: any) => void; + selectDensityHandler: (data: RowConfig) => void; }) => { - const [isPopoverOpen, setIsPopoverOpen] = useState(false); - + const [isPopoverOpen, setIsPopoverOpen] = useState(false); const onButtonClick = () => setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen); const closePopover = () => setIsPopoverOpen(false); @@ -360,16 +377,10 @@ const DensityPopover = ({ ); - const rowDensities = [ - { icon: 'tableDensityExpanded', height: 60, selected: false }, - { icon: 'tableDensityNormal', height: 40, selected: true }, - { icon: 'tableDensityCompact', height: 30, selected: false }, - ]; - return ( - {rowDensities.map((i: any, index: number) => ( + {ROW_DENSITIES.map((i: RowConfig, index: number) => ( selectDensityHandler(i)} @@ -391,9 +402,9 @@ const ColumnVisiblityPopover = ({ }: { columns: any; columnVisibility: any; - columnVisiblityHandler: (visible: boolean, feild: any) => void; + columnVisiblityHandler: (visible: boolean, field: string) => void; }) => { - const [isPopoverOpen, setIsPopoverOpen] = useState(false); + const [isPopoverOpen, setIsPopoverOpen] = useState(false); const onButtonClick = () => setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen); const closePopover = () => setIsPopoverOpen(false); @@ -411,7 +422,11 @@ const ColumnVisiblityPopover = ({ return ( - + {columns.map((i: any, index: number) => { return ( @@ -438,7 +453,7 @@ const PageSizePopover = ({ onPageSizeChanged: (size: number) => void; pageSize: number; }) => { - const [isPopoverOpen, setIsPopoverOpen] = useState(false); + const [isPopoverOpen, setIsPopoverOpen] = useState(false); const onButtonClick = () => setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen); const closePopover = () => setIsPopoverOpen(false); @@ -456,10 +471,8 @@ const PageSizePopover = ({ ); - const sizes = [10, 50, 100]; - const items = () => { - return sizes.map((i) => ( + return GRID_PAGE_SIZES.map((i: number) => ( Date: Thu, 23 Jun 2022 14:51:35 +0000 Subject: [PATCH 24/40] grid height issue:fixed Signed-off-by: Ramneet Chopra --- .../common/constants/data_table.ts | 2 - .../__snapshots__/data_table.test.tsx.snap | 147 +++++++++--------- .../charts/data_table/data_table.tsx | 52 +++---- 3 files changed, 94 insertions(+), 107 deletions(-) diff --git a/dashboards-observability/common/constants/data_table.ts b/dashboards-observability/common/constants/data_table.ts index 6d99e43ca..a5dc820ea 100644 --- a/dashboards-observability/common/constants/data_table.ts +++ b/dashboards-observability/common/constants/data_table.ts @@ -4,8 +4,6 @@ */ export const GRID_HEADER_COLUMN_MAX_WIDTH = '150px'; -export const GRID_HEIGHT = '460px'; -export const GRID_HEIGHT_FULLSCREEN = '500px'; export const GRID_PAGE_RANGE_DSIPLAY = 5; export const COLUMN_DEFAULT_MIN_WIDTH = 100; export const GRID_PAGE_SIZES = [10, 50, 100]; diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap index e5cb1629e..d7b1eef53 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap @@ -44,87 +44,80 @@ exports[`Data table component Renders data table component 1`] = ` } setIsFullScreenHandler={[Function]} /> -
- -
+ } + domLayout="autoHeight" + pagination={true} + 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={40} + suppressPaginationPanel={true} + /> { columns={columns} columnVisibility={columnVisibility} /> -
- -
+ { -
- -
+ Date: Fri, 24 Jun 2022 09:52:46 +0000 Subject: [PATCH 25/40] column height, value getter for type double Signed-off-by: Ramneet Chopra --- .../common/constants/data_table.ts | 8 +++-- .../__snapshots__/data_table.test.tsx.snap | 12 +++---- .../charts/__tests__/data_table.test.tsx | 2 +- .../charts/data_table/data_table.tsx | 31 ++++++++++++++----- 4 files changed, 34 insertions(+), 19 deletions(-) diff --git a/dashboards-observability/common/constants/data_table.ts b/dashboards-observability/common/constants/data_table.ts index a5dc820ea..40c863367 100644 --- a/dashboards-observability/common/constants/data_table.ts +++ b/dashboards-observability/common/constants/data_table.ts @@ -8,7 +8,9 @@ export const GRID_PAGE_RANGE_DSIPLAY = 5; export const COLUMN_DEFAULT_MIN_WIDTH = 100; export const GRID_PAGE_SIZES = [10, 50, 100]; export const ROW_DENSITIES = [ - { icon: 'tableDensityExpanded', height: 60, selected: false }, - { icon: 'tableDensityNormal', height: 40, selected: true }, - { icon: 'tableDensityCompact', height: 30, selected: false }, + { 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/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap index d7b1eef53..d9be0e68b 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap @@ -16,7 +16,6 @@ exports[`Data table component Renders data table component 1`] = ` }, "field": "count()", "headerName": "count()", - "id": "count()", "lockVisible": true, }, Object { @@ -28,7 +27,6 @@ exports[`Data table component Renders data table component 1`] = ` }, "field": "tags", "headerName": "tags", - "id": "tags", "lockVisible": true, }, ] @@ -37,8 +35,8 @@ exports[`Data table component Renders data table component 1`] = ` selectDensityHandler={[Function]} selectedRowDensity={ Object { - "height": 40, - "icon": "tableDensityNormal", + "height": 35, + "icon": "tableDensityCompact", "selected": true, } } @@ -57,7 +55,6 @@ exports[`Data table component Renders data table component 1`] = ` }, "field": "count()", "headerName": "count()", - "id": "count()", "lockVisible": true, }, Object { @@ -69,7 +66,6 @@ exports[`Data table component Renders data table component 1`] = ` }, "field": "tags", "headerName": "tags", - "id": "tags", "lockVisible": true, }, ] @@ -78,6 +74,7 @@ exports[`Data table component Renders data table component 1`] = ` Object { "filter": true, "flex": 1, + "headerHeight": 400, "minWidth": 100, "resizable": true, "sortable": true, @@ -85,6 +82,7 @@ exports[`Data table component Renders data table component 1`] = ` } } domLayout="autoHeight" + onGridReady={[Function]} pagination={true} paginationPageSize={10} rowData={ @@ -115,7 +113,7 @@ exports[`Data table component Renders data table component 1`] = ` }, ] } - rowHeight={40} + rowHeight={35} suppressPaginationPanel={true} /> { it('Renders data table component', async () => { const gridWrapper = shallow(); const agGridReactObj = gridWrapper.find(AgGridReact); - agGridReactObj.simulate('gridReady') + agGridReactObj.simulate('gridReady'); expect(agGridReactObj).toBeTruthy(); await waitFor(() => { expect(gridWrapper).toMatchSnapshot(); diff --git a/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx b/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx index c0a94bfaf..0b76d6d52 100644 --- a/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx +++ b/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx @@ -46,6 +46,7 @@ import { COLUMN_DEFAULT_MIN_WIDTH, ROW_DENSITIES, GRID_PAGE_SIZES, + HEADER_HEIGHT, } from '../../../../../common/constants/data_table'; interface RowConfig { @@ -54,6 +55,10 @@ interface RowConfig { selected: boolean; } +const doubleValueGetter = (params) => { + return params.data[params.column.colId]; +}; + export const DataTable = ({ visualizations, layout, config }: any) => { const { data: vizData, @@ -70,18 +75,21 @@ export const DataTable = ({ visualizations, layout, config }: any) => { // rows and columns const raw_data = [...jsonData]; + const columns = fields.map((field: any) => { return { - headerName: field.name, - field: field.name, - id: field.name, - colId: field.name, lockVisible: true, columnsMenuParams: { suppressColumnFilter: true, suppressColumnSelectAll: true, suppressColumnExpandAll: true, }, + headerName: field.name, + field: field.name, + colId: field.name, + ...(field.type === 'double' && { + valueGetter: doubleValueGetter, + }), }; }); @@ -92,8 +100,8 @@ export const DataTable = ({ visualizations, layout, config }: any) => { const [columnVisibility, setColumnVisibility] = useState([]); const [isFullScreen, setIsFullScreen] = useState(false); const [selectedRowDensity, setSelectedRowDensity] = useState({ - icon: 'tableDensityNormal', - height: 40, + icon: 'tableDensityCompact', + height: 35, selected: true, }); // pagination @@ -106,8 +114,9 @@ export const DataTable = ({ visualizations, layout, config }: any) => { resizable: true, filter: true, flex: 1, - minWidth: COLUMN_DEFAULT_MIN_WIDTH, suppressMenu: true, + minWidth: COLUMN_DEFAULT_MIN_WIDTH, + headerHeight: 400, }; }, []); @@ -182,12 +191,15 @@ export const DataTable = ({ visualizations, layout, config }: any) => { rowData={raw_data} columnDefs={columns} defaultColDef={defaultColDef} - domLayout="autoHeight" + domLayout={'autoHeight'} animateRows pagination paginationPageSize={pageSize} suppressPaginationPanel rowHeight={selectedRowDensity.height} + onGridReady={() => { + gridRef?.current?.api.setHeaderHeight(HEADER_HEIGHT); + }} /> { paginationPageSize={pageSize} suppressPaginationPanel rowHeight={selectedRowDensity.height} + onGridReady={() => { + gridRefFullScreen?.current?.api.setHeaderHeight(HEADER_HEIGHT); + }} /> From 5a231a4b799449e793f212370b1031f0543c10a4 Mon Sep 17 00:00:00 2001 From: Ramneet Chopra Date: Fri, 24 Jun 2022 11:37:46 +0000 Subject: [PATCH 26/40] data_table elements moved to separate Signed-off-by: Ramneet Chopra --- .../common/constants/data_table.ts | 2 +- .../opensearch_dashboards.json | 4 +- dashboards-observability/package.json | 2 +- .../charts/data_table/data_table.tsx | 296 +----------------- .../charts/data_table/data_table_footer.tsx | 127 ++++++++ .../charts/data_table/data_table_header.tsx | 195 ++++++++++++ 6 files changed, 331 insertions(+), 295 deletions(-) create mode 100644 dashboards-observability/public/components/visualizations/charts/data_table/data_table_footer.tsx create mode 100644 dashboards-observability/public/components/visualizations/charts/data_table/data_table_header.tsx diff --git a/dashboards-observability/common/constants/data_table.ts b/dashboards-observability/common/constants/data_table.ts index 40c863367..bbca653a7 100644 --- a/dashboards-observability/common/constants/data_table.ts +++ b/dashboards-observability/common/constants/data_table.ts @@ -4,7 +4,7 @@ */ export const GRID_HEADER_COLUMN_MAX_WIDTH = '150px'; -export const GRID_PAGE_RANGE_DSIPLAY = 5; +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 = [ diff --git a/dashboards-observability/opensearch_dashboards.json b/dashboards-observability/opensearch_dashboards.json index b8d9645c6..2b9ffd295 100644 --- a/dashboards-observability/opensearch_dashboards.json +++ b/dashboards-observability/opensearch_dashboards.json @@ -1,7 +1,7 @@ { "id": "observabilityDashboards", - "version": "2.1.0.0", - "opensearchDashboardsVersion": "2.1.0", + "version": "2.0.0.0", + "opensearchDashboardsVersion": "2.0.0", "server": true, "ui": true, "requiredPlugins": [ diff --git a/dashboards-observability/package.json b/dashboards-observability/package.json index d068e60c4..1eef65025 100644 --- a/dashboards-observability/package.json +++ b/dashboards-observability/package.json @@ -1,6 +1,6 @@ { "name": "observability-dashboards", - "version": "2.1.0.0", + "version": "2.0.0.0", "main": "index.ts", "license": "Apache-2.0", "scripts": { diff --git a/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx b/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx index 0b76d6d52..f68900359 100644 --- a/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx +++ b/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx @@ -9,24 +9,12 @@ import React, { useCallback, useRef, useEffect, - ReactChildren, - ReactChild, } from 'react'; import { - EuiButtonIcon, EuiFlexGroup, EuiFlexItem, - EuiButtonEmpty, - EuiPopover, - EuiSwitch, - EuiIcon, - EuiContextMenuPanel, - EuiContextMenuItem, } from '@elastic/eui'; -// pagination -import ReactPaginate from 'react-paginate'; - // ag-data-grid import { AgGridReact } from 'ag-grid-react'; import 'ag-grid-community/dist/styles/ag-grid.css'; @@ -36,24 +24,16 @@ import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css'; // styles import './data_table.scss'; -// theme -import { uiSettingsService } from '../../../../../common/utils'; +// grid elements +import { CustomOverlay, RowConfigType, GridHeader, } from "./data_table_header" +import { GridFooter } from "./data_table_footer" // constants import { - GRID_HEADER_COLUMN_MAX_WIDTH, - GRID_PAGE_RANGE_DSIPLAY, COLUMN_DEFAULT_MIN_WIDTH, - ROW_DENSITIES, - GRID_PAGE_SIZES, HEADER_HEIGHT, } from '../../../../../common/constants/data_table'; -interface RowConfig { - icon: string; - height: number; - selected: boolean; -} const doubleValueGetter = (params) => { return params.data[params.column.colId]; @@ -99,7 +79,7 @@ export const DataTable = ({ visualizations, layout, config }: any) => { const [pageSize, setPageSize] = useState(10); const [columnVisibility, setColumnVisibility] = useState([]); const [isFullScreen, setIsFullScreen] = useState(false); - const [selectedRowDensity, setSelectedRowDensity] = useState({ + const [selectedRowDensity, setSelectedRowDensity] = useState({ icon: 'tableDensityCompact', height: 35, selected: true, @@ -134,7 +114,7 @@ export const DataTable = ({ visualizations, layout, config }: any) => { [isFullScreen] ); - const selectDensityHandler = useCallback((value: RowConfig) => { + const selectDensityHandler = useCallback((value: RowConfigType) => { setSelectedRowDensity({ ...value }); gridRef.current.api.forEachNode((rowNode) => { if (rowNode.data) { @@ -244,270 +224,4 @@ export const DataTable = ({ visualizations, layout, config }: any) => { ); }; -const CustomOverlay = ({ - children, -}: { - children: ReactChild | ReactChild[] | ReactChildren | ReactChildren[]; -}) => { - return ( -
- {children} -
- ); -}; - -const GridHeader = ({ - isFullScreen, - setIsFullScreenHandler, - selectedRowDensity, - selectDensityHandler, - columnVisiblityHandler, - columns, - columnVisibility, -}: { - isFullScreen: boolean; - setIsFullScreenHandler: (v: boolean) => void; - selectedRowDensity: any; - selectDensityHandler: (v: RowConfig) => void; - columnVisiblityHandler: (visible: boolean, field: string) => void; - columns: any; - columnVisibility: any; -}) => { - return ( - - - - - - - - - setIsFullScreenHandler(true)} - > - Full screen - - - {isFullScreen && ( - setIsFullScreenHandler(false)} - style={{ position: 'absolute', right: 20, cursor: 'pointer', top: 20 }} - /> - )} - - ); -}; -const GridFooter = ({ - onPageSizeChanged, - pageSize, - activePage, - goToPage, - pageCount, -}: { - onPageSizeChanged: (val: number) => void; - goToPage: ({ selected }: { selected: number }) => void; - pageSize: number; - activePage: number; - pageCount: number; -}) => { - return ( - - - - - - } - forcePage={activePage} - onPageChange={goToPage} - pageRangeDisplayed={GRID_PAGE_RANGE_DSIPLAY} - pageCount={pageCount} - previousLabel={} - renderOnZeroPageCount={null} - /> - - - ); -}; - -const DensityPopover = ({ - selectDensityHandler, - selectedDensity, -}: { - selectedDensity: any; - selectDensityHandler: (data: RowConfig) => void; -}) => { - const [isPopoverOpen, setIsPopoverOpen] = useState(false); - const onButtonClick = () => setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen); - const closePopover = () => setIsPopoverOpen(false); - - const button = ( - - Density - - ); - - return ( - - - {ROW_DENSITIES.map((i: RowConfig, index: number) => ( - - selectDensityHandler(i)} - display={selectedDensity.icon === i.icon ? 'fill' : 'base'} - iconType={i.icon} - aria-label="Next" - /> - - ))} - - - ); -}; - -const ColumnVisiblityPopover = ({ - columnVisibility, - columns, - columnVisiblityHandler, -}: { - columns: any; - columnVisibility: any; - columnVisiblityHandler: (visible: boolean, field: string) => void; -}) => { - const [isPopoverOpen, setIsPopoverOpen] = useState(false); - const onButtonClick = () => setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen); - const closePopover = () => setIsPopoverOpen(false); - - const button = ( - - Columns - - ); - - return ( - - - {columns.map((i: any, index: number) => { - return ( - - { - columnVisiblityHandler(e.target.checked, i.field); - }} - compressed - /> - - ); - })} - - - ); -}; - -const PageSizePopover = ({ - onPageSizeChanged, - pageSize, -}: { - onPageSizeChanged: (size: number) => void; - pageSize: number; -}) => { - const [isPopoverOpen, setIsPopoverOpen] = useState(false); - const onButtonClick = () => setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen); - const closePopover = () => setIsPopoverOpen(false); - - const button = ( - - Rows per page: {pageSize} - - ); - - const items = () => { - return GRID_PAGE_SIZES.map((i: number) => ( - { - onPageSizeChanged(i); - closePopover(); - }} - > - {i} rows - - )); - }; - - return ( - - - - ); -}; diff --git a/dashboards-observability/public/components/visualizations/charts/data_table/data_table_footer.tsx b/dashboards-observability/public/components/visualizations/charts/data_table/data_table_footer.tsx new file mode 100644 index 000000000..fab90e5ad --- /dev/null +++ b/dashboards-observability/public/components/visualizations/charts/data_table/data_table_footer.tsx @@ -0,0 +1,127 @@ +/* + * 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/data_table'; + + +export const GridFooter = ({ + onPageSizeChanged, + pageSize, + activePage, + goToPage, + pageCount, +}: { + onPageSizeChanged: (val: number) => void; + goToPage: ({ selected }: { selected: number }) => void; + pageSize: number; + activePage: number; + pageCount: number; +}) => { + return ( + + + + + + } + forcePage={activePage} + onPageChange={goToPage} + pageRangeDisplayed={GRID_PAGE_RANGE_DISPLAY} + pageCount={pageCount} + previousLabel={} + renderOnZeroPageCount={null} + /> + + + ); +}; + +export const PageSizePopover = ({ + onPageSizeChanged, + pageSize, +}: { + onPageSizeChanged: (size: number) => void; + pageSize: number; +}) => { + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + const onButtonClick = () => setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen); + const closePopover = () => setIsPopoverOpen(false); + + const button = ( + + Rows per page: {pageSize} + + ); + + const items = () => { + return GRID_PAGE_SIZES.map((i: number) => ( + { + onPageSizeChanged(i); + closePopover(); + }} + > + {i} rows + + )); + }; + + return ( + + + + ); +}; diff --git a/dashboards-observability/public/components/visualizations/charts/data_table/data_table_header.tsx b/dashboards-observability/public/components/visualizations/charts/data_table/data_table_header.tsx new file mode 100644 index 000000000..05d1ad1ff --- /dev/null +++ b/dashboards-observability/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/data_table'; + +export interface RowConfigType { + icon: string; + height: number; + selected: boolean; +} + +export const CustomOverlay = ({ + children, +}: { + children: ReactChild | ReactChild[] | ReactChildren | ReactChildren[]; +}) => { + return ( +
+ {children} +
+ ); +}; + +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 ( + + + + + + + + + setIsFullScreenHandler(true)} + > + Full screen + + + {isFullScreen && ( + setIsFullScreenHandler(false)} + style={{ position: 'absolute', right: 20, cursor: 'pointer', top: 20 }} + /> + )} + + ); +}; + +export const DensityPopover = ({ + selectDensityHandler, + selectedDensity, +}: { + selectedDensity: any; + selectDensityHandler: (data: RowConfigType) => void; +}) => { + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + const onButtonClick = () => setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen); + const closePopover = () => setIsPopoverOpen(false); + + const button = ( + + Density + + ); + + return ( + + + {ROW_DENSITIES.map((i: RowConfigType, index: number) => ( + + selectDensityHandler(i)} + display={selectedDensity.icon === i.icon ? 'fill' : 'base'} + iconType={i.icon} + aria-label="Next" + /> + + ))} + + + ); +}; + +export const ColumnVisiblityPopover = ({ + columnVisibility, + columns, + columnVisiblityHandler, +}: { + columns: any; + columnVisibility: any; + columnVisiblityHandler: (visible: boolean, field: string) => void; +}) => { + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + const onButtonClick = () => setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen); + const closePopover = () => setIsPopoverOpen(false); + + const button = ( + + Columns + + ); + + return ( + + + {columns.map((i: any, index: number) => { + return ( + + { + columnVisiblityHandler(e.target.checked, i.field); + }} + compressed + /> + + ); + })} + + + ); +}; From 6daacf35c8e199402ab266deca6597e8165ad1dd Mon Sep 17 00:00:00 2001 From: Ramneet Chopra Date: Fri, 24 Jun 2022 13:13:04 +0000 Subject: [PATCH 27/40] footer components Signed-off-by: Ramneet Chopra --- .../visualizations/charts/data_table/data_table_footer.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/dashboards-observability/public/components/visualizations/charts/data_table/data_table_footer.tsx b/dashboards-observability/public/components/visualizations/charts/data_table/data_table_footer.tsx index fab90e5ad..5808f0892 100644 --- a/dashboards-observability/public/components/visualizations/charts/data_table/data_table_footer.tsx +++ b/dashboards-observability/public/components/visualizations/charts/data_table/data_table_footer.tsx @@ -26,7 +26,6 @@ import { GRID_PAGE_SIZES, } from '../../../../../common/constants/data_table'; - export const GridFooter = ({ onPageSizeChanged, pageSize, From c7c5a7c60413223130307523ed2225dfb6737e66 Mon Sep 17 00:00:00 2001 From: Ramneet Chopra Date: Fri, 24 Jun 2022 13:17:17 +0000 Subject: [PATCH 28/40] cypress test cases for table view Signed-off-by: Ramneet Chopra --- .../integration/1_event_analytics.spec.js | 714 +++++------------- .../.cypress/utils/event_constants.js | 31 - .../opensearch_dashboards.json | 4 +- dashboards-observability/package.json | 2 +- 4 files changed, 204 insertions(+), 547 deletions(-) diff --git a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js index 6655200b1..6e6d06d4e 100644 --- a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js +++ b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js @@ -18,34 +18,44 @@ import { landOnEventExplorer, landOnEventVisualizations, landOnPanels, - renderTreeMapchart, - renderPieChart } from '../utils/event_constants'; import { supressResizeObserverIssue } from '../utils/constants'; 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('[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( + '.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('.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('.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`); @@ -80,11 +90,14 @@ describe('Search a query on event home', () => { 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.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.wait(delay); cy.url().should('contain', '#/event_analytics/explorer'); @@ -101,16 +114,26 @@ describe('Open flyout for a data row to see details', () => { 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(); cy.get('.observability-flyout').should('exist'); - cy.get('.observability-flyout .osdDocViewer .euiTabs span.euiTab__content').contains('JSON').click(); - cy.get('.observability-flyout .osdDocViewer .euiTabs span.euiTab__content').contains('Traces').click(); - cy.get('.observability-flyout .osdDocViewer .euiTabs span.euiTab__content').contains('Table').click(); + cy.get('.observability-flyout .osdDocViewer .euiTabs span.euiTab__content') + .contains('JSON') + .click(); + cy.get('.observability-flyout .osdDocViewer .euiTabs span.euiTab__content') + .contains('Traces') + .click(); + cy.get('.observability-flyout .osdDocViewer .euiTabs span.euiTab__content') + .contains('Table') + .click(); }); it('Should be able to see srrounding docs', () => { cy.get('[data-test-subj="docTable"] tbody tr button.euiButtonIcon').first().click(); cy.get('.observability-flyout').should('exist'); - cy.get('.observability-flyout span.euiButton__text').contains('View surrounding events').click(); - cy.get('.observability-flyout #surroundingFyout').contains('View surrounding events').should('exist'); + cy.get('.observability-flyout span.euiButton__text') + .contains('View surrounding events') + .click(); + cy.get('.observability-flyout #surroundingFyout') + .contains('View surrounding events') + .should('exist'); }); }); @@ -277,7 +300,9 @@ describe('Saves a query on explorer page', () => { cy.get('button[id="main-content-vis"]').contains('Visualizations').click(); cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click(); cy.wait(delay * 2); - cy.get('[data-test-subj="eventExplorer__querySaveComboBox"] [data-test-subj="comboBoxToggleListButton"]').click(); + cy.get( + '[data-test-subj="eventExplorer__querySaveComboBox"] [data-test-subj="comboBoxToggleListButton"]' + ).click(); cy.get('[data-test-subj="eventExplorer__querySaveName"]').type(SAVE_QUERY2); cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click(); cy.wait(delay * 2); @@ -307,11 +332,15 @@ describe('Saves a query on explorer page', () => { cy.get('button[id="main-content-vis"]').contains('Visualizations').click(); cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click(); cy.wait(delay * 2); - cy.get('[data-test-subj="eventExplorer__querySaveComboBox"] [data-test-subj="comboBoxToggleListButton"]').click(); + cy.get( + '[data-test-subj="eventExplorer__querySaveComboBox"] [data-test-subj="comboBoxToggleListButton"]' + ).click(); cy.get('[data-test-subj="eventExplorer__querySaveName"]').type(SAVE_QUERY3); cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').type(TESTING_PANEL); cy.get(`input[value="${TESTING_PANEL}"]`).click(); - cy.get('[data-test-subj="eventExplorer__querySaveComboBox"] [data-test-subj="comboBoxToggleListButton"]').click(); + cy.get( + '[data-test-subj="eventExplorer__querySaveComboBox"] [data-test-subj="comboBoxToggleListButton"]' + ).click(); cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click(); cy.wait(delay); @@ -330,8 +359,11 @@ describe('Override timestamp for an index', () => { 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'); + .contains('Default Timestamp') + .should('exist'); + cy.get( + '[data-attr-field="timestamp"] [data-test-subj="eventFields__default-timestamp-mark"' + ).should('not.exist'); }); }); @@ -394,20 +426,40 @@ describe('Click to view field insights', () => { 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'); + 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'); + 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'); }); }); @@ -494,7 +546,9 @@ describe('Renders noresult chart', () => { }); it('It should render no result when there is no data', () => { - cy.get('[data-test-subj="vizWorkspace__noData"] p').contains('No results found').should('exist'); + cy.get('[data-test-subj="vizWorkspace__noData"] p') + .contains('No results found') + .should('exist'); }); }); @@ -505,7 +559,9 @@ describe('Renders bar charts', () => { 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.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(); @@ -522,12 +578,16 @@ describe('Renders bar charts', () => { 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'); + 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.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(); @@ -544,7 +604,9 @@ describe('Renders bar charts', () => { 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'); + cy.get( + 'g.yaxislayer-above > g.ytick text[data-unformatted|="artifacts.opensearch.org"]' + ).should('exist'); }); }); @@ -555,7 +617,9 @@ describe('Renders line charts', () => { 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="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(); @@ -569,7 +633,9 @@ describe('Renders line charts', () => { 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'); + cy.get( + 'g.xaxislayer-above > g.xtick text[data-unformatted|="artifacts.opensearch.org"]' + ).should('exist'); }); }); @@ -580,7 +646,9 @@ describe('Renders pie charts', () => { 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="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'); @@ -594,7 +662,9 @@ describe('Renders heatmap chart', () => { 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="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(); @@ -618,13 +688,17 @@ describe('Renders markdown chart', () => { it('Renders markdown chart with test title', () => { 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="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'); + cy.get('[data-test-subj="workspace__viz_markdown"] h2') + .contains('testing title') + .should('exist'); }); }); @@ -652,15 +726,25 @@ describe('Renders chart and verify Toast message if X-axis and Y-axis values are .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="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.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('#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'); + 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', () => { @@ -669,492 +753,96 @@ describe('Renders chart and verify Toast message if X-axis and Y-axis values are .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="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.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 .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'); + cy.get('[data-test-subj="euiToastHeader"]') + .contains('Invalid value options configuration selected.') + .should('exist'); }); }); -describe('Renders Tree Map', () => { +describe('Render Table View', () => { beforeEach(() => { landOnEventVisualizations(); + querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM); + cy.get('[data-test-subj="workspace__dataTableViewSwitch"]').click(); }); - it('Renders Tree Map', () => { - renderTreeMapchart(); - cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .euiButton__text').eq(2).click(); - cy.get('path.surface').should('have.length', 176); - }); - - it('Renders Tree Map, add value parameters and verify Reset button click is working', () => { - renderTreeMapchart(); - cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .euiButton__text').eq(2).click(); - cy.get('[data-test-subj="visualizeEditorResetButton"]').click(); - cy.get('#configPanel__panelOptions .euiFieldText').should('have.value', ''); - cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').should('have.value', ''); - cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(1).should('have.value', ''); - cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(2).should('have.value', ''); - cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(3).should('have.value', ''); - }); - - it('Renders Tree Map, Save and Delete Visualization', () => { - renderTreeMapchart(); - cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .euiButton__text').eq(2).click(); - saveVisualizationAndVerify(); - cy.wait(delay * 4); - deleteVisualization(); - }); - - it('Render Tree Map chart and verify color theme under Chart styles options', () => { - renderTreeMapchart(); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Color Theme').should('exist'); - cy.get('.euiSuperSelectControl').contains('Default').click(); - cy.get('.euiContextMenuItem__text .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('.euiButton__text').contains('Preview').should('exist').click(); - cy.get('path[style*="rgb(29, 30, 36)"]').eq(0).should('exist'); - cy.get('.euiSuperSelectControl').click(); - cy.get('.euiColorPalettePicker__itemTitle').eq(1).contains('Reds').click(); - cy.get('.euiButton__text').contains('Preview').should('exist').click(); - cy.get('path[style*="rgb(68, 68, 68)"]').eq(0).should('exist'); - }); - - it('Traverse between root and parent node in Tree Map chart', () => { - querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].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('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(0).click(); - cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(1).click(); - cy.get('.euiComboBoxOption__content').eq(2).click(); - cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(2).click(); - cy.get('.euiComboBoxOption__content').eq(1).click(); - cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(3).click(); - cy.get('.euiComboBoxOption__content').eq(0).click(); - cy.wait(delay); - cy.get('.euiSuperSelectControl').click(); - cy.get('.euiColorPalettePicker__itemTitle').eq(1).contains('Reds').click(); - cy.get('.euiButton__text').contains('Preview').should('exist').click(); - cy.get('.slicetext[data-unformatted="US"]').click({ force: true }); - cy.wait(delay); - cy.get('.slicetext[data-unformatted*="Cleveland"]').click({ force: true }); - cy.get('text.slicetext').contains('100% of entry').should('exist'); - cy.get('.pathbar.cursor-pointer .slicetext[data-unformatted="US"]').click({ force: true }); - cy.wait(delay); - cy.get('.pathbar.cursor-pointer .slicetext[data-unformatted=" "]').click({ force: true }); + 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('"No results found" message when user fails to select proper fields', () => { - querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].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('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(0).click(); - cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(3).click(); - cy.get('.euiComboBoxOption__content').eq(1).click(); - cy.wait(delay); - cy.get('.euiSuperSelectControl').click(); - cy.get('.euiColorPalettePicker__itemTitle').eq(1).contains('Reds').click(); - cy.get('.euiButton__text').contains('Preview').should('exist').click(); - cy.get('.euiTextColor.euiTextColor--subdued').contains('No results found').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('Verify multicolored option under color theme', () => { - renderTreeMapchart(); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Color Theme').should('exist'); - cy.get('.euiSuperSelectControl').contains('Default').click(); - cy.get('.euiContextMenuItem__text .euiColorPalettePicker__item').eq(1).contains('Single color').click(); - cy.get('.euiFieldText.euiColorPicker__input.euiFieldText--withIcon').click(); - cy.get('[aria-label="Select #54B399 as the color"]').should('exist').click(); - cy.get('.euiButton__text').contains('Preview').click(); - cy.get('.euiSuperSelectControl').click(); - cy.get('.euiContextMenuItem__text .euiColorPalettePicker__item').eq(2).contains('Multicolored').click(); - cy.wait(delay); - cy.get('.euiFormHelpText.euiFormRow__text').eq(1).contains('Child field').should('exist'); - cy.get('.euiFieldText.euiColorPicker__input.euiFieldText--withIcon').eq(0).click(); - cy.get('[aria-label="Select #D36086 as the color"]').click(); - cy.get('.euiFormHelpText.euiFormRow__text').eq(2).contains('Parent field').should('exist'); - cy.get('.euiFieldText.euiColorPicker__input.euiFieldText--withIcon').eq(1).click(); - cy.get('[aria-label="Select #CA8EAE as the color"]').click(); - cy.get('.euiButton__text').contains('Preview').click(); - cy.get('.trace.treemap path[style*="rgb(202, 142, 174)"]').should('exist'); + 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('Parent field not available under color theme', () => { - querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].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('.euiTitle.euiTitle--xxsmall').contains('Color Theme').should('exist'); - cy.get('.euiSuperSelectControl').contains('Default').click(); - cy.get('.euiContextMenuItem__text .euiColorPalettePicker__item').eq(1).contains('Single color').click(); - cy.get('.euiFieldText.euiColorPicker__input.euiFieldText--withIcon').click(); - cy.get('[aria-label="Select #54B399 as the color"]').should('exist').click(); - cy.get('.euiButton__text').contains('Preview').click(); - cy.get('.euiSuperSelectControl').click(); - cy.get('.euiContextMenuItem__text .euiColorPalettePicker__item').eq(2).contains('Multicolored').click(); + 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('.euiFormHelpText.euiFormRow__text').eq(1).contains('Child field').should('exist'); - cy.get('.euiFieldText.euiColorPicker__input.euiFieldText--withIcon').eq(0).click(); - cy.get('[aria-label="Select #D36086 as the color"]').click(); - cy.get('.euiFormHelpText.euiFormRow__text').contains('Parent field').should('not.exist'); - cy.get('.euiButton__text').contains('Preview').click(); - cy.get('.trace.treemap path[style*="rgb(211, 96, 134)"]').should('exist'); - }) -}); - - -describe('Render line chart for value options ', () => { - beforeEach(() => { - landOnEventVisualizations(); - 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="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Line').type('{enter}') - }); - - it('Render line chart and add value Options ', () => { - cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); - cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with value adding Parameter'); - cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(1).click(); - cy.get('.euiComboBoxOption__content').eq(0).click(); - cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(2).click(); - cy.get('.euiComboBoxOption__content').eq(0).click(); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); - cy.get('.nsewdrag.drag.cursor-pointer').should('be.visible') - }); -}); - -describe('Render line chart for Legend ', () => { - beforeEach(() => { - cy.wait(2000); - landOnEventVisualizations(); - 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('Line').click(); - }); - - it('Render line 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-test-subj="visualizeEditorRenderButton"]').click({ force: true }); + cy.get('body').type('{esc}'); cy.wait(delay); - cy.get('.nsewdrag.drag.cursor-pointer').should('be.visible') - .and(chart => { - expect(chart.height()).to.be.greaterThan(200) - }) - }); - - it('Render line 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 }); - }); -}); - -describe('Render Pie chart for Legend and single color contrast change', () => { - beforeEach(() => { - landOnEventVisualizations(); - }); - - it('Render Pie chart and verify legends for Position Right and Bottom', () => { - renderPieChart(); - - it('Render Pie chart and verify legends for Show and Hidden', () => { - renderPieChart(); - 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-test-subj="visualizeEditorRenderButton"]').click({ force: true }); - }); - - it('Renders Pie chart with single color', () => { - renderPieChart(); - cy.get('.euiIEFlexWrapFix').eq(3).contains('Chart Styles').should('exist'); - cy.get('[data-test-subj="comboBoxInput"]').eq(3).click(); - cy.get('[name="Pie"]').click(); - cy.get('.euiSuperSelectControl').click(); - cy.get('.euiContextMenuItem.euiSuperSelect__item.euiSuperSelect__item--hasDividers').eq(1).click(); - cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .euiButton__text').eq(2).click(); - cy.wait(delay); - }); - }); -}) -describe('Renders heatmap chart for Chart Style', () => { - beforeEach(() => { - landOnEventVisualizations(); - 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(); - }); - - it('Renders heatmap chart with default Color Mode and Scheme', () => { - cy.get('.ewdrag.drag.cursor-ew-resize').should('be.visible'); - cy.get('g.g-gtitle text[data-unformatted|="avg(bytes)"]').should('exist'); - }); - - it('Renders heatmap chart with default Chart Style and Z-axis count()', () => { - cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').click(); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('count()').click(); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click(); - cy.get('.ewdrag.drag.cursor-ew-resize').should('be.visible'); - cy.get('g.g-gtitle text[data-unformatted|="count()"]').should('exist'); - }); - - it('Renders heatmap chart with default Chart Style and Z-axis avg(bytes)', () => { - cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').click(); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('avg(bytes)').click(); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click(); - cy.get('.ewdrag.drag.cursor-ew-resize').should('be.visible'); - cy.get('g.g-gtitle text[data-unformatted|="avg(bytes)"]').should('exist'); - }); - - it('Renders heatmap chart and Verify if Color Mode is Spectrum then by default Scheme is Reds', () => { - cy.get('[data-test-subj="comboBoxInput"]').eq(2).should('contain', 'Spectrum'); - cy.get('[aria-haspopup="true"]').eq(1).should('contain', 'Reds'); - cy.get('stop[stop-color="rgb(178, 10, 28)"]').should('exist'); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click(); - }); - - it('Renders heatmap chart and Verify if Color Mode is opacity then by default Scheme is Color', () => { - cy.get('[data-test-subj="comboBoxInput"]').eq(2).click(); - cy.get('.euiComboBoxOption__content').contains('opacity').click(); - cy.get('.euiTitle.euiTitle--xxsmall').eq(2).should('contain', 'Color'); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click(); - cy.get('stop[stop-color="rgb(19, 19, 19)"]').should('exist'); - }); - - it('Renders heatmap chart for Color Mode Spectrum and Change color of Scheme', () => { - cy.get('[aria-haspopup="true"]').eq(1).click(); - cy.get('.euiColorPalettePicker__itemTitle').contains('Red-Blue').click(); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click(); - cy.get('stop[stop-color="rgb(5, 10, 172)"]').should('exist'); - cy.get('stop[stop-color="rgb(178, 10, 28)"]').should('exist'); - }); - - it('Renders heatmap chart for Color Mode opacity and Change color', () => { - cy.get('[data-test-subj="comboBoxInput"]').eq(2).click(); - cy.get('.euiComboBoxOption__content').contains('opacity').click(); - cy.get('[data-test-subj="euiColorPickerAnchor"]').click(); - cy.get('.euiTitle.euiTitle--xxsmall').eq(2).should('contain', 'Color'); - cy.get('[aria-label="Select #D6BF57 as the color"]').click(); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click(); - cy.get('stop[stop-color="rgb(255, 255, 214)"]').should('exist'); - cy.get('stop[stop-color="rgb(214, 191, 87)"]').should('exist'); - }); -}) - - -describe('Render line chart for Chart Styles ', () => { - beforeEach(() => { - landOnEventVisualizations(); - 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="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Line').type('{enter}') - }); - - it('Render line chart and Verify Chart Style of Lines Mode with Smooth Interpolation ', () => { - cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); - cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with Line Mode and Smooth Interpolation'); - cy.get('[data-text="Lines"]').should('have.text', 'Lines'); - cy.get('[data-text="Lines"] [data-test-subj="lines"]').should('have.attr', 'checked'); - cy.get('[data-text="Smooth"]').should('have.text', 'Smooth'); - cy.get('[data-text="Smooth"] [data-test-subj="spline"]').should('have.attr', 'checked'); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); - }); - - it('Render line chart and Verify Chart Style of Lines Mode with Smooth Interpolation with higher Line width and Fill Opacity ', () => { - cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); - cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with Line Mode and Smooth Interpolation'); - cy.get('[data-text="Lines"]').should('have.text', 'Lines'); - cy.get('[data-text="Lines"] [data-test-subj="lines"]').should('have.attr', 'checked'); - cy.get('[data-text="Smooth"]').should('have.text', 'Smooth'); - cy.get('[data-text="Smooth"] [data-test-subj="spline"]').should('have.attr', 'checked'); - cy.get('input[type="range"]').eq(0) - .then($el => $el[0].stepUp(4)) - .trigger('change') - cy.get('.euiRangeSlider').eq(0).should('have.value', 6) - cy.get('input[type="range"]').eq(1) - .then($el => $el[0].stepUp(40)) - .trigger('change') - cy.get('.euiRangeSlider').eq(1).should('have.value', 80) - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); }); - it('Render line chart and Verify Chart Style of Lines Mode with Linear Interpolation ', () => { - cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); - cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with Line Mode and Linear Interpolation'); - cy.get('[data-text="Lines"]').should('have.text', 'Lines'); - cy.get('[data-text="Lines"] [data-test-subj="lines"]').should('have.attr', 'checked'); - cy.get('[data-text="Linear"]').should('have.text', 'Linear').click(); - cy.get('[data-text="Linear"]').should('have.text', 'Linear'); - cy.get('[data-text="Linear"] [data-test-subj="linear"]').should('not.have.attr', 'checked'); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); + 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('Render line chart and Verify Chart Style of Lines Mode with Step before Interpolation ', () => { - cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); - cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with Line Mode and Step before Interpolation'); - cy.get('[data-text="Lines"]').should('have.text', 'Lines'); - cy.get('[data-text="Lines"] [data-test-subj="lines"]').should('have.attr', 'checked'); - cy.get('[data-text="Step before"]').should('have.text', 'Step before').click(); - cy.get('[data-text="Step before"] [data-test-subj="Step before"]').should('not.have.attr', 'checked'); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); + 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('Render line chart and Verify Chart Style of Lines Mode with Step after Interpolation ', () => { - cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); - cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with Line Mode and Step after Interpolation'); - cy.get('[data-text="Lines"]').should('have.text', 'Lines'); - cy.get('[data-text="Lines"] [data-test-subj="lines"]').should('have.attr', 'checked'); - cy.get('[data-text="Step after"]').should('have.text', 'Step after').click(); - cy.get('[data-text="Step after"] [data-test-subj="Step after"]').should('not.have.attr', 'checked'); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); - }); - - it('Render line chart and Verify Chart Style of Bars Mode with Center bar alignment ', () => { - cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); - cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Bars'); - cy.get('[data-text="Bars"]').should('have.text', 'Bars').click(); - cy.get('[data-text="Center"] [data-test-subj="center"]').should('have.attr', 'checked'); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); - }); -}); - -describe('Renders Tree Map for Parent Fields ', () => { - beforeEach(() => { - landOnEventVisualizations(); - }); - - it('Renders Tree Map and Add Multiple Parent', () => { - 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('.euiButton__text').contains('+ Add Parent').click(); - cy.get('.euiComboBoxPlaceholder').contains('Select a field').should('exist'); - cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(3).click(); - cy.get('.euiComboBoxOption__content').eq(2).click(); - cy.get('.euiButton__text').contains('+ Add Parent').click(); - cy.get('.euiComboBoxPlaceholder').contains('Select a field').should('exist'); - cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(4).click(); - cy.get('.euiComboBoxOption__content').eq(1).click(); - cy.get('.euiButton__text').contains('+ Add Parent').click(); - cy.get('.euiComboBoxPlaceholder').contains('Select a field').should('exist'); - cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(5).click(); - cy.get('.euiComboBoxOption__content').eq(3).click(); - cy.get('.euiButton__text').contains('Preview').click(); - }); - - it('Renders Tree Map and Check Add/Delete Parent', () => { - 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('.euiButton__text').contains('+ Add Parent').click(); - cy.get('.euiComboBoxPlaceholder').contains('Select a field').should('exist'); - cy.get('.euiButton__text').contains('+ Add Parent').click(); - cy.get('.euiComboBoxPlaceholder').eq(1).contains('Select a field').should('exist'); - cy.get('.euiFormRow__fieldWrapper .euiFlexItem').eq(1).click(); - cy.get('.euiFormRow__fieldWrapper .euiFlexItem').eq(1).click(); - }); -}); - -describe('Renders Tree Map for Parent Fields Multicolor Option', () => { - beforeEach(() => { - landOnEventVisualizations(); - }); - - it('Renders Tree Map For Multiple Parent and Check Color Theme', () => { - 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('.euiButton__text').contains('+ Add Parent').click(); - cy.get('.euiComboBoxPlaceholder').contains('Select a field').should('exist'); - cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(3).click(); - cy.get('.euiComboBoxOption__content').eq(2).click(); - cy.get('.euiButton__text').contains('+ Add Parent').click(); - cy.get('.euiComboBoxPlaceholder').contains('Select a field').should('exist'); - cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(4).click(); - cy.get('.euiComboBoxOption__content').eq(1).click(); - cy.get('.euiSuperSelectControl').contains('Default').click(); - cy.get('.euiColorPalettePicker__item').contains('Multicolored').click(); - cy.get('.euiButton__text').contains('Preview').click(); - cy.get('.euiFormHelpText.euiFormRow__text').contains('Parent 1 field').should('exist'); - cy.get('.euiFormHelpText.euiFormRow__text').contains('Parent 2 field').should('exist'); - }); - - it('Render line chart and Verify Chart Style of Bars Mode with Before bar alignment ', () => { - cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); - cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Bars'); - cy.get('[data-text="Bars"]').should('have.text', 'Bars').click(); - cy.get('[data-text="Before"] [data-test-subj="before"]').should('not.have.attr', 'checked'); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); - }); - - it('Render line chart and Verify Chart Style of Bars Mode with After bar alignment ', () => { - cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); - cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Bars'); - cy.get('[data-text="Bars"]').should('have.text', 'Bars').click(); - cy.get('[data-text="After"] [data-test-subj="after"]').should('not.have.attr', 'checked'); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); - }); - - it('Render line chart and Verify Chart Style of Points Mode', () => { - cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); - cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Points'); - cy.get('[data-text="Points"]').should('have.text', 'Points').click(); - cy.get('[data-text="Points"] [data-test-subj="markers"]').should('not.have.attr', 'checked'); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); - }); - - it('Render line chart and Verify Chart Style of Points Mode with larger Point size', () => { - cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); - cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Points'); - cy.get('[data-text="Points"]').should('have.text', 'Points').click(); - cy.get('[data-text="Points"] [data-test-subj="markers"]').should('not.have.attr', 'checked'); - cy.get('input[type="range"]') - .then($el => $el[0].stepUp(30)) - .trigger('change') - cy.get('.euiRangeSlider').should('have.value', 35) - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); - }); - - it('Render line chart and Verify Chart Style of Lines+Points Mode', () => { - cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); - cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Lines and Points'); - cy.get('[data-text="Lines + Points"]').should('have.text', 'Lines + Points').click(); - cy.get('[data-text="Lines + Points"] [data-test-subj="lines+markers"]').should('not.have.attr', 'checked'); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); - }); - - it('Render line chart and Verify Chart Style of Lines+Points Mode with Line Width, Fill Opacity and Point Size', () => { - cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart'); - cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Lines and Points'); - cy.get('[data-text="Lines + Points"]').should('have.text', 'Lines + Points').click(); - cy.get('[data-text="Lines + Points"] [data-test-subj="lines+markers"]').should('not.have.attr', 'checked'); - cy.get('input[type="range"]').eq(0) - .then($el => $el[0].stepUp(4)) - .trigger('change') - cy.get('.euiRangeSlider').eq(0).should('have.value', 6) - cy.get('input[type="range"]').eq(1) - .then($el => $el[0].stepUp(40)) - .trigger('change') - cy.get('.euiRangeSlider').eq(1).should('have.value', 80) - cy.get('input[type="range"]').eq(2) - .then($el => $el[0].stepUp(15)) - .trigger('change') - cy.get('.euiRangeSlider').eq(2).should('have.value', 20) - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true }); + 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(); }); -}); +}); \ No newline at end of file diff --git a/dashboards-observability/.cypress/utils/event_constants.js b/dashboards-observability/.cypress/utils/event_constants.js index 0dd369922..e7ac570c5 100644 --- a/dashboards-observability/.cypress/utils/event_constants.js +++ b/dashboards-observability/.cypress/utils/event_constants.js @@ -79,34 +79,3 @@ export const landOnPanels = () => { ); cy.wait(delay); }; - -export const renderTreeMapchart = () => { - querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].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('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(1).click(); - cy.get('.euiComboBoxOption__content').eq(2).click(); - cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(2).click(); - cy.get('.euiComboBoxOption__content').eq(1).click(); - cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(3).click(); - cy.get('.euiComboBoxOption__content').eq(0).click(); - cy.get('.euiIEFlexWrapFix').eq(2).contains('Treemap').should('exist'); - cy.get('#configPanel__treemap_options').contains('Tiling Algorithm').should('exist'); - cy.get('[data-test-subj = "comboBoxInput"]').eq(4).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('.euiIEFlexWrapFix').eq(1).contains('Value options').should('exist'); - cy.get('[data-test-subj="comboBoxInput"]').eq(1).click(); - cy.get('[name="count()"]').eq(0).click(); - cy.get('[data-test-subj="comboBoxToggleListButton"]').eq(0).click(); - cy.get('[data-test-subj="comboBoxInput"]').eq(2).click(); -}; diff --git a/dashboards-observability/opensearch_dashboards.json b/dashboards-observability/opensearch_dashboards.json index 2b9ffd295..b8d9645c6 100644 --- a/dashboards-observability/opensearch_dashboards.json +++ b/dashboards-observability/opensearch_dashboards.json @@ -1,7 +1,7 @@ { "id": "observabilityDashboards", - "version": "2.0.0.0", - "opensearchDashboardsVersion": "2.0.0", + "version": "2.1.0.0", + "opensearchDashboardsVersion": "2.1.0", "server": true, "ui": true, "requiredPlugins": [ diff --git a/dashboards-observability/package.json b/dashboards-observability/package.json index 1eef65025..d068e60c4 100644 --- a/dashboards-observability/package.json +++ b/dashboards-observability/package.json @@ -1,6 +1,6 @@ { "name": "observability-dashboards", - "version": "2.0.0.0", + "version": "2.1.0.0", "main": "index.ts", "license": "Apache-2.0", "scripts": { From 65015819ae29a616fc131a48c6c4f702fbdeac3c Mon Sep 17 00:00:00 2001 From: Deepak Nevde Date: Fri, 24 Jun 2022 18:20:35 +0530 Subject: [PATCH 29/40] data config reviewed code added Signed-off-by: Deepak Nevde --- .../data_config_panel_item.tsx | 213 ++++++++---------- .../explorer/visualizations/index.tsx | 13 +- 2 files changed, 106 insertions(+), 120 deletions(-) diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx index 2af6f1674..6a7dbc35c 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx @@ -3,36 +3,26 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useEffect, useState } from 'react'; -import { - EuiTitle, - EuiComboBox, - EuiSpacer, - EuiButton, - EuiFieldText, - EuiFlexItem, - EuiFormRow, - EuiIcon, - EuiPanel, - EuiText, -} from '@elastic/eui'; +import React, { useContext, useEffect, useState } from 'react'; +import { EuiTitle, EuiComboBox, EuiSpacer, EuiButton, EuiFieldText, EuiFlexItem, EuiFormRow, EuiIcon, EuiPanel, EuiText } from '@elastic/eui'; import { useDispatch, useSelector } from 'react-redux'; -import { - render as renderExplorerVis, - selectExplorerVisualization, -} from '../../../../../../event_analytics/redux/slices/visualization_slice'; +import { render as renderExplorerVis, selectExplorerVisualization } from '../../../../../../event_analytics/redux/slices/visualization_slice'; import { AGGREGATION_OPTIONS } from '../../../../../../../../common/constants/explorer'; import { ButtonGroupItem } from './config_button_group'; import { visChartTypes } from '../../../../../../../../common/constants/shared'; - -export const DataConfigPanelItem = ({ fieldOptionList, visualizations, tabID }: any) => { +import { TabContext } from '../../../../../hooks'; +export const DataConfigPanelItem = ({ + fieldOptionList, + visualizations, +}: any) => { const dispatch = useDispatch(); - const explorerVisualizations = useSelector(selectExplorerVisualization)[tabID]; + const { tabId } = useContext(TabContext); + const explorerVisualizations = useSelector(selectExplorerVisualization)[tabId]; const { data } = visualizations; const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData; - const newEntry = { label: '', aggregation: '', custom_label: '', name: '', side: 'right' }; + const newEntry = { label: "", aggregation: "", custom_label: "", name: "", side: "right" }; const [configList, setConfigList] = useState({ dimensions: [{ ...newEntry }], @@ -42,14 +32,14 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations, tabID }: useEffect(() => { if (data.rawVizData?.dataConfig) { setConfigList({ - ...data.rawVizData?.dataConfig, - }); + ...data.rawVizData.dataConfig + }) } else if (data.defaultAxes.xaxis || data.defaultAxes.yaxis) { const { xaxis, yaxis } = data.defaultAxes; setConfigList({ - dimensions: [...(xaxis && xaxis)], - metrics: [...(yaxis && yaxis)], - }); + dimensions: [...xaxis && xaxis], + metrics: [...yaxis && yaxis], + }) } }, [data.defaultAxes, data.rawVizData?.dataConfig]); @@ -72,113 +62,110 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations, tabID }: const list = { ...configList }; const arr = [...list[name]]; arr.splice(index, 1); - const newList = { ...list, [name]: arr }; - setConfigList(newList); + const y = { ...list, [name]: arr } + setConfigList(y); }; const handleServiceAdd = (name: string) => { - let newList = { ...configList, [name]: [...configList[name], newEntry] }; + let newList = { ...configList, [name]: [...configList[name], newEntry] } setConfigList(newList); }; const updateChart = () => { dispatch( renderExplorerVis({ - tabId: tabID, + tabId: tabId, data: { ...explorerVisualizations, dataConfig: { metrics: configList.metrics, - dimensions: configList.dimensions, - }, - }, + dimensions: configList.dimensions + } + } }) ); - }; + } - const getCommonUI = (lists, sectionName: string) => - lists && lists.map((singleField, index: number) => ( - <> -
-
- - - handleServiceRemove(index, sectionName)} - /> - - ) - } - > - updateList(e.length > 0 ? e[0].label : '', index, sectionName, 'aggregation')} - /> + const isPositionButtonAllow = (sectionName: string) => sectionName === 'metrics' && (visualizations.vis.name === visChartTypes.Line || visualizations.vis.name === visChartTypes.Bar); - - - updateList(e.length > 0 ? e[0].label : '', index, sectionName, 'label')} + const getCommonUI = (lists, sectionName: string) => lists.map((singleField, index: number) => ( + <> +
+
+ + + handleServiceRemove(index, sectionName)} + /> + + ) + } + > + updateList(e.length > 0 ? e[0].label : '', index, sectionName, 'aggregation')} + + /> + + + + updateList(e.length > 0 ? e[0].label : '', index, sectionName, 'label')} + /> + + + + updateList(e.target.value, index, sectionName, 'custom_label')} + aria-label="Use aria labels when no actual label is in use" /> + + + {isPositionButtonAllow(sectionName) && ( + + updateList(id, index, sectionName, 'side')} /> - - - updateList(e.target.value, index, sectionName, 'custom_label')} - aria-label="Use aria labels when no actual label is in use" /> - - - {sectionName === 'metrics' && visualizations.vis.name === visChartTypes.Line && ( - - updateList(id, index, sectionName, 'side')} - /> - - )} - - - {lists.length - 1 === index && - - handleServiceAdd(sectionName)} - > - Add - - - } - -
+ )} + + + {lists.length - 1 === index && + + handleServiceAdd(sectionName)}> + Add + + + } +
- - - )) +
+ + + )) return ( <> diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx index 4ab04e2b0..543b498fc 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx @@ -57,7 +57,7 @@ export const ExplorerVisualizations = ({ {(EuiResizablePanel, EuiResizableButton) => ( <> - +
- +
Date: Fri, 24 Jun 2022 13:08:08 +0000 Subject: [PATCH 30/40] Text correction Signed-off-by: Deepak Nevde --- .../config_panes/config_controls/data_config_panel_item.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx index 6a7dbc35c..3aaa98583 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx @@ -170,7 +170,7 @@ export const DataConfigPanelItem = ({ return ( <> -

Data Cofigurations

+

Data Configurations

 From a5ceefb2632d518792a165d8ee0c5a1336aaf259 Mon Sep 17 00:00:00 2001 From: Deepak Nevde Date: Fri, 24 Jun 2022 13:29:21 +0000 Subject: [PATCH 31/40] Conflicts resolved Signed-off-by: Deepak Nevde --- .../config_controls/data_config_panel_item.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx index 3aaa98583..49a0aab9d 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx @@ -159,13 +159,13 @@ export const DataConfigPanelItem = ({ Add - } - -
+ } + +
- - - )) + + + )) return ( <> From d1b6485e0b13bd529d0ab78ffc4f37d5ab28341d Mon Sep 17 00:00:00 2001 From: Shankha Das Date: Fri, 24 Jun 2022 14:17:37 +0000 Subject: [PATCH 32/40] enhancement for heatmap with new UI Signed-off-by: Shankha Das --- .../common/types/explorer.ts | 14 ++ .../__snapshots__/config_panel.test.tsx.snap | 14 -- .../data_config_panel_item.tsx | 232 +++++++++++------- .../explorer/visualizations/index.tsx | 1 - .../visualizations/charts/maps/heatmap.tsx | 33 ++- .../charts/maps/heatmap_type.ts | 14 -- 6 files changed, 169 insertions(+), 139 deletions(-) diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts index 3220add36..2204a6ab4 100644 --- a/dashboards-observability/common/types/explorer.ts +++ b/dashboards-observability/common/types/explorer.ts @@ -230,3 +230,17 @@ export interface LiveTailProps { isLiveTailPopoverOpen: boolean; dataTestSubj: string; } + +export interface ConfigListEntry { + label: string; + aggregation: string; + custom_label: string; + name: string; + side: string; + type: string; +} + +export interface ConfigList { + dimensions?: ConfigListEntry[]; + metrics?: ConfigListEntry[]; +} diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap index 724090f83..d58a98230 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap @@ -1277,20 +1277,6 @@ exports[`Config panel component Renders config panel with visualization data 1`] "mapTo": "dataConfig", "name": "Data", "sections": Array [ - Object { - "editor": [Function], - "id": "value_options", - "mapTo": "valueOptions", - "name": "Value options", - "schemas": Array [ - Object { - "component": null, - "isSingleSelection": true, - "mapTo": "zaxis", - "name": "Z-axis", - }, - ], - }, Object { "editor": [Function], "id": "chart_styles", diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx index 49a0aab9d..ce2e49935 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx @@ -3,50 +3,76 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useContext, useEffect, useState } from 'react'; -import { EuiTitle, EuiComboBox, EuiSpacer, EuiButton, EuiFieldText, EuiFlexItem, EuiFormRow, EuiIcon, EuiPanel, EuiText } from '@elastic/eui'; +import React, { useEffect, useState, useContext } from 'react'; +import { + EuiTitle, + EuiComboBox, + EuiSpacer, + EuiButton, + EuiFieldText, + EuiFlexItem, + EuiFormRow, + EuiIcon, + EuiPanel, + EuiText, +} from '@elastic/eui'; import { useDispatch, useSelector } from 'react-redux'; import { render as renderExplorerVis, selectExplorerVisualization } from '../../../../../../event_analytics/redux/slices/visualization_slice'; import { AGGREGATION_OPTIONS } from '../../../../../../../../common/constants/explorer'; import { ButtonGroupItem } from './config_button_group'; import { visChartTypes } from '../../../../../../../../common/constants/shared'; +import { ConfigList } from '../../../../../../../../common/types/explorer'; import { TabContext } from '../../../../../hooks'; -export const DataConfigPanelItem = ({ - fieldOptionList, - visualizations, -}: any) => { + +export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) => { const dispatch = useDispatch(); const { tabId } = useContext(TabContext); const explorerVisualizations = useSelector(selectExplorerVisualization)[tabId]; - const { data } = visualizations; + const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData; - const newEntry = { label: "", aggregation: "", custom_label: "", name: "", side: "right" }; + const initialConfigEntry = { + label: '', + aggregation: '', + custom_label: '', + name: '', + side: 'right', + type: '', + }; - const [configList, setConfigList] = useState({ - dimensions: [{ ...newEntry }], - metrics: [{ ...newEntry }], - }); + const [configList, setConfigList] = useState({}); useEffect(() => { if (data.rawVizData?.dataConfig) { setConfigList({ - ...data.rawVizData.dataConfig - }) - } else if (data.defaultAxes.xaxis || data.defaultAxes.yaxis) { + ...data.rawVizData.dataConfig, + }); + } else if ( + visualizations.vis.name !== visChartTypes.HeatMap && + (data.defaultAxes.xaxis || data.defaultAxes.yaxis) + ) { const { xaxis, yaxis } = data.defaultAxes; setConfigList({ - dimensions: [...xaxis && xaxis], - metrics: [...yaxis && yaxis], - }) + dimensions: [...(xaxis && xaxis)], + metrics: [...(yaxis && yaxis)], + }); + } else { + setConfigList({ + dimensions: [initialConfigEntry, initialConfigEntry], + metrics: [initialConfigEntry], + }); } - }, [data.defaultAxes, data.rawVizData?.dataConfig]); + }, [data.defaultAxes, data.rawVizData?.dataConfig, visualizations.vis.name]); const updateList = (value: string, index: number, name: string, field: string) => { let list = { ...configList }; let listItem = { ...list[name][index] }; - listItem = { ...listItem, [field]: value }; + listItem = { + ...listItem, + [field]: value, + type: value !== '' ? fields.find((x) => x.name === value).type : '', + }; const newList = { ...list, [name]: [ @@ -56,7 +82,7 @@ export const DataConfigPanelItem = ({ ], }; setConfigList(newList); - } + }; const handleServiceRemove = (index: number, name: string) => { const list = { ...configList }; @@ -74,7 +100,7 @@ export const DataConfigPanelItem = ({ const updateChart = () => { dispatch( renderExplorerVis({ - tabId: tabId, + tabId, data: { ...explorerVisualizations, dataConfig: { @@ -86,81 +112,101 @@ export const DataConfigPanelItem = ({ ); } - const isPositionButtonAllow = (sectionName: string) => sectionName === 'metrics' && (visualizations.vis.name === visChartTypes.Line || visualizations.vis.name === visChartTypes.Bar); + const isPositionButtonVisible = (sectionName: string) => + sectionName === 'metrics' && + (visualizations.vis.name === visChartTypes.Line || + visualizations.vis.name === visChartTypes.Bar); + + const getCommonUI = (lists, sectionName: string) => + lists && + lists.map((singleField, index: number) => ( + <> +
+
+ {sectionName === 'dimensions' && visualizations.vis.name === visChartTypes.HeatMap && ( + +
{index === 0 ? 'X-Axis' : 'Y-Axis'}
+ + )} + + + handleServiceRemove(index, sectionName)} + /> + + ) + } + > + + updateList(e.length > 0 ? e[0].label : '', index, sectionName, 'aggregation') + } + /> + + + + updateList(e.length > 0 ? e[0].label : '', index, sectionName, 'label') + } + /> + - const getCommonUI = (lists, sectionName: string) => lists.map((singleField, index: number) => ( - <> -
-
- - - handleServiceRemove(index, sectionName)} - /> - - ) - } - > - updateList(e.length > 0 ? e[0].label : '', index, sectionName, 'aggregation')} - - /> - - - - updateList(e.length > 0 ? e[0].label : '', index, sectionName, 'label')} - /> - - - - updateList(e.target.value, index, sectionName, 'custom_label')} - aria-label="Use aria labels when no actual label is in use" /> - - - {isPositionButtonAllow(sectionName) && ( - - updateList(id, index, sectionName, 'side')} + + updateList(e.target.value, index, sectionName, 'custom_label')} + aria-label="Use aria labels when no actual label is in use" /> - )} - - {lists.length - 1 === index && - - handleServiceAdd(sectionName)}> - Add - - - } - + {isPositionButtonVisible(sectionName) && ( + + updateList(id, index, sectionName, 'side')} + /> + + )} + + + {visualizations.vis.name !== visChartTypes.HeatMap && lists.length - 1 === index && ( + + handleServiceAdd(sectionName)} + > + Add + + + )} +
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx index 543b498fc..cece6e284 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx @@ -81,7 +81,6 @@ export const ExplorerVisualizations = ({
diff --git a/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx b/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx index 9155dea04..d6b71a0ad 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx +++ b/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx @@ -29,30 +29,29 @@ export const HeatMap = ({ visualizations, layout, config }: any) => { if (fields.length < 3) return ; - const xaxisField = fields[fields.length - 2]; - const yaxisField = fields[fields.length - 1]; - const zMetrics = - dataConfig?.valueOptions && dataConfig?.valueOptions.zaxis - ? dataConfig?.valueOptions.zaxis[0] - : yaxis.length > 0 - ? yaxis[0] - : fields[fields.length - 3]; - const uniqueYaxis = uniq(data[yaxisField.name]); - const uniqueXaxis = uniq(data[xaxisField.name]); - const uniqueYaxisLength = uniqueYaxis.length; - const uniqueXaxisLength = uniqueXaxis.length; + const xaxisField = visualizations.data?.rawVizData?.dataConfig?.dimensions[0]; + const yaxisField = visualizations.data?.rawVizData?.dataConfig?.dimensions[1]; + const zMetrics = visualizations.data?.rawVizData?.dataConfig?.metrics[0]; + console.log("xaxisField", xaxisField); + console.log("yaxisField", yaxisField); + console.log("zMetrics", zMetrics); if ( isEmpty(xaxisField) || isEmpty(yaxisField) || isEmpty(zMetrics) || - isEmpty(data[xaxisField.name]) || - isEmpty(data[yaxisField.name]) || - isEmpty(data[zMetrics.name]) || + isEmpty(data[xaxisField.label]) || + isEmpty(data[yaxisField.label]) || + isEmpty(data[zMetrics.label]) || indexOf(NUMERICAL_FIELDS, zMetrics.type) < 0 ) return ; + const uniqueYaxis = uniq(data[yaxisField.label]); + const uniqueXaxis = uniq(data[xaxisField.label]); + const uniqueYaxisLength = uniqueYaxis.length; + const uniqueXaxisLength = uniqueXaxis.length; + const colorField = dataConfig?.chartStyles ? dataConfig?.chartStyles.colorMode && dataConfig?.chartStyles.colorMode[0].name === OPACITY ? dataConfig?.chartStyles.color ?? HEATMAP_SINGLE_COLOR @@ -75,8 +74,8 @@ export const HeatMap = ({ visualizations, layout, config }: any) => { const buckets = {}; // maps bukcets to metrics - for (let i = 0; i < data[xaxisField.name].length; i++) { - buckets[`${data[xaxisField.name][i]},${data[yaxisField.name][i]}`] = data[zMetrics.name][i]; + for (let i = 0; i < data[xaxisField.label].length; i++) { + buckets[`${data[xaxisField.label][i]},${data[yaxisField.label][i]}`] = data[zMetrics.label][i]; } // initialize empty 2 dimensional array, inner loop for each xaxis field, outer loop for yaxis diff --git a/dashboards-observability/public/components/visualizations/charts/maps/heatmap_type.ts b/dashboards-observability/public/components/visualizations/charts/maps/heatmap_type.ts index 4b8872931..8bcd56697 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/heatmap_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/maps/heatmap_type.ts @@ -44,20 +44,6 @@ export const createMapsVisDefinition = () => ({ mapTo: 'dataConfig', editor: VizDataPanel, sections: [ - { - id: 'value_options', - name: 'Value options', - editor: ConfigValueOptions, - mapTo: 'valueOptions', - schemas: [ - { - name: 'Z-axis', - isSingleSelection: true, - component: null, - mapTo: 'zaxis', - }, - ], - }, { id: 'chart_styles', name: 'Chart Styles', From 233a160f33417b90a1475f93d5cd5a4c9699fe51 Mon Sep 17 00:00:00 2001 From: Shankha Das Date: Fri, 24 Jun 2022 14:22:14 +0000 Subject: [PATCH 33/40] line chart test cases Signed-off-by: Shankha Das --- .../integration/1_event_analytics.spec.js | 13 +++- .../.cypress/utils/event_constants.js | 59 +++++++++++++++++++ 2 files changed, 71 insertions(+), 1 deletion(-) diff --git a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js index 6e6d06d4e..f2b0db3c6 100644 --- a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js +++ b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js @@ -18,6 +18,10 @@ import { landOnEventExplorer, landOnEventVisualizations, landOnPanels, + renderTreeMapchart, + renderPieChart, + renderLineChartForDataConfig, + DataConfigLineChart } from '../utils/event_constants'; import { supressResizeObserverIssue } from '../utils/constants'; @@ -845,4 +849,11 @@ describe('Render Table View', () => { cy.get('.euiButtonEmpty__text').eq('6').click(); cy.get('.euiContextMenuItem__text').eq(1).click(); }); -}); \ No newline at end of file +}); + +describe('Render Time series chart/Line chart and verify Data configurations UI ', () => { + it('Render line chart and verify Data Configuration Panel', () => { + renderLineChartForDataConfig(); + DataConfigLineChart(); + }); +}); diff --git a/dashboards-observability/.cypress/utils/event_constants.js b/dashboards-observability/.cypress/utils/event_constants.js index e7ac570c5..4db8c146d 100644 --- a/dashboards-observability/.cypress/utils/event_constants.js +++ b/dashboards-observability/.cypress/utils/event_constants.js @@ -79,3 +79,62 @@ export const landOnPanels = () => { ); cy.wait(delay); }; + +export const renderTreeMapchart = () => { + querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].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('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(1).click(); + cy.get('.euiComboBoxOption__content').eq(2).click(); + cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(2).click(); + cy.get('.euiComboBoxOption__content').eq(1).click(); + cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(3).click(); + cy.get('.euiComboBoxOption__content').eq(0).click(); + cy.get('.euiIEFlexWrapFix').eq(2).contains('Treemap').should('exist'); + cy.get('#configPanel__treemap_options').contains('Tiling Algorithm').should('exist'); + cy.get('[data-test-subj = "comboBoxInput"]').eq(4).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('.euiIEFlexWrapFix').eq(1).contains('Value options').should('exist'); + cy.get('[data-test-subj="comboBoxInput"]').eq(1).click(); + cy.get('[name="count()"]').eq(0).click(); + cy.get('[data-test-subj="comboBoxToggleListButton"]').eq(0).click(); + cy.get('[data-test-subj="comboBoxInput"]').eq(2).click(); +}; + +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}'); +}; From dca1282de1796e54eafe1eafee55d1f5dbc00d45 Mon Sep 17 00:00:00 2001 From: Shankha Das Date: Fri, 24 Jun 2022 15:11:26 +0000 Subject: [PATCH 34/40] console logs removed Signed-off-by: Shankha Das --- .../public/components/visualizations/charts/maps/heatmap.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx b/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx index d6b71a0ad..c0d156905 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx +++ b/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx @@ -33,9 +33,6 @@ export const HeatMap = ({ visualizations, layout, config }: any) => { const yaxisField = visualizations.data?.rawVizData?.dataConfig?.dimensions[1]; const zMetrics = visualizations.data?.rawVizData?.dataConfig?.metrics[0]; - console.log("xaxisField", xaxisField); - console.log("yaxisField", yaxisField); - console.log("zMetrics", zMetrics); if ( isEmpty(xaxisField) || isEmpty(yaxisField) || From 77a58b10eefda3bbe2fe75f9c43eb277e28a13e5 Mon Sep 17 00:00:00 2001 From: Mrunal Zambre Date: Fri, 24 Jun 2022 14:38:52 +0000 Subject: [PATCH 35/40] updated value options ui for treemap Signed-off-by: Mrunal Zambre --- .../__snapshots__/config_panel.test.tsx.snap | 26 ---- .../config_treemap_parents.tsx | 50 +++---- .../treemap_config_panel_item.tsx | 138 ++++++++++++++++++ .../explorer/visualizations/index.tsx | 19 ++- .../charts/maps/treemap_type.ts | 27 ---- .../visualizations/charts/maps/treemaps.tsx | 19 ++- 6 files changed, 184 insertions(+), 95 deletions(-) create mode 100644 dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap index d58a98230..435c32d43 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap @@ -1692,32 +1692,6 @@ exports[`Config panel component Renders config panel with visualization data 1`] "mapTo": "dataConfig", "name": "Data", "sections": Array [ - Object { - "editor": [Function], - "id": "value_options", - "mapTo": "valueOptions", - "name": "Value options", - "schemas": Array [ - Object { - "component": null, - "isSingleSelection": true, - "mapTo": "valueField", - "name": "Value Field", - }, - Object { - "component": null, - "isSingleSelection": true, - "mapTo": "childField", - "name": "Child Field", - }, - Object { - "component": [Function], - "defaultState": Array [], - "mapTo": "parentFields", - "name": "Parent Fields", - }, - ], - }, Object { "editor": [Function], "id": "treemap_options", diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx index b5bcaf16f..f92f9db1b 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx @@ -9,11 +9,9 @@ import { EuiFormRow, EuiSpacer, EuiIcon, - EuiFlexGroup, - EuiFlexItem, - EuiTitle, EuiComboBox, EuiComboBoxOptionOption, + EuiText, } from '@elastic/eui'; import { isEmpty, uniqueId } from 'lodash'; @@ -61,37 +59,33 @@ export const ConfigTreemapParentFields = ({ dropdownList, selectedAxis, onSelect return ( <> - -

{`Parent Fields`}

- - {!isEmpty(selectedAxis) && selectedAxis.map((_, index: number) => { return ( <> - -

{`Parent ${index + 1}`}

- - - - - handleParentChange(options, index)} - aria-label="Use aria labels when no actual label is in use" + + handleParentDelete(index)} /> - - - handleParentDelete(index)} /> - - + + } + > + handleParentChange(options, index)} + aria-label="Use aria labels when no actual label is in use" + /> ); diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx new file mode 100644 index 000000000..f4e6b63d5 --- /dev/null +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx @@ -0,0 +1,138 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { useEffect, useState } from 'react'; +import { + EuiTitle, + EuiComboBox, + EuiSpacer, + EuiButton, + EuiFlexItem, + EuiFormRow, + EuiPanel, +} from '@elastic/eui'; +import { useDispatch, useSelector } from 'react-redux'; +import { + render as renderExplorerVis, + selectExplorerVisualization, +} from '../../../../../../event_analytics/redux/slices/visualization_slice'; +import { ConfigTreemapParentFields } from './config_treemap_parents'; + +export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID }: any) => { + const dispatch = useDispatch(); + const explorerVisualizations = useSelector(selectExplorerVisualization)[tabID]; + + const { data } = visualizations; + const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData; + + const newEntry = { label: '', name: '' }; + + const [configList, setConfigList] = useState({ + dimensions: [{ childField: { ...newEntry }, parentFields: [] }], + metrics: [{ valueField: { ...newEntry } }], + }); + + useEffect(() => { + if (data.rawVizData?.dataConfig) { + setConfigList({ + ...data.rawVizData?.dataConfig, + }); + } else if (data.defaultAxes.xaxis || data.defaultAxes.yaxis) { + const { xaxis, yaxis } = data.defaultAxes; + setConfigList({ + dimensions: [{ childField: { ...xaxis[0] }, parentFields: [] }], + metrics: [{ valueField: { ...yaxis[0] } }], + }); + } + }, [data.defaultAxes, data.rawVizData?.dataConfig]); + + const updateList = (configName: string, fieldName: string, field) => { + let list = { ...configList }; + let listItem = { ...list[configName][0] }; + listItem = { ...listItem, [fieldName]: field }; + const newList = { + ...list, + [configName]: [listItem], + }; + console.log('newList', newList); + setConfigList(newList); + }; + + const updateChart = () => { + dispatch( + renderExplorerVis({ + tabId: tabID, + data: { + ...explorerVisualizations, + dataConfig: { + metrics: configList.metrics, + dimensions: configList.dimensions, + }, + }, + }) + ); + }; + + return ( + <> + +

Data Configurations

+ + + +

Dimensions

+ +
+ + + updateList('dimensions', 'childField', val[0])} + /> + + + + ({ label: opt.label, name: opt.label }))} + selectedAxis={configList.dimensions[0].parentFields} + onSelectChange={(val) => updateList('dimensions', 'parentFields', val)} + /> + + +
+ +

Metrics

+ +
+ + + updateList('metrics', 'valueField', val[0])} + /> + + +
+ + + + + Update chart + + + + ); +}; diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx index cece6e284..8c4163647 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx @@ -16,6 +16,8 @@ import { ConfigPanel } from './config_panel'; import { Sidebar } from '../sidebar'; import { DataConfigPanelItem } from './config_panel/config_panes/config_controls/data_config_panel_item'; import { TabContext } from '../../hooks'; +import { visChartTypes } from '../../../../../common/constants/shared'; +import { TreemapConfigPanelItem } from './config_panel/config_panes/config_controls/treemap_config_panel_item'; interface IExplorerVisualizationsProps { query: IQuery; curVisId: string; @@ -78,10 +80,19 @@ export const ExplorerVisualizations = ({ position: 'top', }]} initialSize={14} minSize="300" style={{ border: "1px solid #D3DAE6", padding: '0px' }}>
- + {curVisId === visChartTypes.TreeMap ? ( + + ) : ( + + )}
diff --git a/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts b/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts index 80b8232b7..eb4bc7d6e 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts @@ -12,7 +12,6 @@ import { ConfigValueOptions, ColorPalettePicker, ConfigChartOptions, - ConfigTreemapParentFields, } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls'; import { DEFAULT_PALETTE, COLOR_PALETTES } from '../../../../../common/constants/colors'; @@ -45,32 +44,6 @@ export const createTreeMapDefinition = (params: BarTypeParams = {}) => ({ mapTo: 'dataConfig', editor: VizDataPanel, sections: [ - { - id: 'value_options', - name: 'Value options', - editor: ConfigValueOptions, - mapTo: 'valueOptions', - schemas: [ - { - name: 'Value Field', - isSingleSelection: true, - component: null, - mapTo: 'valueField', - }, - { - name: 'Child Field', - isSingleSelection: true, - component: null, - mapTo: 'childField', - }, - { - name: 'Parent Fields', - component: ConfigTreemapParentFields, - mapTo: 'parentFields', - defaultState: [], - }, - ], - }, { id: 'treemap_options', name: 'Treemap', diff --git a/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx b/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx index 6922f075c..4953e7d18 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx +++ b/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx @@ -23,22 +23,21 @@ export const TreeMap = ({ visualizations, layout, config }: any) => { const { dataConfig = {}, layoutConfig = {} } = visualizations?.data?.userConfigs; const childField = - dataConfig?.valueOptions && - dataConfig?.valueOptions.childField && - !isEmpty(dataConfig?.valueOptions.childField) - ? dataConfig?.valueOptions.childField[0] + visualizations.data?.rawVizData?.dataConfig?.dimensions && + visualizations.data?.rawVizData?.dataConfig?.dimensions[0].childField + ? visualizations.data?.rawVizData?.dataConfig?.dimensions[0].childField : fields[fields.length - 1]; const parentFields = - dataConfig?.valueOptions && dataConfig.valueOptions?.parentFields - ? dataConfig?.valueOptions.parentFields + visualizations.data?.rawVizData?.dataConfig?.dimensions && + visualizations.data?.rawVizData?.dataConfig.dimensions[0].parentFields + ? visualizations.data?.rawVizData?.dataConfig?.dimensions[0].parentFields : []; const valueField = - dataConfig?.valueOptions && - dataConfig.valueOptions?.valueField && - !isEmpty(dataConfig?.valueOptions.valueField) - ? dataConfig?.valueOptions.valueField[0] + visualizations.data?.rawVizData?.dataConfig?.metrics && + visualizations.data?.rawVizData?.dataConfig.metrics[0].valueField + ? visualizations.data?.rawVizData?.dataConfig?.metrics[0].valueField : fields[0]; const colorField = From d8374af428963ebaed81356a63dd20a0d296f058 Mon Sep 17 00:00:00 2001 From: Mrunal Zambre Date: Mon, 27 Jun 2022 16:35:43 +0530 Subject: [PATCH 36/40] removed console Signed-off-by: Mrunal Zambre --- .../config_panes/config_controls/treemap_config_panel_item.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx index f4e6b63d5..d4b1f8ec6 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx @@ -56,7 +56,6 @@ export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID ...list, [configName]: [listItem], }; - console.log('newList', newList); setConfigList(newList); }; From 6bc9f46955fea40fdd4f1cc1a8b0a524ab9b446c Mon Sep 17 00:00:00 2001 From: abasatwar Date: Wed, 29 Jun 2022 11:34:05 +0000 Subject: [PATCH 37/40] sprint1-visualization-fixes. Signed-off-by: abasatwar --- .../data_config_panel_item.tsx | 47 ++++++++++++------- .../treemap_config_panel_item.tsx | 47 ++++++++++++++----- .../visualizations/charts/lines/line.tsx | 2 +- .../visualizations/charts/maps/heatmap.tsx | 6 +-- .../visualizations/charts/maps/treemaps.tsx | 18 +++---- .../visualizations/charts/pie/pie.tsx | 8 ++-- 6 files changed, 83 insertions(+), 45 deletions(-) diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx index ce2e49935..865164c5e 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx @@ -17,7 +17,10 @@ import { EuiText, } from '@elastic/eui'; import { useDispatch, useSelector } from 'react-redux'; -import { render as renderExplorerVis, selectExplorerVisualization } from '../../../../../../event_analytics/redux/slices/visualization_slice'; +import { + render as renderExplorerVis, + selectExplorerVisualization, +} from '../../../../../../event_analytics/redux/slices/visualization_slice'; import { AGGREGATION_OPTIONS } from '../../../../../../../../common/constants/explorer'; import { ButtonGroupItem } from './config_button_group'; import { visChartTypes } from '../../../../../../../../common/constants/shared'; @@ -44,9 +47,12 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) => const [configList, setConfigList] = useState({}); useEffect(() => { - if (data.rawVizData?.dataConfig) { + if ( + data.rawVizData?.[visualizations.vis.name] && + data.rawVizData?.[visualizations.vis.name].dataConfig + ) { setConfigList({ - ...data.rawVizData.dataConfig, + ...data.rawVizData[visualizations.vis.name].dataConfig, }); } else if ( visualizations.vis.name !== visChartTypes.HeatMap && @@ -63,7 +69,11 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) => metrics: [initialConfigEntry], }); } - }, [data.defaultAxes, data.rawVizData?.dataConfig, visualizations.vis.name]); + }, [ + data.defaultAxes, + data.rawVizData?.[visualizations.vis.name]?.dataConfig, + visualizations.vis.name, + ]); const updateList = (value: string, index: number, name: string, field: string) => { let list = { ...configList }; @@ -71,8 +81,11 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) => listItem = { ...listItem, [field]: value, - type: value !== '' ? fields.find((x) => x.name === value).type : '', }; + if (field === 'label') { + listItem.type = value !== '' ? fields.find((x) => x.name === value)?.type : ''; + listItem.name = value; + } const newList = { ...list, [name]: [ @@ -88,12 +101,12 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) => const list = { ...configList }; const arr = [...list[name]]; arr.splice(index, 1); - const y = { ...list, [name]: arr } + const y = { ...list, [name]: arr }; setConfigList(y); }; const handleServiceAdd = (name: string) => { - let newList = { ...configList, [name]: [...configList[name], newEntry] } + let newList = { ...configList, [name]: [...configList[name], initialConfigEntry] }; setConfigList(newList); }; @@ -103,14 +116,16 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) => tabId, data: { ...explorerVisualizations, - dataConfig: { - metrics: configList.metrics, - dimensions: configList.dimensions - } - } + [visualizations.vis.name]: { + dataConfig: { + metrics: configList.metrics, + dimensions: configList.dimensions, + }, + }, + }, }) ); - } + }; const isPositionButtonVisible = (sectionName: string) => sectionName === 'metrics' && @@ -208,10 +223,10 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) => )}
-
+
- )) + )); return ( <> @@ -242,4 +257,4 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) => ); -}; \ No newline at end of file +}; diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx index d4b1f8ec6..a807baf6a 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx @@ -35,9 +35,12 @@ export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID }); useEffect(() => { - if (data.rawVizData?.dataConfig) { + if ( + data.rawVizData?.[visualizations.vis.name] && + data.rawVizData?.[visualizations.vis.name].dataConfig + ) { setConfigList({ - ...data.rawVizData?.dataConfig, + ...data.rawVizData[visualizations.vis.name].dataConfig, }); } else if (data.defaultAxes.xaxis || data.defaultAxes.yaxis) { const { xaxis, yaxis } = data.defaultAxes; @@ -46,12 +49,22 @@ export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID metrics: [{ valueField: { ...yaxis[0] } }], }); } - }, [data.defaultAxes, data.rawVizData?.dataConfig]); + }, [ + data.defaultAxes, + data.rawVizData?.[visualizations.vis.name]?.dataConfig, + visualizations.vis.name, + ]); - const updateList = (configName: string, fieldName: string, field) => { + const updateList = (configName: string, fieldName: string, value: string | any[]) => { let list = { ...configList }; let listItem = { ...list[configName][0] }; - listItem = { ...listItem, [fieldName]: field }; + + 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 = { ...list, [configName]: [listItem], @@ -65,9 +78,11 @@ export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID tabId: tabID, data: { ...explorerVisualizations, - dataConfig: { - metrics: configList.metrics, - dimensions: configList.dimensions, + [visualizations.vis.name]: { + dataConfig: { + metrics: configList.metrics, + dimensions: configList.dimensions, + }, }, }, }) @@ -89,9 +104,13 @@ export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID updateList('dimensions', 'childField', val[0])} + onChange={(val) => + updateList('dimensions', 'childField', val.length > 0 ? val[0].label : '') + } /> @@ -113,9 +132,13 @@ export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID updateList('metrics', 'valueField', val[0])} + onChange={(val) => + updateList('metrics', 'valueField', val.length > 0 ? val[0].label : '') + } /> diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx index f38c50dce..83aeefa49 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -24,7 +24,7 @@ export const Line = ({ visualizations, layout, config }: any) => { availabilityConfig = {}, } = visualizations?.data?.userConfigs; - const dataConfigTab = visualizations.data?.rawVizData?.dataConfig && visualizations.data.rawVizData.dataConfig; + const dataConfigTab = visualizations.data?.rawVizData?.line?.dataConfig && visualizations.data.rawVizData.line.dataConfig; const xaxis = dataConfigTab?.dimensions ? dataConfigTab?.dimensions : []; const yaxis = dataConfigTab?.metrics ? dataConfigTab?.metrics : []; diff --git a/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx b/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx index c0d156905..176c5421d 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx +++ b/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx @@ -29,9 +29,9 @@ export const HeatMap = ({ visualizations, layout, config }: any) => { if (fields.length < 3) return ; - const xaxisField = visualizations.data?.rawVizData?.dataConfig?.dimensions[0]; - const yaxisField = visualizations.data?.rawVizData?.dataConfig?.dimensions[1]; - const zMetrics = visualizations.data?.rawVizData?.dataConfig?.metrics[0]; + const xaxisField = visualizations.data?.rawVizData?.heatmap?.dataConfig?.dimensions[0]; + const yaxisField = visualizations.data?.rawVizData?.heatmap?.dataConfig?.dimensions[1]; + const zMetrics = visualizations.data?.rawVizData?.heatmap?.dataConfig?.metrics[0]; if ( isEmpty(xaxisField) || diff --git a/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx b/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx index 4953e7d18..f13c69ec5 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx +++ b/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx @@ -23,21 +23,21 @@ export const TreeMap = ({ visualizations, layout, config }: any) => { const { dataConfig = {}, layoutConfig = {} } = visualizations?.data?.userConfigs; const childField = - visualizations.data?.rawVizData?.dataConfig?.dimensions && - visualizations.data?.rawVizData?.dataConfig?.dimensions[0].childField - ? visualizations.data?.rawVizData?.dataConfig?.dimensions[0].childField + visualizations.data?.rawVizData?.tree_map?.dataConfig?.dimensions && + visualizations.data?.rawVizData?.tree_map?.dataConfig?.dimensions[0].childField + ? visualizations.data?.rawVizData?.tree_map?.dataConfig?.dimensions[0].childField : fields[fields.length - 1]; const parentFields = - visualizations.data?.rawVizData?.dataConfig?.dimensions && - visualizations.data?.rawVizData?.dataConfig.dimensions[0].parentFields - ? visualizations.data?.rawVizData?.dataConfig?.dimensions[0].parentFields + visualizations.data?.rawVizData?.tree_map?.dataConfig?.dimensions && + visualizations.data?.rawVizData?.tree_map?.dataConfig.dimensions[0].parentFields + ? visualizations.data?.rawVizData?.tree_map?.dataConfig?.dimensions[0].parentFields : []; const valueField = - visualizations.data?.rawVizData?.dataConfig?.metrics && - visualizations.data?.rawVizData?.dataConfig.metrics[0].valueField - ? visualizations.data?.rawVizData?.dataConfig?.metrics[0].valueField + visualizations.data?.rawVizData?.tree_map?.dataConfig?.metrics && + visualizations.data?.rawVizData?.tree_map?.dataConfig.metrics[0].valueField + ? visualizations.data?.rawVizData?.tree_map?.dataConfig?.metrics[0].valueField : fields[0]; const colorField = diff --git a/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx b/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx index 0a07e985a..5dc4dd204 100644 --- a/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx +++ b/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx @@ -16,11 +16,11 @@ export const Pie = ({ visualizations, layout, config }: any) => { } = visualizations.data.rawVizData; const { defaultAxes } = visualizations.data; const { dataConfig = {}, layoutConfig = {} } = visualizations?.data?.userConfigs; - const xaxis = visualizations.data?.rawVizData?.dataConfig?.dimensions - ? visualizations.data?.rawVizData?.dataConfig?.dimensions + const xaxis = visualizations.data?.rawVizData?.pie?.dataConfig?.dimensions + ? visualizations.data?.rawVizData?.pie?.dataConfig?.dimensions : []; - const yaxis = visualizations.data?.rawVizData?.dataConfig?.metrics - ? visualizations.data?.rawVizData?.dataConfig?.metrics + const yaxis = visualizations.data?.rawVizData?.pie?.dataConfig?.metrics + ? visualizations.data?.rawVizData?.pie?.dataConfig?.metrics : []; const type = dataConfig?.chartStyles?.mode ? dataConfig?.chartStyles?.mode[0]?.modeId : 'pie'; const lastIndex = fields.length - 1; From ba4d53575cc5a9be318659411bd565ea3b121f16 Mon Sep 17 00:00:00 2001 From: rinku-kumar-psl Date: Thu, 7 Jul 2022 13:59:27 +0000 Subject: [PATCH 38/40] initialize default params for DimensonComponent and formatted the codes Signed-off-by: rinku-kumar-psl --- .../config_controls/config_button_group.tsx | 20 +++++++++---------- .../config_line_chart_styles.tsx | 16 ++++++++------- 2 files changed, 19 insertions(+), 17 deletions(-) diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx index c23653bb4..da1654ed1 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx @@ -25,16 +25,16 @@ export const ButtonGroupItem: React.FC = ({
- +
); diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx index eac9410ee..23fde5433 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx @@ -49,28 +49,30 @@ export const ConfigLineChartStyles = ({ const dimensions = useMemo(() => currentSchemas && currentSchemas.map((schema: IConfigPanelOptionSection, index: string) => { - let params; const DimensionComponent = schema.component || ButtonGroupItem; + let params = { + title: schema.name, + vizState, + ...schema.props + }; + if (schema.eleType === 'buttons') { params = { - title: schema.name, + ...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 if (schema.eleType === 'slider') { params = { + ...params, maxRange: schema?.props?.max, - title: schema.name, currentRange: vizState[schema.mapTo] || schema?.defaultState, handleSliderChange: handleConfigurationChange(schema.mapTo), - vizState, - ...schema.props, }; } + return ( <> From 268a49db497b9e6ee631ad69e714bbde0659acf8 Mon Sep 17 00:00:00 2001 From: rinku-kumar-psl Date: Fri, 8 Jul 2022 13:15:37 +0000 Subject: [PATCH 39/40] code review changes done Signed-off-by: rinku-kumar-psl --- .../common/constants/data_table.ts | 16 ---------------- .../common/constants/explorer.ts | 13 +++++++++++++ .../charts/data_table/data_table.tsx | 2 +- .../charts/data_table/data_table_footer.tsx | 2 +- .../charts/data_table/data_table_header.tsx | 2 +- .../visualizations/charts/lines/line.tsx | 2 +- 6 files changed, 17 insertions(+), 20 deletions(-) delete mode 100644 dashboards-observability/common/constants/data_table.ts diff --git a/dashboards-observability/common/constants/data_table.ts b/dashboards-observability/common/constants/data_table.ts deleted file mode 100644 index bbca653a7..000000000 --- a/dashboards-observability/common/constants/data_table.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* - * 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/dashboards-observability/common/constants/explorer.ts b/dashboards-observability/common/constants/explorer.ts index 056007d9c..f53a75b0d 100644 --- a/dashboards-observability/common/constants/explorer.ts +++ b/dashboards-observability/common/constants/explorer.ts @@ -117,3 +117,16 @@ export const AGGREGATION_OPTIONS = [ label: 'STDDEV_POP', }, ]; + +// 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; \ No newline at end of file diff --git a/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx b/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx index f68900359..e6121c21f 100644 --- a/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx +++ b/dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx @@ -32,7 +32,7 @@ import { GridFooter } from "./data_table_footer" import { COLUMN_DEFAULT_MIN_WIDTH, HEADER_HEIGHT, -} from '../../../../../common/constants/data_table'; +} from '../../../../../common/constants/explorer'; const doubleValueGetter = (params) => { diff --git a/dashboards-observability/public/components/visualizations/charts/data_table/data_table_footer.tsx b/dashboards-observability/public/components/visualizations/charts/data_table/data_table_footer.tsx index 5808f0892..f8350ddd2 100644 --- a/dashboards-observability/public/components/visualizations/charts/data_table/data_table_footer.tsx +++ b/dashboards-observability/public/components/visualizations/charts/data_table/data_table_footer.tsx @@ -24,7 +24,7 @@ import { uiSettingsService } from '../../../../../common/utils'; import { GRID_PAGE_RANGE_DISPLAY, GRID_PAGE_SIZES, -} from '../../../../../common/constants/data_table'; +} from '../../../../../common/constants/explorer'; export const GridFooter = ({ onPageSizeChanged, diff --git a/dashboards-observability/public/components/visualizations/charts/data_table/data_table_header.tsx b/dashboards-observability/public/components/visualizations/charts/data_table/data_table_header.tsx index 05d1ad1ff..1c2d2b034 100644 --- a/dashboards-observability/public/components/visualizations/charts/data_table/data_table_header.tsx +++ b/dashboards-observability/public/components/visualizations/charts/data_table/data_table_header.tsx @@ -21,7 +21,7 @@ import { uiSettingsService } from '../../../../../common/utils'; import { GRID_HEADER_COLUMN_MAX_WIDTH, ROW_DENSITIES, -} from '../../../../../common/constants/data_table'; +} from '../../../../../common/constants/explorer'; export interface RowConfigType { icon: string; diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx index 83aeefa49..5d21eead1 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -94,7 +94,7 @@ export const Line = ({ visualizations, layout, config }: any) => { }; }); - var layoutForBarMode = { + let layoutForBarMode = { barmode: 'group', }; const mergedLayout = { From b6022c755746910fe7937c7e3ec0f2f0a413a487 Mon Sep 17 00:00:00 2001 From: abasatwar Date: Fri, 8 Jul 2022 19:50:43 +0530 Subject: [PATCH 40/40] added empty line at end. Signed-off-by: abasatwar --- dashboards-observability/common/constants/explorer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dashboards-observability/common/constants/explorer.ts b/dashboards-observability/common/constants/explorer.ts index f53a75b0d..17612c44e 100644 --- a/dashboards-observability/common/constants/explorer.ts +++ b/dashboards-observability/common/constants/explorer.ts @@ -129,4 +129,4 @@ export const ROW_DENSITIES = [ { icon: 'tableDensityCompact', height: 35, selected: true }, ]; -export const HEADER_HEIGHT = 35; \ No newline at end of file +export const HEADER_HEIGHT = 35;