From 3d4d72e7cce672bb1552c58ec962ace613d70498 Mon Sep 17 00:00:00 2001 From: Eric Wei Date: Thu, 16 Mar 2023 11:49:51 -0700 Subject: [PATCH] Fix for hover issue on docs of discover/explorer data grid (#329) * remove unused log view Signed-off-by: Eric Wei * add root class name Signed-off-by: Eric Wei * update tests Signed-off-by: Eric Wei --------- Signed-off-by: Eric Wei --- .../explorer/events_views/data_grid.scss | 745 +++--- .../event_analytics/explorer/explorer.tsx | 4 +- .../__snapshots__/logs_view.test.tsx.snap | 2154 ----------------- .../charts/__tests__/logs_view.test.tsx | 30 - .../charts/logs_view/logs_view.scss | 21 - .../charts/logs_view/logs_view.tsx | 40 - .../charts/logs_view/logs_view_type.ts | 69 - .../visualizations/charts/vis_types.ts | 2 - 8 files changed, 376 insertions(+), 2689 deletions(-) delete mode 100644 public/components/visualizations/charts/__tests__/__snapshots__/logs_view.test.tsx.snap delete mode 100644 public/components/visualizations/charts/__tests__/logs_view.test.tsx delete mode 100644 public/components/visualizations/charts/logs_view/logs_view.scss delete mode 100644 public/components/visualizations/charts/logs_view/logs_view.tsx delete mode 100644 public/components/visualizations/charts/logs_view/logs_view_type.ts diff --git a/public/components/event_analytics/explorer/events_views/data_grid.scss b/public/components/event_analytics/explorer/events_views/data_grid.scss index 6de07488a4..f0dcbfbbba 100644 --- a/public/components/event_analytics/explorer/events_views/data_grid.scss +++ b/public/components/event_analytics/explorer/events_views/data_grid.scss @@ -3,488 +3,489 @@ * SPDX-License-Identifier: Apache-2.0 */ -/** - * 1. Stack content vertically so the table can scroll when its constrained by a fixed container height. - */ - doc-table { - @include euiScrollBar; - overflow: auto; - flex: 1 1 100%; - flex-direction: column; /* 1 */ +.obsExplorer { + /** + * 1. Stack content vertically so the table can scroll when its constrained by a fixed container height. + */ + doc-table { + @include euiScrollBar; + overflow: auto; + flex: 1 1 100%; + flex-direction: column; /* 1 */ + + .spinner { + position: absolute; + top: 40%; + left: 0; + right: 0; + z-index: $euiZLevel1; + opacity: 0.5; + } + } - .spinner { - position: absolute; - top: 40%; - left: 0; - right: 0; - z-index: $euiZLevel1; + .osdDocTable__container.loading { opacity: 0.5; } -} -.osdDocTable__container.loading { - opacity: 0.5; -} + .osdDocTable { + font-size: $euiFontSizeXS; -.osdDocTable { - font-size: $euiFontSizeXS; + th { + white-space: nowrap; + padding-right: $euiSizeS; - th { - white-space: nowrap; - padding-right: $euiSizeS; - - .fa { - font-size: 1.1em; + .fa { + font-size: 1.1em; + } } } -} - -.osd-table, -.osdDocTable { - /** - * Style OpenSearch document _source in table view
key:
value
- * Use alpha so this will stand out against non-white backgrounds, e.g. the highlighted - * row in the Context Log. - */ - dl.source { - margin-bottom: 0; - line-height: 2em; - word-break: break-word; - - dt, - dd { - display: inline; - } + .osd-table, + .osdDocTable { + /** + * Style OpenSearch document _source in table view
key:
value
+ * Use alpha so this will stand out against non-white backgrounds, e.g. the highlighted + * row in the Context Log. + */ + + dl.source { + margin-bottom: 0; + line-height: 2em; + word-break: break-word; + + dt, + dd { + display: inline; + } - dt { - background-color: transparentize(shade($euiColorPrimary, 20%), 0.9); - color: $euiTextColor; - padding: ($euiSizeXS / 2) $euiSizeXS; - margin-right: $euiSizeXS; - word-break: normal; - border-radius: $euiBorderRadius; + dt { + background-color: transparentize(shade($euiColorPrimary, 20%), 0.9); + color: $euiTextColor; + padding: ($euiSizeXS / 2) $euiSizeXS; + margin-right: $euiSizeXS; + word-break: normal; + border-radius: $euiBorderRadius; + } } } -} -.osdDocTable__row { - td { - position: relative; + .osdDocTable__row { + td { + position: relative; - &:hover { - .osdDocTableRowFilterButton { - opacity: 1; + &:hover { + .osdDocTableRowFilterButton { + opacity: 1; + } } } } -} -.osdDocTable__row--highlight { - td, - .osdDocTableRowFilterButton { - background-color: tintOrShade($euiColorPrimary, 90%, 70%); + .osdDocTable__row--highlight { + td, + .osdDocTableRowFilterButton { + background-color: tintOrShade($euiColorPrimary, 90%, 70%); + } } -} -.osdDocTable__bar { - margin: $euiSizeXS $euiSizeXS 0; -} + .osdDocTable__bar { + margin: $euiSizeXS $euiSizeXS 0; + } -.osdDocTable__bar--footer { - position: relative; - margin: -($euiSize * 3) $euiSizeXS 0; -} + .osdDocTable__bar--footer { + position: relative; + margin: -($euiSize * 3) $euiSizeXS 0; + } -.osdDocTable__padBottom { - padding-bottom: $euiSizeXL; -} + .osdDocTable__padBottom { + padding-bottom: $euiSizeXL; + } -.osdDocTable__error { - display: flex; - flex-direction: column; - justify-content: center; - flex: 1 0 100%; - text-align: center; -} + .osdDocTable__error { + display: flex; + flex-direction: column; + justify-content: center; + flex: 1 0 100%; + text-align: center; + } -.truncate-by-height { - overflow: hidden; -} + .truncate-by-height { + overflow: hidden; + } -.table { - // Nesting .table { - background-color: $euiColorEmptyShade; + // Nesting + .table { + background-color: $euiColorEmptyShade; + } } -} -.osd-table { - // sub tables should not have a leading border - .table .table { - margin-bottom: 0; + .osd-table { + // sub tables should not have a leading border + .table .table { + margin-bottom: 0; - tr:first-child > td { - border-top: none; - } + tr:first-child > td { + border-top: none; + } - td.field-name { - font-weight: $euiFontWeightBold; + td.field-name { + font-weight: $euiFontWeightBold; + } } - } - th { - text-align: left; - font-weight: bold; + th { + text-align: left; + font-weight: bold; + } } -} -table { - th { - i.fa-sort { - color: $euiColorLightShade; - } + table { + th { + i.fa-sort { + color: $euiColorLightShade; + } - button.fa-sort-asc, - button.fa-sort-down, - i.fa-sort-asc, - i.fa-sort-down { - color: $euiColorPrimary; - } + button.fa-sort-asc, + button.fa-sort-down, + i.fa-sort-asc, + i.fa-sort-down { + color: $euiColorPrimary; + } - button.fa-sort-desc, - button.fa-sort-up, - i.fa-sort-desc, - i.fa-sort-up { - color: $euiColorPrimary; + button.fa-sort-desc, + button.fa-sort-up, + i.fa-sort-desc, + i.fa-sort-up { + color: $euiColorPrimary; + } } } -} -/* ------------- table cell ---------- */ -.osdDocTableCell__dataField { - white-space: pre-wrap; -} + /* ------------- table cell ---------- */ + .osdDocTableCell__dataField { + white-space: pre-wrap; + } -.osdDocTableCell__toggleDetails { - padding: 4px 0 0 0!important; -} + .osdDocTableCell__toggleDetails { + padding: 4px 0 0 0!important; + } -.osdDocTableCell__filter { - position: absolute; - white-space: nowrap; - right: 0; -} + .osdDocTableCell__filter { + position: absolute; + white-space: nowrap; + right: 0; + } -/** - * 1. Align icon with text in cell. - * 2. Use opacity to make this element accessible to screen readers and keyboard. - * 3. Show on focus to enable keyboard accessibility. - */ + /** + * 1. Align icon with text in cell. + * 2. Use opacity to make this element accessible to screen readers and keyboard. + * 3. Show on focus to enable keyboard accessibility. + */ -.osdDocTableRowFilterButton { - appearance: none; - background-color: $euiColorEmptyShade; - border: none; - padding: 0 $euiSizeXS; - font-size: $euiFontSizeS; - line-height: 1; /* 1 */ - display: inline-block; - opacity: 0; /* 2 */ + .osdDocTableRowFilterButton { + appearance: none; + background-color: $euiColorEmptyShade; + border: none; + padding: 0 $euiSizeXS; + font-size: $euiFontSizeS; + line-height: 1; /* 1 */ + display: inline-block; + opacity: 0; /* 2 */ - &:focus { - opacity: 1; /* 3 */ + &:focus { + opacity: 1; /* 3 */ + } } -} -/* ------------- End of table cell ---------- */ + /* ------------- End of table cell ---------- */ -/* ------------- Discover like style -------- */ -.dscAppWrapper { - display: flex; - flex-direction: column; - flex-grow: 1; - overflow: hidden; -} + /* ------------- Discover like style -------- */ + .dscAppWrapper { + display: flex; + flex-direction: column; + flex-grow: 1; + overflow: hidden; + } -.dscAppContainer { - > * { - position: relative; + .dscAppContainer { + > * { + position: relative; + } + } + discover-app { + flex-grow: 1; } -} -discover-app { - flex-grow: 1; -} -.dscHistogram { - display: flex; - height: 200px; - padding: $euiSizeS; -} + .dscHistogram { + display: flex; + height: 200px; + padding: $euiSizeS; + } -// SASSTODO: replace the z-index value with a variable -.dscWrapper { - padding-left: $euiSizeXL; - padding-right: $euiSizeS; - margin-top: $euiSizeM; - z-index: 1; - @include euiBreakpoint('xs', 's', 'm') { - padding-left: $euiSizeS; + // SASSTODO: replace the z-index value with a variable + .dscWrapper { + padding-left: $euiSizeXL; + padding-right: $euiSizeS; + margin-top: $euiSizeM; + z-index: 1; + @include euiBreakpoint('xs', 's', 'm') { + padding-left: $euiSizeS; + } } -} -@include euiPanel('.dscWrapper__content'); + @include euiPanel('.dscWrapper__content'); -.dscWrapper__content { - padding-top: $euiSizeXS; - background-color: $euiColorEmptyShade; + .dscWrapper__content { + padding-top: $euiSizeXS; + background-color: $euiColorEmptyShade; - .osd-table { - margin-bottom: 0; + .osd-table { + margin-bottom: 0; + } } -} -.dscTimechart { - display: block; - position: relative; + .dscTimechart { + display: block; + position: relative; - // SASSTODO: the visualizing component should have an option or a modifier - .series > rect { - fill-opacity: 0.5; - stroke-width: 1; + // SASSTODO: the visualizing component should have an option or a modifier + .series > rect { + fill-opacity: 0.5; + stroke-width: 1; + } } -} - -.dscResultCount { - padding-top: $euiSizeXS; -} -.dscTimechart__header { - display: flex; - justify-content: center; - min-height: $euiSizeXXL; - padding: $euiSizeXS 0; -} + .dscResultCount { + padding-top: $euiSizeXS; + } -.dscOverlay { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 20; - padding-top: $euiSizeM; - - opacity: 0.75; - text-align: center; - background-color: transparent; -} + .dscTimechart__header { + display: flex; + justify-content: center; + min-height: $euiSizeXXL; + padding: $euiSizeXS 0; + } -.dscTable { - overflow: auto; + .dscOverlay { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 20; + padding-top: $euiSizeM; - // SASSTODO: add a monospace modifier to the doc-table component - .osdDocTable__row { - font-family: $euiCodeFontFamily; - font-size: $euiFontSizeXS; + opacity: 0.75; + text-align: center; + background-color: transparent; } -} -// SASSTODO: replace the padding value with a variable -.dscTable__footer { - background-color: $euiColorLightShade; - padding: 5px 10px; - text-align: center; -} + .dscTable { + overflow: auto; + + // SASSTODO: add a monospace modifier to the doc-table component + .osdDocTable__row { + font-family: $euiCodeFontFamily; + font-size: $euiFontSizeXS; + } + } -.dscResults { - h3 { - margin: -20px 0 10px 0; + // SASSTODO: replace the padding value with a variable + .dscTable__footer { + background-color: $euiColorLightShade; + padding: 5px 10px; text-align: center; } -} -.dscResults__interval { - display: inline-block; - width: auto; -} + .dscResults { + h3 { + margin: -20px 0 10px 0; + text-align: center; + } + } -.dscSkipButton { - position: absolute; - right: $euiSizeM; - top: $euiSizeXS; -} + .dscResults__interval { + display: inline-block; + width: auto; + } -.dscTableFixedScroll { - overflow-x: auto; - padding-bottom: 0; + .dscSkipButton { + position: absolute; + right: $euiSizeM; + top: $euiSizeXS; + } - + .dscTableFixedScroll__scroller { - position: fixed; - bottom: 0; + .dscTableFixedScroll { overflow-x: auto; - overflow-y: hidden; + padding-bottom: 0; + + + .dscTableFixedScroll__scroller { + position: fixed; + bottom: 0; + overflow-x: auto; + overflow-y: hidden; + } } -} -.dscCollapsibleSidebar { - position: relative; - z-index: 1; + .dscCollapsibleSidebar { + position: relative; + z-index: 1; - .dscCollapsibleSidebar__collapseButton { - position: absolute; - top: 0; - right: -$euiSizeXL + 4; - cursor: pointer; - z-index: -1; - min-height: $euiSizeM; - min-width: $euiSizeM; - padding: $euiSizeXS * .5; - } - - &.closed { - width: 0 !important; - border-right-width: 0; - border-left-width: 0; .dscCollapsibleSidebar__collapseButton { - right: -$euiSizeL + 4; + position: absolute; + top: 0; + right: -$euiSizeXL + 4; + cursor: pointer; + z-index: -1; + min-height: $euiSizeM; + min-width: $euiSizeM; + padding: $euiSizeXS * .5; } - } -} -@include euiBreakpoint('xs', 's', 'm') { - .dscCollapsibleSidebar { &.closed { - display: none; + width: 0 !important; + border-right-width: 0; + border-left-width: 0; + .dscCollapsibleSidebar__collapseButton { + right: -$euiSizeL + 4; + } } + } - .dscCollapsibleSidebar__collapseButton { - display: none; + @include euiBreakpoint('xs', 's', 'm') { + .dscCollapsibleSidebar { + &.closed { + display: none; + } + + .dscCollapsibleSidebar__collapseButton { + display: none; + } } } -} -/* ------------- Detail table cell -------- */ -/** - * 1. Visually align the actions with the tabs. We can improve this by using flexbox instead, at a later point. - */ - .osdDocTableDetails__actions { - float: right; - padding-top: $euiSizeS; /* 1 */ -} + /* ------------- Detail table cell -------- */ + /** + * 1. Visually align the actions with the tabs. We can improve this by using flexbox instead, at a later point. + */ + .osdDocTableDetails__actions { + float: right; + padding-top: $euiSizeS; /* 1 */ + } -// Overwrite the border on the bootstrap table -.osdDocTableDetails__row { + // Overwrite the border on the bootstrap table + .osdDocTableDetails__row { - > td { - // Offsets negative margins from an inner flex group - padding: $euiSizeL !important; + > td { + // Offsets negative margins from an inner flex group + padding: $euiSizeL !important; - tr:hover td { - background: tintOrShade($euiColorLightestShade, 50%, 20%); + tr:hover td { + background: tintOrShade($euiColorLightestShade, 50%, 20%); + } } - } - td { - border-top: none !important; + td { + border-top: none !important; + } } -} -/* ------------- open -------- */ -.osdDocTableOpen__button { - appearance: none; - background-color: transparent; - padding: 0; - border: none; - width: 14px; /* 1 */ - height: 14px; -} - -/* ------------- table header -------- */ -.osdDocTableHeader { - white-space: nowrap; -} -.osdDocTableHeader button { - margin-left: $euiSizeXS; -} -.osdDocTableHeader__move, -.osdDocTableHeader__sortChange { - opacity: 0; - th:hover &, - &:focus { - opacity: 1; + /* ------------- open -------- */ + .osdDocTableOpen__button { + appearance: none; + background-color: transparent; + padding: 0; + border: none; + width: 14px; /* 1 */ + height: 14px; } -} - -/* ------------- doc_viewer -------- */ -.osdDocViewerTable { - margin-top: $euiSizeS; -} -.osdDocViewer { - pre, - .osdDocViewer__value { - display: inline-block; - word-break: break-all; - word-wrap: break-word; - white-space: pre-wrap; - color: $euiColorFullShade; - vertical-align: top; - padding-top: 2px; + /* ------------- table header -------- */ + .osdDocTableHeader { + white-space: nowrap; } - .osdDocViewer__field { - padding-top: 8px; + .osdDocTableHeader button { + margin-left: $euiSizeXS; } - - .dscFieldName { - color: $euiColorDarkShade; + .osdDocTableHeader__move, + .osdDocTableHeader__sortChange { + opacity: 0; + th:hover &, + &:focus { + opacity: 1; + } } - td, - pre { - font-family: $euiCodeFontFamily; + /* ------------- doc_viewer -------- */ + .osdDocViewerTable { + margin-top: $euiSizeS; } - tr:first-child td { - border-top-color: transparent; - } + .osdDocViewer { + pre, + .osdDocViewer__value { + display: inline-block; + word-break: break-all; + word-wrap: break-word; + white-space: pre-wrap; + color: $euiColorFullShade; + vertical-align: top; + padding-top: 2px; + } + .osdDocViewer__field { + padding-top: 8px; + } - tr:hover { - .osdDocViewer__actionButton { - opacity: 1; + .dscFieldName { + color: $euiColorDarkShade; + } + + td, + pre { + font-family: $euiCodeFontFamily; + } + + tr:first-child td { + border-top-color: transparent; + } + + tr:hover { + .osdDocViewer__actionButton { + opacity: 1; + } } } -} -.osdDocViewer__buttons, -.osdDocViewer__field { - white-space: nowrap; -} -.osdDocViewer__buttons { - width: 60px; + .osdDocViewer__buttons, + .osdDocViewer__field { + white-space: nowrap; + } + .osdDocViewer__buttons { + width: 60px; - // Show all icons if one is focused, - // IE doesn't support, but the fallback is just the focused button becomes visible - &:focus-within { - .osdDocViewer__actionButton { - opacity: 1; + // Show all icons if one is focused, + // IE doesn't support, but the fallback is just the focused button becomes visible + &:focus-within { + .osdDocViewer__actionButton { + opacity: 1; + } } } -} -.osdDocViewer__field { - width: 160px; -} + .osdDocViewer__field { + width: 160px; + } -.osdDocViewer__actionButton { - opacity: 0; + .osdDocViewer__actionButton { + opacity: 0; - &:focus { - opacity: 1; + &:focus { + opacity: 1; + } } -} -.osdDocViewer__warning { - margin-right: $euiSizeS; + .osdDocViewer__warning { + margin-right: $euiSizeS; + } } - diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx index 9bd371ecd0..379663cf29 100644 --- a/public/components/event_analytics/explorer/explorer.tsx +++ b/public/components/event_analytics/explorer/explorer.tsx @@ -1264,7 +1264,9 @@ export const Explorer = ({ }} >
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - Time - - _source -
- - - - -
- -
- -
- ip_count - : -
-
- - 176 - -
- - -
- sum_bytes - : -
-
- - 1021420 - -
- - -
- host - : -
-
- - artifacts.opensearch.org - -
- - -
- resp_code - : -
-
- - 404 - -
- - -
- per_ip_bytes - : -
-
- - 5803 - -
- - -
- double_per_ip_bytes - : -
-
- - 11606 - -
- -
- -
-
- - - - -
- -
- -
- ip_count - : -
-
- - 111 - -
- - -
- sum_bytes - : -
-
- - 560638 - -
- - -
- host - : -
-
- - www.opensearch.org - -
- - -
- resp_code - : -
-
- - 404 - -
- - -
- per_ip_bytes - : -
-
- - 5050 - -
- - -
- double_per_ip_bytes - : -
-
- - 10100 - -
- -
- -
-
- - - - -
- -
- -
- ip_count - : -
-
- - 94 - -
- - -
- sum_bytes - : -
-
- - 0 - -
- - -
- host - : -
-
- - artifacts.opensearch.org - -
- - -
- resp_code - : -
-
- - 503 - -
- - -
- per_ip_bytes - : -
-
- - 0 - -
- - -
- double_per_ip_bytes - : -
-
- - 0 - -
- -
- -
-
- - - - -
- -
- -
- ip_count - : -
-
- - 78 - -
- - -
- sum_bytes - : -
-
- - 0 - -
- - -
- host - : -
-
- - www.opensearch.org - -
- - -
- resp_code - : -
-
- - 503 - -
- - -
- per_ip_bytes - : -
-
- - 0 - -
- - -
- double_per_ip_bytes - : -
-
- - 0 - -
- -
- -
-
- - - - -
- -
- -
- ip_count - : -
-
- - 43 - -
- - -
- sum_bytes - : -
-
- - 247840 - -
- - -
- host - : -
-
- - cdn.opensearch-opensearch-opensearch.org - -
- - -
- resp_code - : -
-
- - 404 - -
- - -
- per_ip_bytes - : -
-
- - 5763 - -
- - -
- double_per_ip_bytes - : -
-
- - 11526 - -
- -
- -
-
- - - - -
- -
- -
- ip_count - : -
-
- - 34 - -
- - -
- sum_bytes - : -
-
- - 0 - -
- - -
- host - : -
-
- - cdn.opensearch-opensearch-opensearch.org - -
- - -
- resp_code - : -
-
- - 503 - -
- - -
- per_ip_bytes - : -
-
- - 0 - -
- - -
- double_per_ip_bytes - : -
-
- - 0 - -
- -
- -
-
- - - - -
- -
- -
- ip_count - : -
-
- - 13 - -
- - -
- sum_bytes - : -
-
- - 57735 - -
- - -
- host - : -
-
- - opensearch-opensearch-opensearch.org - -
- - -
- resp_code - : -
-
- - 404 - -
- - -
- per_ip_bytes - : -
-
- - 4441 - -
- - -
- double_per_ip_bytes - : -
-
- - 8882 - -
- -
- -
-
- - - - -
- -
- -
- ip_count - : -
-
- - 6 - -
- - -
- sum_bytes - : -
-
- - 0 - -
- - -
- host - : -
-
- - opensearch-opensearch-opensearch.org - -
- - -
- resp_code - : -
-
- - 503 - -
- - -
- per_ip_bytes - : -
-
- - 0 - -
- - -
- double_per_ip_bytes - : -
-
- - 0 - -
- -
- -
-
-
-
- -
- -`; diff --git a/public/components/visualizations/charts/__tests__/logs_view.test.tsx b/public/components/visualizations/charts/__tests__/logs_view.test.tsx deleted file mode 100644 index e467d60556..0000000000 --- a/public/components/visualizations/charts/__tests__/logs_view.test.tsx +++ /dev/null @@ -1,30 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import { configure, mount } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; -import React from 'react'; -import { waitFor } from '@testing-library/react'; -import { LogsView } from '../logs_view/logs_view'; -import { - LAYOUT_CONFIG, - TEST_VISUALIZATIONS_DATA, -} from '../../../../../test/event_analytics_constants'; - -describe('Logs View component', () => { - configure({ adapter: new Adapter() }); - - it('Renders logs view component', async () => { - const wrapper = mount( - - ); - - wrapper.update(); - - await waitFor(() => { - expect(wrapper).toMatchSnapshot(); - }); - }); -}); diff --git a/public/components/visualizations/charts/logs_view/logs_view.scss b/public/components/visualizations/charts/logs_view/logs_view.scss deleted file mode 100644 index 013f0d307d..0000000000 --- a/public/components/visualizations/charts/logs_view/logs_view.scss +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ -table { - border-collapse: collapse; - width: 100%; -} - -th, -td { - text-align: left; -} - -tr:hover { - background-color: #ddd; -} - -.logs-view-container { - font-size: 16px; -} diff --git a/public/components/visualizations/charts/logs_view/logs_view.tsx b/public/components/visualizations/charts/logs_view/logs_view.tsx deleted file mode 100644 index 0e8e88f4c7..0000000000 --- a/public/components/visualizations/charts/logs_view/logs_view.tsx +++ /dev/null @@ -1,40 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ -import React from 'react'; -import { IExplorerFields } from '../../../../../common/types/explorer'; -import { RAW_QUERY, SELECTED_TIMESTAMP } from '../../../../../common/constants/explorer'; -import { DataGrid } from '../../../../components/event_analytics/explorer/events_views/data_grid'; -import './logs_view.scss'; - -export const LogsView = ({ visualizations }: any) => { - const explorer = visualizations?.data?.explorer; - - const http = explorer?.http; - const pplService = explorer?.pplService; - const explorerData = explorer?.explorerData; - const explorerFields = explorer?.explorerFields; - const query = explorer?.query; - - const emptyExplorerFields: IExplorerFields = { - availableFields: [], - queriedFields: explorerFields, - selectedFields: [], - unselectedFields: [], - }; - - return ( -
- -
- ); -}; diff --git a/public/components/visualizations/charts/logs_view/logs_view_type.ts b/public/components/visualizations/charts/logs_view/logs_view_type.ts deleted file mode 100644 index a4ecad4b80..0000000000 --- a/public/components/visualizations/charts/logs_view/logs_view_type.ts +++ /dev/null @@ -1,69 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import { LogsView } from './logs_view'; -import { getPlotlyCategory, getPlotlySharedConfigs } from '../shared/shared_configs'; -import { LensIconChartDatatable } from '../../assets/chart_datatable'; -import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor'; -import { PLOTLY_COLOR } from '../../../../../common/constants/shared'; - -const sharedConfigs = getPlotlySharedConfigs(); -const VIS_CATEGORY = getPlotlyCategory(); - -export const createLogsViewTypeDefinition = (params: any = {}) => ({ - name: 'logs_view', - type: 'logs_view', - id: 'logs_view', - label: 'Logs view', - fulllabel: 'Logs view', - icontype: 'visTable', - category: VIS_CATEGORY.BASICS, - selection: { - dataLoss: 'nothing', - }, - icon: LensIconChartDatatable, - categoryaxis: 'xaxis', - seriesaxis: 'yaxis', - editorconfig: { - panelTabs: [ - { - id: 'data-panel', - name: 'Style', - mapTo: 'dataConfig', - editor: VizDataPanel, - sections: [], - }, - ], - }, - visconfig: { - layout: { - ...sharedConfigs.layout, - colorway: PLOTLY_COLOR, - plot_bgcolor: 'rgba(0, 0, 0, 0)', - paper_bgcolor: 'rgba(0, 0, 0, 0)', - xaxis: { - fixedrange: true, - showgrid: false, - visible: true, - }, - yaxis: { - fixedrange: true, - showgrid: false, - visible: true, - }, - }, - config: { - ...sharedConfigs.config, - barmode: 'line', - xaxis: { - automargin: true, - }, - yaxis: { - automargin: true, - }, - }, - }, - component: LogsView, -}); diff --git a/public/components/visualizations/charts/vis_types.ts b/public/components/visualizations/charts/vis_types.ts index 2c761f2bd6..f6858519b1 100644 --- a/public/components/visualizations/charts/vis_types.ts +++ b/public/components/visualizations/charts/vis_types.ts @@ -13,7 +13,6 @@ import { createDatatableTypeDefinition } from './data_table/data_table_type'; import { createGaugeTypeDefinition } from './financial/gauge/gauge_type'; import { createTreeMapDefinition } from './maps/treemap_type'; import { createTextTypeDefinition } from './text/text_type'; -import { createLogsViewTypeDefinition } from './logs_view/logs_view_type'; import { createMetricsTypeDefinition } from './metrics/metrics_type'; export const VIS_TYPES = { @@ -29,7 +28,6 @@ export const VIS_TYPES = { tree_map: createTreeMapDefinition, text: createTextTypeDefinition, scatter: createLineTypeDefinition, - logs_view: createLogsViewTypeDefinition, metrics: createMetricsTypeDefinition, };