event sidebar, one renaming

Signed-off-by: Eric Wei <[email protected]>
opensearch-project · Sep 26, 2022 · 5a46f8a · 5a46f8a
1 parent 0c3b35b
commit 5a46f8a
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 110 deletions.
diff --git a/dashboards-observability/public/components/common/field_button/field_button.scss b/dashboards-observability/public/components/common/field_button/field_button.scss
@@ -79,12 +79,14 @@
   }
 }
 
-.explorer__fieldSelectorField {
-  @include euiBottomShadowSmall;
-
-  background-color: $euiColorEmptyShade;
-  border: $euiBorderThin;
-  margin-top: $euiSizeS;
+.shard__fieldSelectorField {
+  &:hover,
+  &:focus-within,
+  &[class*='-isActive'] {
+    .dscSidebarItem__action {
+      opacity: 1;
+    }
+  }
 
   & > .osdFieldButton__button {
     padding: 0;
@@ -110,3 +112,11 @@
     margin-right: 8px;
   }
 }
+
+#vis__mainContent .explorer__fieldSelectorField {
+  @include euiBottomShadowSmall;
+
+  background-color: $euiColorEmptyShade;
+  border: $euiBorderThin;
+  margin-top: $euiSizeS;
+}
diff --git a/dashboards-observability/public/components/event_analytics/explorer/sidebar/field.tsx b/dashboards-observability/public/components/event_analytics/explorer/sidebar/field.tsx
@@ -151,7 +151,7 @@ export const Field = (props: IFieldProps) => {
       button={
         <FieldButton
           size="m"
-          className="dscSidebarItem explorer__fieldSelectorField"
+          className="shard__fieldSelectorField explorer__fieldSelectorField"
           isActive={isFieldDetailsOpen}
           dataTestSubj={`field-${field.name}-showDetails`}
           fieldIcon={<FieldIcon type={isEqual(field.type, 'timestamp') ? 'date' : field.type} />}

diff --git a/dashboards-observability/public/components/event_analytics/explorer/sidebar/sidebar.scss b/dashboards-observability/public/components/event_analytics/explorer/sidebar/sidebar.scss
@@ -37,25 +37,11 @@
   background-color: lightOrDarkTheme(tint($euiColorPrimary, 90%), $euiColorLightShade);
 }
 
-.explorerFieldSelector {
-  padding: 0;
-}
-
 .dscFieldChooser__toggle {
   color: $euiColorMediumShade;
   margin-left: $euiSizeS !important;
 }
 
-.dscSidebarItem {
-  &:hover,
-  &:focus-within,
-  &[class*='-isActive'] {
-    .dscSidebarItem__action {
-      opacity: 1;
-    }
-  }
-}
-
 /**
  * 1. Only visually hide the action, so that it's still accessible to screen readers.
  * 2. When tabbed to, this element needs to be visible for keyboard accessibility.
@@ -111,34 +97,40 @@
   vertical-align: middle;
 }
 
-.explorer__insights {
-  min-height: 0;
-  display: grid;
-  grid-template-columns: 50% 50%;
-  height: 100%;
-  .explorerFieldSelector, .explorer__vizDataConfig {
-    padding: $euiSizeS;
-
-    &__fieldGroups {
-      @include euiYScrollWithShadows;
-
-      overflow-y: auto;
-      margin-right: -$euiSizeS;
-      padding-right: $euiSizeS;
-      margin-top: $euiSizeS;
-    }
-
-    &__fieldGroup {
-      margin-top: $euiSizeS;
+.explorerFieldSelector {
+  padding: $euiSizeS;
+}
 
-      &:first-child {
-        margin-top: 0;
+#vis__mainContent {
+  .explorer__insights {
+    min-height: 0;
+    display: grid;
+    grid-template-columns: 50% 50%;
+    height: 100%;
+    .explorerFieldSelector, .explorer__vizDataConfig {
+      padding: $euiSizeS;
+
+      &__fieldGroups {
+        @include euiYScrollWithShadows;
+
+        overflow-y: auto;
+        margin-right: -$euiSizeS;
+        padding-right: $euiSizeS;
+        margin-top: $euiSizeS;
+      }
+
+      &__fieldGroup {
+        margin-top: $euiSizeS;
+
+        &:first-child {
+          margin-top: 0;
+        }
       }
     }
-  }
-  .explorerFieldSelector {
-    .sidebar-list {
-      height: 100%;
+    .explorerFieldSelector {
+      .sidebar-list {
+        height: 100%;
+      }
     }
   }
 }
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/app.scss b/dashboards-observability/public/components/event_analytics/explorer/visualizations/app.scss
@@ -3,74 +3,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-// .lnsAppWrapper {
-//   display: flex;
-//   flex-direction: column;
-//   flex-grow: 1;
-// }
-
-// .lnsApp {
-//   position: absolute;
-//   top: 0;
-//   bottom: 0;
-//   left: 0;
-//   right: 0;
-//   display: flex;
-//   flex-direction: column;
-//   height: 100%;
-//   overflow: hidden;
-// }
-
-// .lnsApp__header {
-//   border-bottom: $euiBorderThin;
-// }
-
-// .lnsApp__frame {
-//   position: relative;
-//   display: flex;
-//   flex-direction: column;
-//   flex-grow: 1;
-// }
-
 .dataConfigContainer {
   height: 1242px;
   overflow: auto;
 }
 
-// ::-webkit-scrollbar {
-//   width: 10px;
-// }
-
-// ::-webkit-scrollbar-track {
-//   background: #f1f1f1;
-// }
-
-// ::-webkit-scrollbar-thumb {
-//   background: #c2c2c2;
-// }
-
-// .euiResizableToggleButton:not(:focus):not(:active):not(.euiResizableToggleButton-isVisible):not(.euiResizableToggleButton-isCollapsed) {
-//   height: 24px;
-//   width: 24px;
-//   top: 0;
-//   left: inherit;
-//   box-shadow: none;
-// }
-
-// .lensChartIcon__subdued {
-//   fill: $euiTextSubduedColor;
-
-//   // Not great, but the easiest way to fix the gray fill when stuck in a button with a fill
-//   // Like when selected in a button group
-//   .euiButton--fill & {
-//     fill: currentColor;
-//   }
-// }
-
-// .lensChartIcon__accent {
-//   fill: $euiColorVis0;
-// }
-
 .explorerViz__commonPanel {
   display: grid;
   grid-template-rows: auto 1fr;

diff --git a/...onfig_controls/data_config_panel_item.tsx → ...ig_controls/data_configurations_panel.tsx b/...onfig_controls/data_config_panel_item.tsx → ...ig_controls/data_configurations_panel.tsx
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx
@@ -20,7 +20,7 @@ import {
 import { WorkspacePanel } from './workspace_panel';
 import { ConfigPanel } from './config_panel';
 import { Sidebar } from '../sidebar';
-import { DataConfigPanelItem } from './config_panel/config_panes/config_controls/data_config_panel_item';
+import { DataConfigPanelItem } from './config_panel/config_panes/config_controls/data_configurations_panel';
 import { TabContext } from '../../hooks';
 import { PPL_STATS_REGEX, VIS_CHART_TYPES } from '../../../../../common/constants/shared';
 import { TreemapConfigPanelItem } from './config_panel/config_panes/config_controls/treemap_config_panel_item';