[ML] General ML style tweaks for K7 compatibility (#30536) (#30793)

* [ML] [WIP] General ML style tweaks for K7 compatibility * file data viz clean up
elastic · Feb 12, 2019 · 95979f6 · 95979f6
1 parent e2affc4
commit 95979f6
Show file tree

Hide file tree

Showing 21 changed files with 56 additions and 95 deletions.
diff --git a/x-pack/plugins/ml/public/_hacks.scss b/x-pack/plugins/ml/public/_hacks.scss
@@ -1,25 +1,11 @@
-.tab-settings,
-.tab-datavisualizer,
+.tab-datavisualizer_index_select,
 .tab-timeseriesexplorer,
 .tab-explorer,
 .tab-jobs {
   // Make all page background white until More of the pages use EuiPage to wrap in panel-like components
   background-color: $euiColorEmptyShade;
 }
 
-// These are hacks that were near ML's root. Unsure if they still need to be here.
-.tab-jobs,
-.edit-job-modal,
-.create-watch-modal {
-  label {
-    display: inline-block;
-  }
-
-  .validation-error {
-    margin-top: $euiSizeXS;
-  }
-}
-
 // ML specific bootstrap hacks
 .button-wrapper {
   display: inline;

diff --git a/x-pack/plugins/ml/public/datavisualizer/_index.scss b/x-pack/plugins/ml/public/datavisualizer/_index.scss
@@ -1,2 +1 @@
-@import './selector/index';
 @import 'datavisualizer';
diff --git a/x-pack/plugins/ml/public/datavisualizer/selector/_index.scss b/x-pack/plugins/ml/public/datavisualizer/selector/_index.scss
diff --git a/x-pack/plugins/ml/public/datavisualizer/selector/_selector.scss b/x-pack/plugins/ml/public/datavisualizer/selector/_selector.scss
diff --git a/x-pack/plugins/ml/public/datavisualizer/selector/directive.js b/x-pack/plugins/ml/public/datavisualizer/selector/directive.js
@@ -16,7 +16,11 @@ import { checkFindFileStructurePrivilege } from 'plugins/ml/privilege/check_priv
 
 import uiRoutes from 'ui/routes';
 
-const template = `<ml-nav-menu name="datavisualizer" /><datavisualizer-selector class="ml-datavisualizer-selector"/>`;
+const template = `
+  <div class="euiSpacer euiSpacer--s" />
+  <ml-nav-menu name="datavisualizer" />
+  <datavisualizer-selector />
+`;
 
 uiRoutes
   .when('/datavisualizer', {

diff --git a/x-pack/plugins/ml/public/file_datavisualizer/_file_datavisualizer.scss b/x-pack/plugins/ml/public/file_datavisualizer/_file_datavisualizer.scss
diff --git a/x-pack/plugins/ml/public/file_datavisualizer/_index.scss b/x-pack/plugins/ml/public/file_datavisualizer/_index.scss
@@ -1 +1 @@
-@import 'file_datavisualizer';
+@import 'components/index';
diff --git a/x-pack/plugins/ml/public/file_datavisualizer/components/about_panel/_about_panel.scss b/x-pack/plugins/ml/public/file_datavisualizer/components/about_panel/_about_panel.scss
@@ -1,3 +1,7 @@
+.file-datavisualizer-about-panel__content {
+  margin-top: $euiSize;
+}
+
 .file-datavisualizer-about-panel__icon {
   width: $euiSizeXL * 3;
   height: $euiSizeXL * 3;

diff --git a/x-pack/plugins/ml/public/file_datavisualizer/components/about_panel/about_panel.js b/x-pack/plugins/ml/public/file_datavisualizer/components/about_panel/about_panel.js
@@ -14,7 +14,7 @@ import {
   EuiSpacer,
   EuiPage,
   EuiPageBody,
-  EuiPanel,
+  EuiPageContent,
   EuiHorizontalRule,
   EuiFilePicker,
   EuiLoadingSpinner,
@@ -27,9 +27,11 @@ export const AboutPanel = injectI18n(function AboutPanel({ onFilePickerChange, i
   return (
     <EuiPage restrictWidth={1000}>
       <EuiPageBody>
-        <EuiFlexGroup gutterSize="xl">
-          <EuiFlexItem grow={true}>
-            <EuiPanel paddingSize="l">
+        <EuiPageContent
+          className="file-datavisualizer-about-panel__content"
+        >
+          <EuiFlexGroup gutterSize="xl">
+            <EuiFlexItem grow={true}>
               <WelcomeContent />
 
               <EuiHorizontalRule margin="l" />
@@ -45,10 +47,10 @@ export const AboutPanel = injectI18n(function AboutPanel({ onFilePickerChange, i
                   className="file-datavisualizer-file-picker"
                 />
               </div>
-            </EuiPanel>
-            <EuiSpacer size="l" />
-          </EuiFlexItem>
-        </EuiFlexGroup>
+              <EuiSpacer size="l" />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPageContent>
       </EuiPageBody>
     </EuiPage>
   );
@@ -58,25 +60,25 @@ export function LoadingPanel() {
   return (
     <EuiPage restrictWidth={400}>
       <EuiPageBody>
-        <EuiFlexGroup gutterSize="xl">
-          <EuiFlexItem grow={false}>
-            <EuiPanel paddingSize="l" style={{ textAlign: 'center' }} >
-              <EuiTitle size="s">
-                <h3>
-                  <FormattedMessage
-                    id="xpack.ml.fileDatavisualizer.aboutPanel.analyzingDataTitle"
-                    defaultMessage="Analyzing data"
-                  />
-                </h3>
-              </EuiTitle>
-
-              <EuiSpacer size="l" />
+        <EuiPageContent
+          className="file-datavisualizer-about-panel__content"
+          paddingSize="l"
+        >
+          <div style={{ textAlign: 'center' }}>
+            <EuiTitle size="s">
+              <h3>
+                <FormattedMessage
+                  id="xpack.ml.fileDatavisualizer.aboutPanel.analyzingDataTitle"
+                  defaultMessage="Analyzing data"
+                />
+              </h3>
+            </EuiTitle>
 
-              <EuiLoadingSpinner size="xl"/>
+            <EuiSpacer size="l" />
 
-            </EuiPanel>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+            <EuiLoadingSpinner size="xl"/>
+          </div>
+        </EuiPageContent>
       </EuiPageBody>
     </EuiPage>
   );

diff --git a/...ublic/file_datavisualizer/components/file_datavisualizer_view/file_datavisualizer_view.js b/...ublic/file_datavisualizer/components/file_datavisualizer_view/file_datavisualizer_view.js
@@ -263,9 +263,6 @@ export class FileDataVisualizerView extends Component {
         {(mode === MODE.READ) &&
           <React.Fragment>
 
-
-            {/* <EuiSpacer size="l" /> */}
-
             {(!loading && !loaded) &&
               <AboutPanel
                 onFilePickerChange={this.onFilePickerChange}

diff --git a/x-pack/plugins/ml/public/file_datavisualizer/file_datavisualizer.js b/x-pack/plugins/ml/public/file_datavisualizer/file_datavisualizer.js
@@ -14,8 +14,6 @@ export function FileDataVisualizerPage({ indexPatterns, kibanaConfig }) {
   timefilter.disableAutoRefreshSelector();
 
   return (
-    <div className="file-datavisualizer-container">
-      <FileDataVisualizerView indexPatterns={indexPatterns} kibanaConfig={kibanaConfig} />
-    </div>
+    <FileDataVisualizerView indexPatterns={indexPatterns} kibanaConfig={kibanaConfig} />
   );
 }
diff --git a/x-pack/plugins/ml/public/file_datavisualizer/file_datavisualizer_directive.js b/x-pack/plugins/ml/public/file_datavisualizer/file_datavisualizer_directive.js
@@ -22,7 +22,11 @@ import { FileDataVisualizerPage } from './file_datavisualizer';
 
 import uiRoutes from 'ui/routes';
 
-const template = '<ml-nav-menu name="datavisualizer" /><file-datavisualizer-page />';
+const template = `
+  <div class="euiSpacer euiSpacer--s" />
+  <ml-nav-menu name="datavisualizer" />
+  <file-datavisualizer-page />
+`;
 
 uiRoutes
   .when('/filedatavisualizer/?', {

diff --git a/x-pack/plugins/ml/public/settings/_settings.scss b/x-pack/plugins/ml/public/settings/_settings.scss
@@ -1,10 +1,5 @@
 .mlSettingsPage {
 
-  .mlSettingsPage__body {
-    background: $euiPageBackgroundColor;
-    min-height: 100vh;
-  }
-
   .mlSettingsPage__content {
     width: map-get($euiBreakpoints, 'xl');
     margin-top: $euiSize;

diff --git a/x-pack/plugins/ml/public/settings/calendars/_calendars.scss b/x-pack/plugins/ml/public/settings/calendars/_calendars.scss
diff --git a/x-pack/plugins/ml/public/settings/calendars/_index.scss b/x-pack/plugins/ml/public/settings/calendars/_index.scss
@@ -1,3 +1,2 @@
-@import 'calendars';
 @import 'edit/index';
 @import 'list/index';
diff --git a/x-pack/plugins/ml/public/settings/calendars/edit/directive.js b/x-pack/plugins/ml/public/settings/calendars/edit/directive.js
@@ -22,10 +22,9 @@ import uiRoutes from 'ui/routes';
 import { I18nContext } from 'ui/i18n';
 
 const template = `
+  <div class="euiSpacer euiSpacer--s" />
   <ml-nav-menu name="settings" />
-  <div class="mlCalendarManagement">
-    <ml-new-calendar />
-  </div>
+  <ml-new-calendar />
 `;
 
 uiRoutes

diff --git a/x-pack/plugins/ml/public/settings/calendars/list/directive.js b/x-pack/plugins/ml/public/settings/calendars/list/directive.js
@@ -22,10 +22,9 @@ import uiRoutes from 'ui/routes';
 import { I18nContext } from 'ui/i18n';
 
 const template = `
+  <div class="euiSpacer euiSpacer--s" />
   <ml-nav-menu name="settings" />
-  <div class="mlCalendarManagement">
-    <ml-calendars-list />
-  </div>
+  <ml-calendars-list />
 `;
 
 uiRoutes

diff --git a/x-pack/plugins/ml/public/settings/filter_lists/_filter_lists.scss b/x-pack/plugins/ml/public/settings/filter_lists/_filter_lists.scss
@@ -1,8 +1,3 @@
-.ml-filter-lists {
-  background: $euiPageBackgroundColor;
-  min-height: 100vh;
-}
-
 .ml-list-filter-lists {
 
   .ml-list-filter-lists-content {

diff --git a/x-pack/plugins/ml/public/settings/filter_lists/edit/directive.js b/x-pack/plugins/ml/public/settings/filter_lists/edit/directive.js
@@ -23,10 +23,9 @@ import { EditFilterList } from './edit_filter_list';
 import uiRoutes from 'ui/routes';
 
 const template = `
-  <ml-nav-menu name="settings"></ml-nav-menu>
-  <div class="ml-filter-lists">
-    <ml-edit-filter-list></ml-edit-filter-list>
-  </div>
+  <div class="euiSpacer euiSpacer--s" />
+  <ml-nav-menu name="settings" />
+  <ml-edit-filter-list />
 `;
 
 uiRoutes

diff --git a/x-pack/plugins/ml/public/settings/filter_lists/list/directive.js b/x-pack/plugins/ml/public/settings/filter_lists/list/directive.js
@@ -23,10 +23,9 @@ import { FilterLists } from './filter_lists';
 import uiRoutes from 'ui/routes';
 
 const template = `
-  <ml-nav-menu name="settings"></ml-nav-menu>
-  <div class="ml-filter-lists">
-    <ml-filter-lists></ml-filter-lists>
-  </div>
+  <div class="euiSpacer euiSpacer--s" />
+  <ml-nav-menu name="settings" />
+  <ml-filter-lists />
 `;
 
 uiRoutes

diff --git a/x-pack/plugins/ml/public/settings/settings_directive.js b/x-pack/plugins/ml/public/settings/settings_directive.js
@@ -22,10 +22,9 @@ import uiRoutes from 'ui/routes';
 import { timefilter } from 'ui/timefilter';
 
 const template = `
+  <div class="euiSpacer euiSpacer--s" />
   <ml-nav-menu name="settings" />
-  <div class="mlSettingsPage">
-    <ml-settings />
-  </div>
+  <ml-settings />
 `;
 
 uiRoutes
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		@import './selector/index';
		@import 'datavisualizer';
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		@import 'file_datavisualizer';
		@import 'components/index';