From 3aa8eaf1a29d363cc4f042a594f6e0e8b9708fda Mon Sep 17 00:00:00 2001 From: Lin Wang Date: Wed, 23 Aug 2023 14:15:29 +0800 Subject: [PATCH] Feat mitigate to oui style variables (#227) * feat: remove customized font size and font weight Signed-off-by: Lin Wang * feat: update color to $ouiLinkColor Signed-off-by: Lin Wang * feat: remove white background for refresh interval Signed-off-by: Lin Wang * remove ace theme Signed-off-by: Lin Wang * refactor: update to Signed-off-by: Lin Wang --------- Signed-off-by: Lin Wang --- public/ace-themes/sql_console.js | 19 -- public/components/monitoring/index.scss | 2 +- public/components/monitoring/index.tsx | 8 +- .../monitoring/model_deployment_table.tsx | 11 +- .../monitoring/tests/index.test.tsx | 15 -- public/components/preview_panel/index.tsx | 8 +- .../components/preview_panel/nodes_table.scss | 2 +- public/index.scss | 183 ------------------ public/index.ts | 2 - 9 files changed, 11 insertions(+), 239 deletions(-) delete mode 100644 public/ace-themes/sql_console.js delete mode 100644 public/index.scss diff --git a/public/ace-themes/sql_console.js b/public/ace-themes/sql_console.js deleted file mode 100644 index b0d4898c..00000000 --- a/public/ace-themes/sql_console.js +++ /dev/null @@ -1,19 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import * as ace from 'brace'; - -ace.define('ace/theme/sql_console', ['require', 'exports', 'module', 'ace/lib/dom'], function ( - acequire, - exports, - module -) { - exports.isDark = false; - exports.cssClass = 'ace-sql-console'; - exports.cssText = require('../index.scss'); - - const dom = acequire('../lib/dom'); - dom.importCssString(exports.cssText, exports.cssClass); -}); diff --git a/public/components/monitoring/index.scss b/public/components/monitoring/index.scss index f9809d2c..f44332e6 100644 --- a/public/components/monitoring/index.scss +++ b/public/components/monitoring/index.scss @@ -15,7 +15,7 @@ .ml-modelModelIdText { &:hover{ cursor: pointer; - color: #006BB4; + color: $ouiLinkColor; text-decoration: underline; } } diff --git a/public/components/monitoring/index.tsx b/public/components/monitoring/index.tsx index e218a0c9..03d8d3b9 100644 --- a/public/components/monitoring/index.tsx +++ b/public/components/monitoring/index.tsx @@ -14,7 +14,6 @@ import { } from '@elastic/eui'; import React, { useState, useRef, useCallback } from 'react'; -import { useUiSetting } from '../../../../../src/plugins/opensearch_dashboards_react/public'; import { ModelDeploymentProfile } from '../../apis/profile'; import { RefreshInterval } from '../common/refresh_interval'; import { PreviewPanel } from '../preview_panel'; @@ -36,7 +35,6 @@ export const Monitoring = () => { reload, searchByStatus, } = useMonitoring(); - const darkMode = useUiSetting('theme:darkMode'); const [previewModel, setPreviewModel] = useState(null); const searchInputRef = useRef(); @@ -75,11 +73,7 @@ export const Monitoring = () => { - - , - ]} + rightSideItems={[]} /> diff --git a/public/components/monitoring/model_deployment_table.tsx b/public/components/monitoring/model_deployment_table.tsx index 6e18c99b..d9f785cd 100644 --- a/public/components/monitoring/model_deployment_table.tsx +++ b/public/components/monitoring/model_deployment_table.tsx @@ -98,8 +98,8 @@ export const ModelDeploymentTable = ({ return (
- Not responding on {planningNodesCount} of{' '} - {planningNodesCount} nodes + Not responding on {planningNodesCount} of {planningNodesCount}{' '} + nodes
); @@ -108,8 +108,7 @@ export const ModelDeploymentTable = ({ return (
- Responding on {planningNodesCount} of{' '} - {planningNodesCount} nodes + Responding on {planningNodesCount} of {planningNodesCount} nodes
); @@ -117,8 +116,8 @@ export const ModelDeploymentTable = ({ return (
- Partially responding on{' '} - {respondingNodesCount} of {planningNodesCount} nodes + Partially responding on {respondingNodesCount} of{' '} + {planningNodesCount} nodes
); diff --git a/public/components/monitoring/tests/index.test.tsx b/public/components/monitoring/tests/index.test.tsx index fda619b8..3dd7d0dd 100644 --- a/public/components/monitoring/tests/index.test.tsx +++ b/public/components/monitoring/tests/index.test.tsx @@ -6,7 +6,6 @@ import userEvent from '@testing-library/user-event'; import React from 'react'; -import * as opensearchDashboardsReactExports from '../../../../../../src/plugins/opensearch_dashboards_react/public'; import { render, screen, waitFor, within } from '../../../../test/test_utils'; import { Monitoring } from '../index'; import * as useMonitoringExports from '../use_monitoring'; @@ -330,18 +329,4 @@ describe('', () => { await user.click(screen.getByLabelText('Close this dialog')); expect(reload).not.toHaveBeenCalled(); }); - - it('should NOT render background for refresh interval picker in the dark mode', () => { - const useUiSettingMock = jest - .spyOn(opensearchDashboardsReactExports, 'useUiSetting') - .mockReturnValue(true); - - setup(); - expect( - screen.getByLabelText('current interval value').closest('div.euiFormControlLayout') - ?.parentElement - ).not.toHaveStyle('background-color: rgb(255, 255, 255);'); - - useUiSettingMock.mockRestore(); - }); }); diff --git a/public/components/preview_panel/index.tsx b/public/components/preview_panel/index.tsx index a51e2487..354dc2a9 100644 --- a/public/components/preview_panel/index.tsx +++ b/public/components/preview_panel/index.tsx @@ -98,15 +98,13 @@ export const PreviewPanel = ({ onClose, model }: Props) => { - Model ID + Model ID - Source + Source {source} - - Model status by node - + Model status by node {respondingStatus} diff --git a/public/components/preview_panel/nodes_table.scss b/public/components/preview_panel/nodes_table.scss index 2406e37c..6a0cc41f 100644 --- a/public/components/preview_panel/nodes_table.scss +++ b/public/components/preview_panel/nodes_table.scss @@ -1,7 +1,7 @@ .ml-nodesTableNodeIdCellText { &:hover{ cursor: pointer; - color: #006BB4; + color: $ouiLinkColor; text-decoration: underline; } } diff --git a/public/index.scss b/public/index.scss deleted file mode 100644 index 945af8c8..00000000 --- a/public/index.scss +++ /dev/null @@ -1,183 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -/* stylelint-disable no-empty-source */ -.ace-sql-console { - .ace_gutter { - background: rgb(237, 239, 243); - color: rgb(0, 0, 0); - } - - .ace_print-margin { - width: 1px; - background: #e8e8e8; - } - - .ace_fold { - background-color: #6b72e6; - } - - background-color: rgb(245, 247, 250); - color: black; - - .ace_marker-layer { - .ace_active-line.ace_active-line { - background-color: rgb(211, 218, 230); - } - - .ace_selection { - background: rgb(181, 213, 255); - } - - .ace_step { - background: rgb(252, 255, 0); - } - - .ace_stack { - background: rgb(164, 229, 101); - } - - .ace_bracket { - margin: -1px 0 0 -1px; - border: 1px solid rgb(192, 192, 192); - } - - .ace_active-line { - background: rgba(0, 0, 0, 0.07); - } - - .ace_selected-word { - background: rgb(250, 250, 255); - border: 1px solid rgb(200, 200, 250); - } - } - - .ace_cursor { - color: black; - } - - .ace_invisible { - color: rgb(191, 191, 191); - } - - .ace_storage { - color: rgb(157, 106, 242); - } - - .ace_keyword { - color: rgb(157, 106, 242); - } - - .ace_constant { - color: rgb(197, 6, 11); - } - - .ace_constant.ace_buildin { - color: rgb(88, 72, 246); - } - - .ace_constant.ace_language { - color: rgb(88, 92, 246); - } - - .ace_constant.ace_library { - color: rgb(6, 150, 14); - } - - .ace_invalid { - background-color: rgba(255, 0, 0, 0.1); - color: red; - } - - .ace_support.ace_function { - color: rgb(60, 76, 114); - } - - .ace_support.ace_constant { - color: rgb(6, 150, 14); - } - - .ace_support.ace_type { - color: rgb(109, 121, 222); - } - - .ace_support.ace_class { - color: rgb(109, 121, 222); - } - - .ace_keyword.ace_operator { - color: rgb(104, 118, 135); - } - - .ace_string { - color: rgb(3, 106, 7); - } - - .ace_comment { - color: rgb(76, 136, 107); - } - - .ace_comment.ace_doc { - color: rgb(0, 102, 255); - } - - .ace_comment.ace_doc.ace_tag { - color: rgb(128, 159, 191); - } - - .ace_constant.ace_numeric { - color: rgb(0, 0, 205); - } - - .ace_variable { - color: rgb(49, 132, 149); - } - - .ace_xml-pe { - color: rgb(104, 104, 91); - } - - .ace_entity.ace_name.ace_function { - color: #0000a2; - } - - .ace_heading { - color: rgb(12, 7, 255); - } - - .ace_list { - color: rgb(185, 6, 144); - } - - .ace_meta.ace_tag { - color: rgb(0, 22, 142); - } - - .ace_string.ace_regex { - color: rgb(255, 0, 0); - } - - .ace_gutter-active-line { - background-color: rgb(211, 218, 230); - } - - .ace_indent-guide { - background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==') - right repeat-y; - } -} - -.ace-sql-console.ace_multiselect { - .ace_selection.ace_start { - box-shadow: 0 0 3px 0px white; - } -} - -.ace_editor { - .ace-sql-console { - height: 200px; - } -} - diff --git a/public/index.ts b/public/index.ts index 19db189c..5b8bde1d 100644 --- a/public/index.ts +++ b/public/index.ts @@ -3,8 +3,6 @@ * SPDX-License-Identifier: Apache-2.0 */ -import './index.scss'; - import { MlCommonsPluginPlugin } from './plugin'; // This exports static code and TypeScript types,