From 2428c8ca46d3b723ea88ff1d416f5c61c3b09348 Mon Sep 17 00:00:00 2001 From: Eric Wei Date: Wed, 4 Jan 2023 19:48:38 -0800 Subject: [PATCH 1/3] dark mode fixes Signed-off-by: Eric Wei --- .../event_analytics/explorer/explorer.tsx | 3 ++- .../explorer/visualizations/_variables.scss | 7 ++----- .../explorer/visualizations/app.scss | 1 - .../config_panel/config_panel.scss | 17 +++++++++-------- .../workspace_panel/workspace_panel.scss | 7 ++++++- 5 files changed, 19 insertions(+), 16 deletions(-) diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx index 1294d03a1c..7c9c571ef0 100644 --- a/public/components/event_analytics/explorer/explorer.tsx +++ b/public/components/event_analytics/explorer/explorer.tsx @@ -104,6 +104,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 +1479,7 @@ export const Explorer = ({ query, }} > -
+
Date: Wed, 4 Jan 2023 21:05:33 -0800 Subject: [PATCH 2/3] restructure scss Signed-off-by: Eric Wei --- .../explorer/events_views/data_grid.tsx | 2 - .../explorer/events_views/docViewRow.tsx | 3 +- .../event_analytics/explorer/explorer.tsx | 1 - .../explorer/log_explorer.scss | 4 -- .../event_analytics/explorer/log_explorer.tsx | 1 - .../explorer/sidebar/sidebar.tsx | 2 - .../explorer/visualizations/_mixins.scss | 54 ------------------- .../config_panel/config_panel.scss | 2 - .../config_panel/config_panel.tsx | 1 - .../data_configurations_panel.scss | 2 +- .../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} | 0 .../workspace_panel/workspace_panel.scss | 2 - .../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 | 2 + .../_variables.scss => variables.scss} | 0 23 files changed, 36 insertions(+), 86 deletions(-) delete mode 100644 public/components/event_analytics/explorer/visualizations/_mixins.scss rename public/components/event_analytics/explorer/visualizations/{app.scss => visualizations.scss} (100%) create mode 100644 public/components/event_analytics/index.scss create mode 100644 public/index.scss rename public/{components/event_analytics/explorer/visualizations/_variables.scss => variables.scss} (100%) 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 7c9c571ef0..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'; diff --git a/public/components/event_analytics/explorer/log_explorer.scss b/public/components/event_analytics/explorer/log_explorer.scss index ae6d83409c..772a5b873b 100644 --- a/public/components/event_analytics/explorer/log_explorer.scss +++ b/public/components/event_analytics/explorer/log_explorer.scss @@ -25,10 +25,6 @@ } } -// #queryTabs { -// height: calc(100vh - 98px); -// } - .tab-title { display: inline-block; margin-right: 5px; diff --git a/public/components/event_analytics/explorer/log_explorer.tsx b/public/components/event_analytics/explorer/log_explorer.tsx index 9996b19482..656cc82841 100644 --- a/public/components/event_analytics/explorer/log_explorer.tsx +++ b/public/components/event_analytics/explorer/log_explorer.tsx @@ -4,7 +4,6 @@ */ /* eslint-disable react-hooks/exhaustive-deps */ -import './log_explorer.scss'; import React, { useEffect, useMemo, useRef, useState } from 'react'; import { useDispatch, useSelector, batch } from 'react-redux'; import { uniqueId, map, isEmpty } from 'lodash'; diff --git a/public/components/event_analytics/explorer/sidebar/sidebar.tsx b/public/components/event_analytics/explorer/sidebar/sidebar.tsx index 794ce53285..9b57aae095 100644 --- a/public/components/event_analytics/explorer/sidebar/sidebar.tsx +++ b/public/components/event_analytics/explorer/sidebar/sidebar.tsx @@ -3,8 +3,6 @@ * SPDX-License-Identifier: Apache-2.0 */ -import './sidebar.scss'; - import React, { useState } from 'react'; import { isEmpty } from 'lodash'; import { EuiTitle, EuiSpacer, EuiFieldSearch, EuiAccordion } from '@elastic/eui'; diff --git a/public/components/event_analytics/explorer/visualizations/_mixins.scss b/public/components/event_analytics/explorer/visualizations/_mixins.scss deleted file mode 100644 index ae22f3905f..0000000000 --- a/public/components/event_analytics/explorer/visualizations/_mixins.scss +++ /dev/null @@ -1,54 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -// sass-lint:disable-block indentation, no-color-keywords - -// SASSTODO: Create this in EUI -@mixin lnsOverflowShadowHorizontal { - $hideHeight: $euiScrollBarCorner * 1.25; - mask-image: linear-gradient( - to right, - transparentize(red, .9) 0%, - transparentize(red, 0) $hideHeight, - transparentize(red, 0) calc(100% - #{$hideHeight}), - transparentize(red, .9) 100% - ); -} - -// Static styles for a draggable item -@mixin lnsDraggable { - @include euiSlightShadow; - background: lightOrDarkTheme($euiColorEmptyShade, $euiColorLightestShade); - border: $euiBorderWidthThin dashed transparent; - cursor: grab; -} - -// Static styles for a drop area -@mixin lnsDroppable { - border: $euiBorderWidthThin dashed $euiBorderColor; -} - -// Hovering state for drag item and drop area -@mixin lnsDragDropHover { - &:hover { - border: $euiBorderWidthThin dashed $euiColorMediumShade; - } -} - -// Style for drop area when there's an item being dragged -@mixin lnsDroppableActive { - background-color: transparentize($euiColorVis0, .9); -} - -// Style for drop area while hovering with item -@mixin lnsDroppableActiveHover { - background-color: transparentize($euiColorVis0, .75); - border: $euiBorderWidthThin dashed $euiColorVis0; -} - -// Style for drop area that is not allowed for current item -@mixin lnsDroppableNotAllowed { - opacity: .5; -} diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss b/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss index 39652ed21d..7025380fc7 100644 --- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss +++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss @@ -3,8 +3,6 @@ * SPDX-License-Identifier: Apache-2.0 */ -@import '../variables'; - // // LAYOUT // diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx index d00bb9c29d..453b0d7c55 100644 --- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx +++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx @@ -19,7 +19,6 @@ import { getVisTypeData } from '../../../../visualizations/charts/helpers/viz_ty import { TabContext } from '../../../hooks'; import { reset as resetVisualizationConfig } from '../../../redux/slices/viualization_config_slice'; import { getDefaultSpec } from '../visualization_specs/default_spec'; -import './config_panel.scss'; const CONFIG_LAYOUT_TEMPLATE = ` { diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.scss b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.scss index a6ac6798cb..68a0bc9f42 100644 --- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.scss +++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.scss @@ -6,7 +6,7 @@ .explorer__vizDataConfig { @include euiYScrollWithShadows; - background: $euiColorLightestShade; + // background: $euiColorLightestShade; border-left: $euiBorderThin; border-right: $euiBorderThin; position: relative; diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx index 1d745b8562..2241f435ab 100644 --- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx +++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx @@ -3,8 +3,6 @@ * SPDX-License-Identifier: Apache-2.0 */ -import './data_configurations_panel.scss'; - import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'; import { EuiButton, diff --git a/public/components/event_analytics/explorer/visualizations/index.tsx b/public/components/event_analytics/explorer/visualizations/index.tsx index 98ab13799c..e4207dfbff 100644 --- a/public/components/event_analytics/explorer/visualizations/index.tsx +++ b/public/components/event_analytics/explorer/visualizations/index.tsx @@ -3,10 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import './app.scss'; - import { isEmpty } from 'lodash'; - import React from 'react'; import { EuiResizableContainer } from '@elastic/eui'; import { QueryManager } from 'common/query_manager'; diff --git a/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.tsx b/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.tsx index 56b8886fe2..397672821e 100644 --- a/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.tsx +++ b/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.tsx @@ -6,7 +6,6 @@ import React from 'react'; import { EuiIcon, EuiText, EuiSpacer } from '@elastic/eui'; import { FormattedMessage } from '@osd/i18n/react'; -import './empty_placeholder.scss'; export const EmptyPlaceholder = (props: { icon: string }) => ( <> 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 100% rename from public/components/event_analytics/explorer/visualizations/app.scss rename to public/components/event_analytics/explorer/visualizations/visualizations.scss 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 bd0d6f959e..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 @@ -3,8 +3,6 @@ * SPDX-License-Identifier: Apache-2.0 */ -@import '../variables'; - .ws__header-dark { background-color: transparent; } 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 1e3189e578..1610c0dbf8 100644 --- a/public/plugin.ts +++ b/public/plugin.ts @@ -3,6 +3,8 @@ * SPDX-License-Identifier: Apache-2.0 */ +import './index.scss'; + import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '../../../src/core/public'; import { observabilityID, diff --git a/public/components/event_analytics/explorer/visualizations/_variables.scss b/public/variables.scss similarity index 100% rename from public/components/event_analytics/explorer/visualizations/_variables.scss rename to public/variables.scss From 8607f7b962bfcc788cbc1a037db33e8e18624271 Mon Sep 17 00:00:00 2001 From: Eric Wei Date: Wed, 4 Jan 2023 21:13:24 -0800 Subject: [PATCH 3/3] minor line removals Signed-off-by: Eric Wei --- .../config_controls/data_configurations_panel.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.scss b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.scss index 68a0bc9f42..cac373f90a 100644 --- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.scss +++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.scss @@ -4,9 +4,6 @@ */ .explorer__vizDataConfig { - @include euiYScrollWithShadows; - - // background: $euiColorLightestShade; border-left: $euiBorderThin; border-right: $euiBorderThin; position: relative;