From 6e0c5a31832923d6499fdbe526dbbee786f2ab98 Mon Sep 17 00:00:00 2001 From: Eric Wei Date: Thu, 5 Jan 2023 14:34:09 -0800 Subject: [PATCH] Fix explorer dark mode issue and restructure scss (#157) * dark mode fixes Signed-off-by: Eric Wei * restructure scss Signed-off-by: Eric Wei * minor line removals Signed-off-by: Eric Wei Signed-off-by: Eric Wei --- .../explorer/events_views/data_grid.tsx | 2 - .../explorer/events_views/docViewRow.tsx | 3 +- .../event_analytics/explorer/explorer.tsx | 4 +- .../explorer/log_explorer.scss | 4 -- .../event_analytics/explorer/log_explorer.tsx | 1 - .../explorer/sidebar/sidebar.tsx | 2 - .../explorer/visualizations/_mixins.scss | 54 ------------------- .../explorer/visualizations/_variables.scss | 10 ---- .../config_panel/config_panel.scss | 17 +++--- .../config_panel/config_panel.tsx | 1 - .../data_configurations_panel.scss | 3 -- .../data_configurations_panel.tsx | 2 - .../explorer/visualizations/index.tsx | 3 -- .../shared_components/empty_placeholder.tsx | 1 - .../plotly_viz_editor/plotly_viz_editor.tsx | 3 -- .../shared_components/toolbar_button.tsx | 1 - .../{app.scss => visualizations.scss} | 1 - .../workspace_panel/workspace_panel.scss | 5 +- .../workspace_panel/workspace_panel.tsx | 2 - .../components/event_analytics/home/home.tsx | 2 - public/components/event_analytics/index.scss | 19 +++++++ public/index.scss | 13 +++++ public/plugin.ts | 11 ++-- public/variables.scss | 7 +++ 24 files changed, 57 insertions(+), 114 deletions(-) delete mode 100644 public/components/event_analytics/explorer/visualizations/_mixins.scss delete mode 100644 public/components/event_analytics/explorer/visualizations/_variables.scss rename public/components/event_analytics/explorer/visualizations/{app.scss => visualizations.scss} (91%) create mode 100644 public/components/event_analytics/index.scss create mode 100644 public/index.scss create mode 100644 public/variables.scss diff --git a/public/components/event_analytics/explorer/events_views/data_grid.tsx b/public/components/event_analytics/explorer/events_views/data_grid.tsx index d0385a9a00..fb15d0694c 100644 --- a/public/components/event_analytics/explorer/events_views/data_grid.tsx +++ b/public/components/event_analytics/explorer/events_views/data_grid.tsx @@ -3,8 +3,6 @@ * SPDX-License-Identifier: Apache-2.0 */ -import './data_grid.scss'; - import React, { useMemo, useState, useEffect, useRef, RefObject } from 'react'; import { IExplorerFields } from '../../../../../common/types/explorer'; import { DEFAULT_COLUMNS, PAGE_SIZE } from '../../../../../common/constants/explorer'; diff --git a/public/components/event_analytics/explorer/events_views/docViewRow.tsx b/public/components/event_analytics/explorer/events_views/docViewRow.tsx index 7a4f2c3b27..5cfb0f69c5 100644 --- a/public/components/event_analytics/explorer/events_views/docViewRow.tsx +++ b/public/components/event_analytics/explorer/events_views/docViewRow.tsx @@ -3,11 +3,10 @@ * SPDX-License-Identifier: Apache-2.0 */ -import './docView.scss'; import moment from 'moment'; import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react'; import { toPairs, uniqueId, has, forEach, isEqual } from 'lodash'; -import { EuiButtonEmpty, EuiButtonIcon, EuiIcon, EuiLink } from '@elastic/eui'; +import { EuiButtonIcon, EuiLink } from '@elastic/eui'; import { useEffect } from 'react'; import { IExplorerFields, IField } from '../../../../../common/types/explorer'; import { DocFlyout } from './doc_flyout'; diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx index 1294d03a1c..7ec96871a4 100644 --- a/public/components/event_analytics/explorer/explorer.tsx +++ b/public/components/event_analytics/explorer/explorer.tsx @@ -95,7 +95,6 @@ import { } from '../redux/slices/viualization_config_slice'; import { formatError, getDefaultVisConfig } from '../utils'; import { DataGrid } from './events_views/data_grid'; -import './explorer.scss'; import { HitsCounter } from './hits_counter/hits_counter'; import { PatternsTable } from './log_patterns/patterns_table'; import { NoResults } from './no_results'; @@ -104,6 +103,7 @@ import { TimechartHeader } from './timechart_header'; import { ExplorerVisualizations } from './visualizations'; import { CountDistribution } from './visualizations/count_distribution'; import { QueryManager } from '../../../../common/query_manager'; +import { uiSettingsService } from '../../../../common/utils'; const TYPE_TAB_MAPPING = { [SAVED_QUERY]: TAB_EVENT_ID, @@ -1478,7 +1478,7 @@ export const Explorer = ({ query, }} > -
+
( <> diff --git a/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_viz_editor.tsx b/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_viz_editor.tsx index f16c7b69e8..2d1abe549a 100644 --- a/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_viz_editor.tsx +++ b/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_viz_editor.tsx @@ -30,9 +30,6 @@ * GitHub history for details. */ -import './plotly_vis.scss'; -import './plotly_editor.scss'; - import React, { useCallback } from 'react'; import { EuiCodeEditor } from '@elastic/eui'; import compactStringify from 'json-stringify-pretty-compact'; diff --git a/public/components/event_analytics/explorer/visualizations/shared_components/toolbar_button.tsx b/public/components/event_analytics/explorer/visualizations/shared_components/toolbar_button.tsx index 99d0aca643..12e8894742 100644 --- a/public/components/event_analytics/explorer/visualizations/shared_components/toolbar_button.tsx +++ b/public/components/event_analytics/explorer/visualizations/shared_components/toolbar_button.tsx @@ -3,7 +3,6 @@ * SPDX-License-Identifier: Apache-2.0 */ -import './toolbar_button.scss'; import React from 'react'; import classNames from 'classnames'; import { EuiButton, PropsOf, EuiButtonProps } from '@elastic/eui'; diff --git a/public/components/event_analytics/explorer/visualizations/app.scss b/public/components/event_analytics/explorer/visualizations/visualizations.scss similarity index 91% rename from public/components/event_analytics/explorer/visualizations/app.scss rename to public/components/event_analytics/explorer/visualizations/visualizations.scss index 8f4e129e97..be0fb8ea39 100644 --- a/public/components/event_analytics/explorer/visualizations/app.scss +++ b/public/components/event_analytics/explorer/visualizations/visualizations.scss @@ -12,6 +12,5 @@ display: grid; grid-template-rows: auto 1fr; grid-area: workspace; - background-color: #FFF; height: 100%; } diff --git a/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.scss b/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.scss index a7c2eb66de..820236aa11 100644 --- a/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.scss +++ b/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.scss @@ -20,6 +20,9 @@ } #vis__mainContent .ws__central--canvas { - background-color: #FFF; border-right: 1px solid #D3DAE6; } + +.explorer-dark #vis__mainContent .ws__central--canvas { + border-right: 1px solid $border-color-on-dark; +} diff --git a/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx b/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx index 81bcb6e0b0..a5fdd3f001 100644 --- a/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx +++ b/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx @@ -3,8 +3,6 @@ * SPDX-License-Identifier: Apache-2.0 */ -import './workspace_panel.scss'; - import React, { useState, useMemo } from 'react'; import { isEmpty } from 'lodash'; import { EuiPanel, EuiSwitch } from '@elastic/eui'; diff --git a/public/components/event_analytics/home/home.tsx b/public/components/event_analytics/home/home.tsx index 1de183f492..ee69667b8c 100644 --- a/public/components/event_analytics/home/home.tsx +++ b/public/components/event_analytics/home/home.tsx @@ -3,8 +3,6 @@ * SPDX-License-Identifier: Apache-2.0 */ -import './home.scss'; - import React, { useState, ReactElement, useRef, useEffect } from 'react'; import { useDispatch, batch, useSelector } from 'react-redux'; import { uniqueId } from 'lodash'; diff --git a/public/components/event_analytics/index.scss b/public/components/event_analytics/index.scss new file mode 100644 index 0000000000..00accf3bf9 --- /dev/null +++ b/public/components/event_analytics/index.scss @@ -0,0 +1,19 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +@import 'home/home'; +@import 'explorer/log_explorer'; +@import 'explorer/explorer'; +@import 'explorer/sidebar/sidebar'; +@import 'explorer/events_views/data_grid'; +@import 'explorer/events_views/docView'; +@import 'explorer/visualizations/config_panel/config_panel'; +@import 'explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel'; +@import 'explorer/visualizations/visualizations'; +@import 'explorer/visualizations/shared_components/empty_placeholder'; +@import 'explorer/visualizations/shared_components/toolbar_button'; +@import 'explorer/visualizations/shared_components/plotly_viz_editor/plotly_editor'; +@import 'explorer/visualizations/shared_components/plotly_viz_editor/plotly_vis'; +@import 'explorer/visualizations/workspace_panel/workspace_panel'; \ No newline at end of file diff --git a/public/index.scss b/public/index.scss new file mode 100644 index 0000000000..a7dac9456b --- /dev/null +++ b/public/index.scss @@ -0,0 +1,13 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +/* base */ + +@import 'variables'; + +/* components */ + +// event analytics +@import 'components/event_analytics/index'; \ No newline at end of file diff --git a/public/plugin.ts b/public/plugin.ts index ecebf755de..cfd6c29263 100644 --- a/public/plugin.ts +++ b/public/plugin.ts @@ -3,14 +3,9 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { - AppCategory, - AppMountParameters, - CoreSetup, - CoreStart, - DEFAULT_APP_CATEGORIES, - Plugin, PluginInitializerContext, -} from '../../../src/core/public'; +import './index.scss'; + +import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '../../../src/core/public'; import { observabilityApplicationsID, observabilityApplicationsPluginOrder, diff --git a/public/variables.scss b/public/variables.scss new file mode 100644 index 0000000000..943d507498 --- /dev/null +++ b/public/variables.scss @@ -0,0 +1,7 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +// dark mode border color +$border-color-on-dark: #343741;