From 71db3a39a9f34225e3e7f21bca7cd4303a43c4c9 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Tue, 19 Dec 2017 07:02:42 -0800 Subject: [PATCH] EUI css reset fixes (#15685) * EUI css reset fixes * Fix linting errors. --- .../console/public/src/directives/help.html | 66 ++++---- .../public/src/directives/welcome.html | 70 ++++---- .../public/controls/gauge_options.html | 1 + .../public/controls/heatmap_options.html | 1 + .../kibana/public/dashboard/styles/index.less | 2 +- .../dev_tools/partials/dev_tools_app.html | 6 +- .../lib/detail_views/string.html | 4 +- .../kibana/public/discover/index.html | 5 +- .../public/discover/partials/no_results.html | 60 +++++-- .../kibana/public/discover/styles/main.less | 6 +- .../kibana/public/home/components/home.js | 153 ++++++++++-------- src/core_plugins/kibana/public/home/home.less | 9 -- .../kibana/public/management/landing.html | 4 +- .../edit_index_pattern.html | 2 +- .../management/sections/indices/index.html | 14 +- .../management/sections/objects/_objects.html | 12 +- .../kibana/public/management/styles/main.less | 4 - .../visualize/editor/styles/_editor.less | 3 +- .../public/components/annotations_editor.js | 20 ++- .../public/components/markdown_editor.js | 14 +- src/ui/public/agg_types/controls/filters.html | 2 + .../public/agg_types/controls/ip_ranges.html | 7 +- src/ui/public/agg_types/controls/string.html | 2 + src/ui/public/field_editor/field_editor.html | 36 +++-- src/ui/public/number_list/number_list.html | 2 + src/ui/public/styles/base.less | 19 ++- src/ui/public/styles/hintbox.less | 1 + src/ui/public/styles/sidebar.less | 10 ++ .../public/vis/editors/default/agg_add.html | 1 + .../vis/editors/default/agg_select.html | 1 + ui_framework/dist/ui_framework.css | 3 +- ui_framework/src/components/table/_table.scss | 1 + 32 files changed, 320 insertions(+), 221 deletions(-) diff --git a/src/core_plugins/console/public/src/directives/help.html b/src/core_plugins/console/public/src/directives/help.html index 5fbb645b095e8f..e3d07e9990456c 100644 --- a/src/core_plugins/console/public/src/directives/help.html +++ b/src/core_plugins/console/public/src/directives/help.html @@ -1,40 +1,38 @@ -

Help

+

Help

- - -
+
+ +
+
+
+

Request format

+
You can type one or more requests in the white editor. Console understands requests in a compact format:
- - -
-
-
-
General editing
-
Ctrl/Cmd + I
-
Auto indent current request
-
Ctrl + Space
-
Open Auto complete (even if not typing)
-
Ctrl/Cmd + Enter
-
Submit request
-
Ctrl/Cmd + Up/Down
-
Jump to the previous/next request start or end.
-
Ctrl/Cmd + Alt + L
-
Collapse/expand current scope.
-
Ctrl/Cmd + Option + 0
-
Collapse all scopes but the current one. Expand by adding a shift.
-
-
-
-
When auto-complete is visible
-
Down arrow
-
Switch focus to auto-complete menu. Use arrows to further select a term
-
Enter/Tab
-
Select the currently selected or the top most term in auto-complete menu
-
Esc
-
Close auto-complete menu
+
+

Keyboard commands

+
+
+
Ctrl/Cmd + I
+
Auto indent current request
+
Ctrl + Space
+
Open Auto complete (even if not typing)
+
Ctrl/Cmd + Enter
+
Submit request
+
Ctrl/Cmd + Up/Down
+
Jump to the previous/next request start or end.
+
Ctrl/Cmd + Alt + L
+
Collapse/expand current scope.
+
Ctrl/Cmd + Option + 0
+
Collapse all scopes but the current one. Expand by adding a shift.
+
Down arrow
+
Switch focus to auto-complete menu. Use arrows to further select a term
+
Enter/Tab
+
Select the currently selected or the top most term in auto-complete menu
+
Esc
+
Close auto-complete menu
- - +
+
diff --git a/src/core_plugins/console/public/src/directives/welcome.html b/src/core_plugins/console/public/src/directives/welcome.html index ed612655eddc25..bad5efa578ca0b 100644 --- a/src/core_plugins/console/public/src/directives/welcome.html +++ b/src/core_plugins/console/public/src/directives/welcome.html @@ -1,33 +1,37 @@ -

Welcome to Console

- -

Quick intro to the UI

- -

The Console UI is split into two panes: an editor pane (left) and a response pane (right). - Use the editor to type requests and submit them to Elasticsearch. The results will be displayed in - the response pane on the right side. -

- -

Console understands requests in a compact format, similar to cURL: - - -

While typing a request, Console will make suggestions which you can then accept by hitting Enter/Tab. - These suggestions are made based on the request structure as well as your indices and types. -

- -

A few quick tips, while I have your attention

-
    -
  • Submit requests to ES using the green triangle button.
    • -
  • Use the wrench menu for other useful things.
    • -
  • You can paste requests in cURL format and they will be translated to the Console syntax.
    • -
  • You can resize the editor and output panes by dragging the separator between them.
    • -
  • Study the keyboard shortcuts under the Help button. Good stuff in there!
    • -
- - +
+ +

Welcome to Console

+ +

Quick intro to the UI

+ +

The Console UI is split into two panes: an editor pane (left) and a response pane (right). + Use the editor to type requests and submit them to Elasticsearch. The results will be displayed in + the response pane on the right side. +

+ +

Console understands requests in a compact format, similar to cURL: + + +

While typing a request, Console will make suggestions which you can then accept by hitting Enter/Tab. + These suggestions are made based on the request structure as well as your indices and types. +

+ +

A few quick tips, while I have your attention

+
    +
  • Submit requests to ES using the green triangle button.
    • +
  • Use the wrench menu for other useful things.
    • +
  • You can paste requests in cURL format and they will be translated to the Console syntax.
    • +
  • You can resize the editor and output panes by dragging the separator between them.
    • +
  • Study the keyboard shortcuts under the Help button. Good stuff in there!
    • +
+ + + +
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html index 2106e3d65fc163..a55100911d9fd3 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html +++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html @@ -175,6 +175,7 @@ class="kuiButton kuiButton--primary kuiButton--fullWidth"> Add Range
+
Note: colors can be changed in the legend
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html index be6e928f0f2bca..772f8a2b77eacf 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html +++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html @@ -170,6 +170,7 @@ > Add Range +
Note: colors can be changed in the legend
diff --git a/src/core_plugins/kibana/public/dashboard/styles/index.less b/src/core_plugins/kibana/public/dashboard/styles/index.less index 1dfd3957a1adb9..4428f7bf52426a 100644 --- a/src/core_plugins/kibana/public/dashboard/styles/index.less +++ b/src/core_plugins/kibana/public/dashboard/styles/index.less @@ -117,7 +117,7 @@ .start-screen { margin: 20px auto; max-width: 800px; - background: tint(@globalColorBlue, 90%); + background: #FFF; padding: 40px; border-radius: 4px; } diff --git a/src/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html b/src/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html index 9306852c1441c7..bca9a7cc1fd1d1 100644 --- a/src/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html +++ b/src/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html @@ -9,13 +9,13 @@ > -
+
{{::item.display}} diff --git a/src/core_plugins/kibana/public/discover/components/field_chooser/lib/detail_views/string.html b/src/core_plugins/kibana/public/discover/components/field_chooser/lib/detail_views/string.html index f8597bcf4a6a20..1b8d80ad573fd7 100644 --- a/src/core_plugins/kibana/public/discover/components/field_chooser/lib/detail_views/string.html +++ b/src/core_plugins/kibana/public/discover/components/field_chooser/lib/detail_views/string.html @@ -1,6 +1,6 @@
-

+

Top 5 values in

-
{{field.details.error}}
+
{{field.details.error}}
diff --git a/src/core_plugins/kibana/public/discover/index.html b/src/core_plugins/kibana/public/discover/index.html index 8a979651238bda..bfa84adcebc8bf 100644 --- a/src/core_plugins/kibana/public/discover/index.html +++ b/src/core_plugins/kibana/public/discover/index.html @@ -65,7 +65,10 @@

-

Searching

+
+

Searching

+
+
{{fetchStatus.complete}}/{{fetchStatus.total}}
diff --git a/src/core_plugins/kibana/public/discover/partials/no_results.html b/src/core_plugins/kibana/public/discover/partials/no_results.html index 4ea0ed9d239201..cf6d64842c589e 100644 --- a/src/core_plugins/kibana/public/discover/partials/no_results.html +++ b/src/core_plugins/kibana/public/discover/partials/no_results.html @@ -1,5 +1,6 @@ -
-
+
+ +

No results found

@@ -63,21 +64,46 @@

The search bar at the top uses Elasticsearch's support for Lucene Query String syntax. Let's say we're searching web server logs that have been parsed into a few fields.

-

Examples:

- Find requests that contain the number 200, in any field: - 
200
- - Or we can search in a specific field. Find 200 in the status field: - 
status:200
- - Find all status codes between 400-499: - 
status:[400 TO 499]
- - Find status codes 400-499 with the extension php: - 
status:[400 TO 499] AND extension:PHP
- - Or HTML - 
status:[400 TO 499] AND (extension:php OR extension:html)
+

Examples

+ +

Find requests that contain the number 200, in any field:

+
+ + 
200
+ +
+
+ +

Or we can search in a specific field. Find 200 in the status field:

+
+ + 
status:200
+ +
+
+ +

Find all status codes between 400-499:

+
+ + 
status:[400 TO 499]
+ +
+
+ +

Find status codes 400-499 with the extension php:

+
+ + 
status:[400 TO 499] AND extension:PHP
+ +
+
+ +

Or HTML

+
+ + 
status:[400 TO 499] AND (extension:php OR extension:html)
+ +

diff --git a/src/core_plugins/kibana/public/discover/styles/main.less b/src/core_plugins/kibana/public/discover/styles/main.less index 62ff94e365e7b5..5f023c5434d0e1 100644 --- a/src/core_plugins/kibana/public/discover/styles/main.less +++ b/src/core_plugins/kibana/public/discover/styles/main.less @@ -78,6 +78,7 @@ bottom: 0; right: 0; z-index: 20; + padding-top: 10px; opacity: 0.75; text-align: center; @@ -209,10 +210,6 @@ white-space: nowrap; } - .discover-field-details-error { - margin-top: 5px; - } - .discover-field-details-item { margin-top: 5px; } @@ -222,6 +219,7 @@ } .discover-field-details-item-title { + line-height: 1.5; display: flex; align-items: center; justify-content: space-between; diff --git a/src/core_plugins/kibana/public/home/components/home.js b/src/core_plugins/kibana/public/home/components/home.js index fe931915c2a284..a150ea8ec33c87 100644 --- a/src/core_plugins/kibana/public/home/components/home.js +++ b/src/core_plugins/kibana/public/home/components/home.js @@ -3,10 +3,19 @@ import PropTypes from 'prop-types'; import { Synopsis } from './synopsis'; import { KuiLinkButton, - KuiFlexGroup, - KuiFlexItem, - KuiFlexGrid, } from 'ui_framework/components'; + +import { + EuiPage, + EuiPanel, + EuiTitle, + EuiSpacer, + EuiFlexGroup, + EuiFlexItem, + EuiFlexGrid, + EuiText, +} from '@elastic/eui'; + import { FeatureCatalogueCategory } from 'ui/registry/feature_catalogue'; export function Home({ addBasePath, directories }) { @@ -18,92 +27,104 @@ export function Home({ addBasePath, directories }) { }) .map((directory) => { return ( - + - + ); }); }; return ( -
-
- -
- - -

- Welcome to Kibana -

- - - - - -

- Data already in Elasticsearch? -

- - - - - Set up index patterns - - - - - - -
- -
- - -

+ + + + + +

Welcome to Kibana

+ + + + + + +

+ Data already in Elasticsearch? +

+ + + + + Set up index patterns + + + + + + + + + + + + + +

Visualize and Explore Data

- - { renderDirectories(FeatureCatalogueCategory.DATA) } - - - -

+ + + + { renderDirectories(FeatureCatalogueCategory.DATA) } + + + + + + +

Manage and Administer the Elastic Stack

- - { renderDirectories(FeatureCatalogueCategory.ADMIN) } - - - -

- -
-

- Didn’t find what you were looking for? -

+ + + + { renderDirectories(FeatureCatalogueCategory.ADMIN) } + + + + + + + + + + +

+ Didn’t find what you were looking for? +

+ + View full directory of Kibana plugins -
+ + -
-
+ ); } diff --git a/src/core_plugins/kibana/public/home/home.less b/src/core_plugins/kibana/public/home/home.less index 590a89ae74e210..b96f1dbd950974 100644 --- a/src/core_plugins/kibana/public/home/home.less +++ b/src/core_plugins/kibana/public/home/home.less @@ -5,15 +5,6 @@ min-height: 100vh; } -.homePanel { - padding: 24px; - background-color: @white; -} - -.homeTopFeatures { - margin-top: 12px; -} - .homeFeatureDirectory { background: @white; margin: 0; diff --git a/src/core_plugins/kibana/public/management/landing.html b/src/core_plugins/kibana/public/management/landing.html index ee7e1c32668720..d538d8c836b161 100644 --- a/src/core_plugins/kibana/public/management/landing.html +++ b/src/core_plugins/kibana/public/management/landing.html @@ -23,7 +23,7 @@
-
+