github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-25 02:09:32 -04:00
Code Issues Projects Releases Packages Wiki Activity

EUI css reset fixes (#15685) (#15688)

Browse source 
* EUI css reset fixes
* Fix linting errors.
This commit is contained in:
CJ Cenizal 2017-12-19 07:06:09 -08:00 • committed by GitHub
parent 5ed5235eed
commit 6ea957879d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
32 changed files with 304 additions and 205 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/core_plugins/console/public/src/directives/help.html
View file

@ -1,40 +1,38 @@
<h2 class="kuiLocalDropdownTitle">Help</h2> <h2 class="euiTitle">Help</h2>
<tabset> <div class="euiSpacer euiSpacer--m"></div>
<tab heading="Request format">
<div class="list-group-item list-group-item--noBorder"> <div class="euiPanel euiPanel--paddingLarge">
<div class="euiFlexGroup euiFlexGroup--gutterExtraLarge">
<div class="euiFlexItem">
<h2 class="euiTitle">Request format</h2>
<div class="euiSpacer euiSpacer--l"></div>
You can type one or more requests in the white editor. Console understands requests in a compact format: You can type one or more requests in the white editor. Console understands requests in a compact format:
<sense-help-example></sense-help-example> <sense-help-example></sense-help-example>
</div> </div>
</tab> <div class="euiFlexItem">
<tab heading="Keyboard tips"> <h2 class="euiTitle">Keyboard commands</h2>
<div class="list-group-item list-group-item--noBorder"> <div class="euiSpacer euiSpacer--l"></div>
<dl class="dl-horizontal"> <dl class="euiDescriptionList euiDescriptionList--row euiDescriptionList--compressed">
<dt></dt> <dt class="euiDescriptionList__title">Ctrl/Cmd + I</dt>
<dd><strong>General editing</strong></dd> <dd class="euiDescriptionList__description">Auto indent current request</dd>
<dt>Ctrl/Cmd + I</dt> <dt class="euiDescriptionList__title">Ctrl + Space</dt>
<dd>Auto indent current request</dd> <dd class="euiDescriptionList__description">Open Auto complete (even if not typing)</dd>
<dt>Ctrl + Space</dt> <dt class="euiDescriptionList__title">Ctrl/Cmd + Enter</dt>
<dd>Open Auto complete (even if not typing)</dd> <dd class="euiDescriptionList__description">Submit request</dd>
<dt>Ctrl/Cmd + Enter</dt> <dt class="euiDescriptionList__title">Ctrl/Cmd + Up/Down</dt>
<dd>Submit request</dd> <dd class="euiDescriptionList__description">Jump to the previous/next request start or end.</dd>
<dt>Ctrl/Cmd + Up/Down</dt> <dt class="euiDescriptionList__title">Ctrl/Cmd + Alt + L</dt>
<dd>Jump to the previous/next request start or end.</dd> <dd class="euiDescriptionList__description">Collapse/expand current scope.</dd>
<dt>Ctrl/Cmd + Alt + L</dt> <dt class="euiDescriptionList__title">Ctrl/Cmd + Option + 0</dt>
<dd>Collapse/expand current scope.</dd> <dd class="euiDescriptionList__description">Collapse all scopes but the current one. Expand by adding a shift.</dd>
<dt>Ctrl/Cmd + Option + 0</dt> <dt class="euiDescriptionList__title">Down arrow</dt>
<dd>Collapse all scopes but the current one. Expand by adding a shift.</dd> <dd class="euiDescriptionList__description">Switch focus to auto-complete menu. Use arrows to further select a term</dd>
</dl> <dt class="euiDescriptionList__title">Enter/Tab</dt>
<dl class="dl-horizontal"> <dd class="euiDescriptionList__description">Select the currently selected or the top most term in auto-complete menu</dd>
<dt></dt> <dt class="euiDescriptionList__title">Esc</dt>
<dd><strong>When auto-complete is visible</strong></dd> <dd class="euiDescriptionList__description">Close auto-complete menu</dd>
<dt>Down arrow</dt>
<dd>Switch focus to auto-complete menu. Use arrows to further select a term</dd>
<dt>Enter/Tab</dt>
<dd>Select the currently selected or the top most term in auto-complete menu</dd>
<dt>Esc</dt>
<dd>Close auto-complete menu</dd>
</dl> </dl>
</div> </div>
</tab> </div>
</tabset> </div>

32
src/core_plugins/console/public/src/directives/welcome.html
View file

@ -1,33 +1,37 @@
<h2 class="kuiLocalDropdownTitle">Welcome to Console</h2> <div class="euiText">
<p><strong>Quick intro to the UI</strong></p> <h2>Welcome to Console</h2>
<p>The Console UI is split into two panes: an editor pane (left) and a response pane (right). <p><strong>Quick intro to the UI</strong></p>
<p>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 Use the editor to type requests and submit them to Elasticsearch. The results will be displayed in
the response pane on the right side. the response pane on the right side.
</p> </p>
<p>Console understands requests in a compact format, similar to cURL: <p>Console understands requests in a compact format, similar to cURL:
<sense-help-example></sense-help-example> <sense-help-example></sense-help-example>
<p>While typing a request, Console will make suggestions which you can then accept by hitting Enter/Tab. <p>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 <i>as well as</i> your indices and types. These suggestions are made based on the request structure <i>as well as</i> your indices and types.
</p> </p>
<p><strong>A few quick tips, while I have your attention</strong></p> <p><strong>A few quick tips, while I have your attention</strong></p>
<ul> <ul>
<li>Submit requests to ES using the green triangle button.</li> <li>Submit requests to ES using the green triangle button.</li>
<li>Use the wrench menu for other useful things.</li> <li>Use the wrench menu for other useful things.</li>
<li>You can paste requests in cURL format and they will be translated to the Console syntax.</li> <li>You can paste requests in cURL format and they will be translated to the Console syntax.</li>
<li>You can resize the editor and output panes by dragging the separator between them.</li> <li>You can resize the editor and output panes by dragging the separator between them.</li>
<li>Study the keyboard shortcuts under the Help button. Good stuff in there!</li> <li>Study the keyboard shortcuts under the Help button. Good stuff in there!</li>
</ul> </ul>
<button <button
type="button" type="button"
class="kuiButton kuiButton--primary" class="kuiButton kuiButton--primary"
data-test-subj="help-close-button" data-test-subj="help-close-button"
ng-click="kbnTopNav.close()" ng-click="kbnTopNav.close()"
> >
Get to work Get to work
</button> </button>
</div>

1
src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html
View file

@ -175,6 +175,7 @@
class="kuiButton kuiButton--primary kuiButton--fullWidth"> class="kuiButton kuiButton--primary kuiButton--fullWidth">
Add Range Add Range
</div> </div>
<div class="euiSpacer euiSpacer--s"></div>
<div class="text text-center text-info">Note: colors can be changed in the legend</div> <div class="text text-center text-info">Note: colors can be changed in the legend</div>
</div> </div>
</div> </div>

1
src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html
View file

@ -170,6 +170,7 @@
> >
Add Range Add Range
</button> </button>
<div class="euiSpacer euiSpacer--s"></div>
<div class="text text-center text-info">Note: colors can be changed in the legend</div> <div class="text text-center text-info">Note: colors can be changed in the legend</div>
</div> </div>
</div> </div>

2
src/core_plugins/kibana/public/dashboard/styles/index.less
View file

@ -117,7 +117,7 @@
.start-screen { .start-screen {
margin: 20px auto; margin: 20px auto;
max-width: 800px; max-width: 800px;
background: tint(@globalColorBlue, 90%); background: #FFF;
padding: 40px; padding: 40px;
border-radius: 4px; border-radius: 4px;
} }

6
src/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html
View file

@ -9,13 +9,13 @@
></bread-crumbs> ></bread-crumbs>
<!-- Tabs. --> <!-- Tabs. -->
<div data-transclude-slot="bottomRow" class="kuiLocalTabs" role="tablist"> <div data-transclude-slot="bottomRow" class="euiTabs" role="tablist">
<a <a
role="tab" role="tab"
aria-selected="{{kbnDevToolsApp.currentPath === item.url}}" aria-selected="{{kbnDevToolsApp.currentPath === item.url}}"
ng-repeat="item in kbnDevToolsApp.devTools" ng-repeat="item in kbnDevToolsApp.devTools"
class="kuiLocalTab" class="euiTab"
ng-class="{'kuiLocalTab-isSelected': kbnDevToolsApp.currentPath === item.url}" ng-class="{'euiTab-isSelected': kbnDevToolsApp.currentPath === item.url}"
kbn-href="{{::item.url}}" kbn-href="{{::item.url}}"
> >
{{::item.display}} {{::item.display}}

4
src/core_plugins/kibana/public/discover/components/field_chooser/lib/detail_views/string.html
View file

@ -1,6 +1,6 @@
<div class="discover-field-details"> <div class="discover-field-details">
<div class="kuiVerticalRhythmSmall"> <div class="kuiVerticalRhythmSmall">
<p class="kuiSubduedText" ng-show="!field.details.error"> <p class="euiText euiText--extraSmall euiTextColor--subdued" ng-show="!field.details.error">
Top 5 values in Top 5 values in
<span ng-if="!field.details.error"> <span ng-if="!field.details.error">
<a <a
@ -20,7 +20,7 @@
<div class="clearfix"></div> <div class="clearfix"></div>
<div ng-if="field.details.error" class="discover-field-details-error">{{field.details.error}}</div> <div ng-if="field.details.error" class="euiText euiText--extraSmall euiTextColor--subdued">{{field.details.error}}</div>
<div ng-if="!field.details.error"> <div ng-if="!field.details.error">
<div ng-repeat="bucket in ::field.details.buckets" class="discover-field-details-item"> <div ng-repeat="bucket in ::field.details.buckets" class="discover-field-details-item">

3
src/core_plugins/kibana/public/discover/index.html
View file

@ -65,7 +65,10 @@
<!-- loading --> <!-- loading -->
<div ng-show="resultState === 'loading'"> <div ng-show="resultState === 'loading'">
<div class="discover-overlay"> <div class="discover-overlay">
<div class="euiTitle">
<h2>Searching</h2> <h2>Searching</h2>
</div>
<div class="euiSpacer euiSpacer--m"></div>
<div ng-show="fetchStatus">{{fetchStatus.complete}}/{{fetchStatus.total}}</div> <div ng-show="fetchStatus">{{fetchStatus.complete}}/{{fetchStatus.total}}</div>
</div> </div>
</div> </div>

52
src/core_plugins/kibana/public/discover/partials/no_results.html
View file

@ -1,5 +1,6 @@
<div> <div class="euiPage">
<div class="col-md-10 col-md-offset-1" data-test-subj="discoverNoResults">
<div class="euiText" data-test-subj="discoverNoResults">
<h1>No results found <i aria-hidden="true" class="fa fa-meh-o"></i></h1> <h1>No results found <i aria-hidden="true" class="fa fa-meh-o"></i></h1>
@ -63,21 +64,46 @@
The search bar at the top uses Elasticsearch's support for Lucene <a class="kuiLink" documentation-href="query.luceneQuerySyntax" target="_blank" rel="noopener noreferrer">Query String syntax</a>. Let's say we're searching web server logs that have been parsed into a few fields. The search bar at the top uses Elasticsearch's support for Lucene <a class="kuiLink" documentation-href="query.luceneQuerySyntax" target="_blank" rel="noopener noreferrer">Query String syntax</a>. Let's say we're searching web server logs that have been parsed into a few fields.
</p> </p>
<h4>Examples:</h4> <h4>Examples</h4>
Find requests that contain the number 200, in any field:
<pre>200</pre>
Or we can search in a specific field. Find 200 in the status field: <p>Find requests that contain the number 200, in any field:</p>
<pre>status:200</pre> <div class="euiCodeBlock euiCodeBlock--light euiCodeBlock--paddingSmall">
<code class="euiCodeBlock__code">
<pre class="euiCodeBlock__pre">200</pre>
</code>
</div>
<div class="euiSpacer euiSpacer--l"></div>
Find all status codes between 400-499: <p>Or we can search in a specific field. Find 200 in the status field:</p>
<pre>status:[400 TO 499]</pre> <div class="euiCodeBlock euiCodeBlock--light euiCodeBlock--paddingSmall">
<code class="euiCodeBlock__code">
<pre class="euiCodeBlock__pre">status:200</pre>
</code>
</div>
<div class="euiSpacer euiSpacer--l"></div>
Find status codes 400-499 with the extension php: <p>Find all status codes between 400-499:</p>
<pre>status:[400 TO 499] AND extension:PHP</pre> <div class="euiCodeBlock euiCodeBlock--light euiCodeBlock--paddingSmall">
<code class="euiCodeBlock__code">
<pre class="euiCodeBlock__pre">status:[400 TO 499]</pre>
</code>
</div>
<div class="euiSpacer euiSpacer--l"></div>
Or HTML <p>Find status codes 400-499 with the extension php:</p>
<pre>status:[400 TO 499] AND (extension:php OR extension:html)</pre> <div class="euiCodeBlock euiCodeBlock--light euiCodeBlock--paddingSmall">
<code class="euiCodeBlock__code">
<pre class="euiCodeBlock__pre">status:[400 TO 499] AND extension:PHP</pre>
</code>
</div>
<div class="euiSpacer euiSpacer--l"></div>
<p>Or HTML</p>
<div class="euiCodeBlock euiCodeBlock--light euiCodeBlock--paddingSmall">
<code class="euiCodeBlock__code">
<pre class="euiCodeBlock__pre">status:[400 TO 499] AND (extension:php OR extension:html)</pre>
</code>
</div>
</div> </div>
</div> </div>

6
src/core_plugins/kibana/public/discover/styles/main.less
View file

@ -78,6 +78,7 @@
bottom: 0; bottom: 0;
right: 0; right: 0;
z-index: 20; z-index: 20;
padding-top: 10px;
opacity: 0.75; opacity: 0.75;
text-align: center; text-align: center;
@ -209,10 +210,6 @@
white-space: nowrap; white-space: nowrap;
} }
.discover-field-details-error {
margin-top: 5px;
}
.discover-field-details-item { .discover-field-details-item {
margin-top: 5px; margin-top: 5px;
} }
@ -222,6 +219,7 @@
} }
.discover-field-details-item-title { .discover-field-details-item-title {
line-height: 1.5;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;

111
src/core_plugins/kibana/public/home/components/home.js
View file

@ -3,10 +3,19 @@ import PropTypes from 'prop-types';
import { Synopsis } from './synopsis'; import { Synopsis } from './synopsis';
import { import {
KuiLinkButton, KuiLinkButton,
KuiFlexGroup,
KuiFlexItem,
KuiFlexGrid,
} from 'ui_framework/components'; } from 'ui_framework/components';
import {
EuiPage,
EuiPanel,
EuiTitle,
EuiSpacer,
EuiFlexGroup,
EuiFlexItem,
EuiFlexGrid,
EuiText,
} from '@elastic/eui';
import { FeatureCatalogueCategory } from 'ui/registry/feature_catalogue'; import { FeatureCatalogueCategory } from 'ui/registry/feature_catalogue';
export function Home({ addBasePath, directories }) { export function Home({ addBasePath, directories }) {
@ -18,92 +27,104 @@ export function Home({ addBasePath, directories }) {
}) })
.map((directory) => { .map((directory) => {
return ( return (
<KuiFlexItem style={{ minHeight: 64 }} key={directory.id}> <EuiFlexItem style={{ minHeight: 64 }} key={directory.id}>
<Synopsis <Synopsis
description={directory.description} description={directory.description}
iconUrl={addBasePath(directory.icon)} iconUrl={addBasePath(directory.icon)}
title={directory.title} title={directory.title}
url={addBasePath(directory.path)} url={addBasePath(directory.path)}
/> />
</KuiFlexItem> </EuiFlexItem>
); );
}); });
}; };
return ( return (
<div className="kuiView home"> <EuiPage className="home">
<div className="kuiViewContent">
<div className="kuiViewContentItem kuiVerticalRhythmXLarge"> <EuiFlexGroup
<KuiFlexGroup
className="kuiVerticalRhythmSmall"
justifyContent="spaceBetween" justifyContent="spaceBetween"
alignItems="flexEnd" alignItems="flexEnd"
> >
<KuiFlexItem> <EuiFlexItem>
<h1 className="kuiTitle"> <EuiTitle size="l">
Welcome to Kibana <h1>Welcome to Kibana</h1>
</h1> </EuiTitle>
</KuiFlexItem> </EuiFlexItem>
<KuiFlexItem grow={false}> <EuiFlexItem grow={false}>
<KuiFlexGroup alignItems="center"> <EuiFlexGroup alignItems="center">
<KuiFlexItem grow={false}> <EuiFlexItem grow={false}>
<p className="kuiText kuiSubduedText"> <p className="kuiText kuiSubduedText">
Data already in Elasticsearch? Data already in Elasticsearch?
</p> </p>
</KuiFlexItem> </EuiFlexItem>
<KuiFlexItem grow={false}> <EuiFlexItem grow={false}>
<KuiLinkButton <KuiLinkButton
buttonType="secondary" buttonType="secondary"
href={addBasePath('/app/kibana#/management/kibana/index')} href={addBasePath('/app/kibana#/management/kibana/index')}
> >
Set up index patterns Set up index patterns
</KuiLinkButton> </KuiLinkButton>
</KuiFlexItem> </EuiFlexItem>
</KuiFlexGroup> </EuiFlexGroup>
</KuiFlexItem> </EuiFlexItem>
</KuiFlexGroup> </EuiFlexGroup>
</div>
<div className="kuiViewContentItem kuiVerticalRhythmXLarge"> <EuiSpacer size="l" />
<KuiFlexGroup className="kuiVerticalRhythm">
<KuiFlexItem className="kuiPanel homePanel"> <EuiFlexGroup className="kuiVerticalRhythm">
<h3 className="kuiSubTitle kuiVerticalRhythm"> <EuiFlexItem>
<EuiPanel paddingSize="l">
<EuiTitle>
<h3>
Visualize and Explore Data Visualize and Explore Data
</h3> </h3>
<KuiFlexGrid className="kuiVerticalRhythmSmall homeTopFeatures" columns={2}> </EuiTitle>
<EuiSpacer size="m"/>
<EuiFlexGrid columns={2}>
{ renderDirectories(FeatureCatalogueCategory.DATA) } { renderDirectories(FeatureCatalogueCategory.DATA) }
</KuiFlexGrid> </EuiFlexGrid>
</KuiFlexItem> </EuiPanel>
<KuiFlexItem className="kuiPanel homePanel"> </EuiFlexItem>
<h3 className="kuiSubTitle kuiVerticalRhythm"> <EuiFlexItem>
<EuiPanel paddingSize="l">
<EuiTitle>
<h3>
Manage and Administer the Elastic Stack Manage and Administer the Elastic Stack
</h3> </h3>
<KuiFlexGrid className="kuiVerticalRhythmSmall homeTopFeatures" columns={2}> </EuiTitle>
<EuiSpacer size="m"/>
<EuiFlexGrid columns={2}>
{ renderDirectories(FeatureCatalogueCategory.ADMIN) } { renderDirectories(FeatureCatalogueCategory.ADMIN) }
</KuiFlexGrid> </EuiFlexGrid>
</KuiFlexItem> </EuiPanel>
</KuiFlexGroup> </EuiFlexItem>
</div> </EuiFlexGroup>
<div className="kuiViewContentItem kuiVerticalRhythmXLarge text-center"> <EuiSpacer size="l" />
<h4 className="kuiSubduedText kuiVerticalRhythmSmall">
<EuiFlexGroup justifyContent="center">
<EuiFlexItem grow={false}>
<EuiText>
<p>
Didn’t find what you were looking for? Didn’t find what you were looking for?
</h4> </p>
</EuiText>
<EuiSpacer size="s" />
<KuiLinkButton <KuiLinkButton
buttonType="secondary" buttonType="secondary"
href="#/home/feature_directory" href="#/home/feature_directory"
> >
View full directory of Kibana plugins View full directory of Kibana plugins
</KuiLinkButton> </KuiLinkButton>
</div> </EuiFlexItem>
</EuiFlexGroup>
</div> </EuiPage>
</div>
); );
} }

9
src/core_plugins/kibana/public/home/home.less
View file

@ -5,15 +5,6 @@
min-height: 100vh; min-height: 100vh;
} }
.homePanel {
padding: 24px;
background-color: @white;
}
.homeTopFeatures {
margin-top: 12px;
}
.homeFeatureDirectory { .homeFeatureDirectory {
background: @white; background: @white;
margin: 0; margin: 0;

4
src/core_plugins/kibana/public/management/landing.html
View file

@ -23,7 +23,7 @@
</div> </div>
</div> </div>
<div class="kuiPanelBody management-panel__body"> <div class="kuiPanelBody">
<div class="row"> <div class="row">
<ul class="list-unstyled"> <ul class="list-unstyled">
<li <li
@ -32,7 +32,7 @@
> >
<a <a
data-test-subj="{{::item.name}}" data-test-subj="{{::item.name}}"
class="management-panel__link" class="euiLink euiLink--primary management-panel__link"
ng-class="{ 'management-panel__link--disabled': item.disabled || !item.url }" ng-class="{ 'management-panel__link--disabled': item.disabled || !item.url }"
kbn-href="{{::item.disabled ? '' : item.url}}" kbn-href="{{::item.disabled ? '' : item.url}}"
tooltip="{{::item.tooltip}}" tooltip="{{::item.tooltip}}"

2
src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/edit_index_pattern.html
View file

@ -27,7 +27,7 @@
index and the field's associated core type as recorded by Elasticsearch. index and the field's associated core type as recorded by Elasticsearch.
While this list allows you to view the core type of each field, changing While this list allows you to view the core type of each field, changing
field types must be done using Elasticsearch's field types must be done using Elasticsearch's
<a target="_window" href="http://www.elastic.co/guide/en/elasticsearch/reference/current/mapping.html"> <a target="_window" class="euiLink euiLink--primary" href="http://www.elastic.co/guide/en/elasticsearch/reference/current/mapping.html">
Mapping API Mapping API
<i aria-hidden="true" class="fa-link fa"></i> <i aria-hidden="true" class="fa-link fa"></i>
</a> </a>

8
src/core_plugins/kibana/public/management/sections/indices/index.html
View file

@ -1,6 +1,6 @@
<div class="col-md-2 sidebar-container" role="region" aria-label="Index patterns"> <div class="col-md-2 sidebar-container" role="region" aria-label="Index patterns">
<div class="sidebar-list"> <div class="sidebar-list">
<div class="sidebar-list-header"> <div class="sidebar-item-title full-title">
<h5> <h5>
<a <a
ng-if="editingId" ng-if="editingId"
@ -18,18 +18,20 @@
class="sidebar-item" class="sidebar-item"
> >
<div class="sidebar-item-title full-title"> <div class="sidebar-item-title full-title">
<span class="label label-warning">Warning</span> <div class="euiText euiText--extraSmall">
<div class="euiBadge euiBadge--warning">Warning</div>
<p> <p>
No default index pattern. You must select or create one to continue. No default index pattern. You must select or create one to continue.
</p> </p>
</div> </div>
</div>
</li> </li>
<li <li
ng-repeat="pattern in indexPatternList | orderBy:['-default','title'] track by pattern.id" ng-repeat="pattern in indexPatternList | orderBy:['-default','title'] track by pattern.id"
class="sidebar-item" class="sidebar-item"
> >
<a href="{{::pattern.url}}" class="show"> <a href="{{::pattern.url}}" class="euiLink euiLink--primary show">
<div class="{{::pattern.class}}"> <div class="{{::pattern.class}}">
<i aria-hidden="true" ng-if="pattern.default" class="fa fa-star"></i> <i aria-hidden="true" ng-if="pattern.default" class="fa fa-star"></i>
<span ng-bind="::pattern.title"></span> <span ng-bind="::pattern.title"></span>

8
src/core_plugins/kibana/public/management/sections/objects/_objects.html
View file

@ -3,7 +3,7 @@
<!-- Header --> <!-- Header -->
<div class="kuiViewContentItem kuiBar kuiVerticalRhythm"> <div class="kuiViewContentItem kuiBar kuiVerticalRhythm">
<div class="kuiBarSection"> <div class="kuiBarSection">
<h1 class="kuiTitle"> <h1 class="euiTitle">
Edit Saved Objects Edit Saved Objects
</h1> </h1>
</div> </div>
@ -38,9 +38,13 @@
</div> </div>
<!-- Intro --> <!-- Intro -->
<p class="kuiViewContentItem kuiVerticalRhythm"> <div class="euiText">
<p class="kuiViewContentItem">
From here you can delete saved objects, such as saved searches. You can also edit the raw data of saved objects. Typically objects are only modified via their associated application, which is probably what you should use instead of this screen. Each tab is limited to 100 results. You can use the filter to find objects not in the default list. From here you can delete saved objects, such as saved searches. You can also edit the raw data of saved objects. Typically objects are only modified via their associated application, which is probably what you should use instead of this screen. Each tab is limited to 100 results. You can use the filter to find objects not in the default list.
</p> </p>
</div>
<div class="euiSpacer euiSpacer--m"></div>
<!-- Tabs --> <!-- Tabs -->
<div class="kuiViewContentItem kuiVerticalRhythm"> <div class="kuiViewContentItem kuiVerticalRhythm">

4
src/core_plugins/kibana/public/management/styles/main.less
View file

@ -37,10 +37,6 @@ kbn-management-landing {
} }
.management-panel__body {
padding-bottom: 30px;
}
.management-panel__link { .management-panel__link {
font-size: 17px; font-size: 17px;
line-height: 32px; line-height: 32px;

3
src/core_plugins/kibana/public/visualize/editor/styles/_editor.less
View file

@ -3,7 +3,7 @@
@vis-editor-sidebar-basis: (100/12) * 2%; // two of twelve columns @vis-editor-sidebar-basis: (100/12) * 2%; // two of twelve columns
@vis-editor-sidebar-min-width: 350px; @vis-editor-sidebar-min-width: 350px;
@vis-editor-nesting-width: 8px; @vis-editor-nesting-width: 8px;
@vis-editor-agg-editor-spacing: 5px; @vis-editor-agg-editor-spacing: 10px;
.vis-editor { .vis-editor {
.flex-parent(); .flex-parent();
@ -219,6 +219,7 @@
text-align: center; text-align: center;
background: @vis-editor-agg-error-bg; background: @vis-editor-agg-error-bg;
color: @vis-editor-agg-error-color; color: @vis-editor-agg-error-color;
line-height: 1.5;
} }
.vis-editor-agg-editor-ranges { .vis-editor-agg-editor-ranges {

8
src/core_plugins/metrics/public/components/annotations_editor.js
View file

@ -8,7 +8,11 @@ import FieldSelect from './aggs/field_select';
import uuid from 'uuid'; import uuid from 'uuid';
import IconSelect from './icon_select'; import IconSelect from './icon_select';
import YesNo from './yes_no'; import YesNo from './yes_no';
import { htmlIdGenerator } from '@elastic/eui';
import {
htmlIdGenerator,
EuiText,
} from '@elastic/eui';
function newAnnotation() { function newAnnotation() {
return { return {
@ -175,12 +179,14 @@ class AnnotationsEditor extends Component {
.bind(null, this.props, newAnnotation); .bind(null, this.props, newAnnotation);
content = ( content = (
<div className="vis_editor__annotations-missing"> <div className="vis_editor__annotations-missing">
<EuiText>
<p>Click the button below to create an annotation data source.</p> <p>Click the button below to create an annotation data source.</p>
<button <button
className="thor__button-outlined-default large" className="thor__button-outlined-default large"
onClick={handleAdd} onClick={handleAdd}
>Add Data Source >Add Data Source
</button> </button>
</EuiText>
</div> </div>
); );
} else { } else {

10
src/core_plugins/metrics/public/components/markdown_editor.js
View file

@ -11,7 +11,9 @@ import { KuiCodeEditor } from 'ui_framework/components';
import _ from 'lodash'; import _ from 'lodash';
import 'brace/mode/markdown'; import 'brace/mode/markdown';
import 'brace/theme/github'; import 'brace/theme/github';
import { import {
EuiText,
EuiCodeBlock, EuiCodeBlock,
} from '@elastic/eui'; } from '@elastic/eui';
@ -108,13 +110,13 @@ class MarkdownEditor extends Component {
/> />
</div> </div>
<div className="vis_editor__markdown-variables"> <div className="vis_editor__markdown-variables">
<div> <EuiText>
The following variables can be used in the Markdown by using the Handlebar (mustache) syntax.{' '} The following variables can be used in the Markdown by using the Handlebar (mustache) syntax.{' '}
<a href="http://handlebarsjs.com/expressions.html" target="_BLANK"> <a href="http://handlebarsjs.com/expressions.html" target="_BLANK">
Click here for documentation Click here for documentation
</a>{' '} </a>{' '}
on the available expressions. on the available expressions.
</div> </EuiText>
<table className="table"> <table className="table">
<thead> <thead>
<tr> <tr>
@ -129,8 +131,12 @@ class MarkdownEditor extends Component {
)} )}
<div className="vis_editor__markdown-code-desc"> <div className="vis_editor__markdown-code-desc">
<EuiText>
<p>
There is also a special variable named <code>_all</code> which you can use to access the entire tree. This is useful for There is also a special variable named <code>_all</code> which you can use to access the entire tree. This is useful for
creating lists with data from a group by... creating lists with data from a group by...
</p>
</EuiText>
</div> </div>
<EuiCodeBlock> <EuiCodeBlock>

2
src/ui/public/agg_types/controls/filters.html
View file

@ -64,3 +64,5 @@
> >
Add Filter Add Filter
</button> </button>
<div class="euiSpacer euiSpacer--s"></div>

7
src/ui/public/agg_types/controls/ip_ranges.html
View file

@ -1,9 +1,12 @@
<div> <div>
<p> <p>
<button type="button" class="kuiButton kuiButton--basic" ng-show="agg.params.ipRangeType == 'mask'" ng-click="agg.params.ipRangeType = 'fromTo'">Use From/To</button> <button type="button" class="kuiButton kuiButton--secondary" ng-show="agg.params.ipRangeType == 'mask'" ng-click="agg.params.ipRangeType = 'fromTo'">Use From/To</button>
<button type="button" class="kuiButton kuiButton--basic" ng-show="agg.params.ipRangeType != 'mask'" ng-click="agg.params.ipRangeType = 'mask'">Use CIDR Masks</button> <button type="button" class="kuiButton kuiButton--secondary" ng-show="agg.params.ipRangeType != 'mask'" ng-click="agg.params.ipRangeType = 'mask'">Use CIDR Masks</button>
</p> </p>
<div class="euiSpacer euiSpacer--s"></div>
<div ng-show="agg.params.ipRangeType != 'mask'"> <div ng-show="agg.params.ipRangeType != 'mask'">
<table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.fromTo.length"> <table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.fromTo.length">
<tr> <tr>

2
src/ui/public/agg_types/controls/string.html
View file

@ -1,4 +1,6 @@
<div class="form-group"> <div class="form-group">
<div class="euiSpacer euiSpacer--m"></div>
<label for="visEditorStringInput{{agg.id}}{{aggParam.name}}">{{ aggParam.name | label }}</label> <label for="visEditorStringInput{{agg.id}}{{aggParam.name}}">{{ aggParam.name | label }}</label>
<div> <div>
<input <input

36
src/ui/public/field_editor/field_editor.html
View file

@ -7,7 +7,7 @@
</p> </p>
</div> </div>
<div ng-if="editor.creating" class="form-group"> <div ng-if="editor.creating" class="form-group">
<label for="scriptedFieldName">Name</label> <label for="scriptedFieldName" class="kuiFormLabel">Name</label>
<input <input
ng-model="editor.field.name" ng-model="editor.field.name"
id="scriptedFieldName" id="scriptedFieldName"
@ -27,7 +27,7 @@
</div> </div>
<div ng-if="editor.field.scripted" class="form-group"> <div ng-if="editor.field.scripted" class="form-group">
<label for="scriptedFieldLang">Language</label> <label for="scriptedFieldLang" class="kuiFormLabel">Language</label>
<div class="kuiInfoPanel kuiInfoPanel--warning kuiVerticalRhythm" ng-if="editor.field.lang && editor.isDeprecatedLang(editor.field.lang)"> <div class="kuiInfoPanel kuiInfoPanel--warning kuiVerticalRhythm" ng-if="editor.field.lang && editor.isDeprecatedLang(editor.field.lang)">
<div class="kuiInfoPanelHeader"> <div class="kuiInfoPanelHeader">
<span <span
@ -61,7 +61,7 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="scriptedFieldType">Type</label> <label for="scriptedFieldType" class="kuiFormLabel">Type</label>
<select <select
ng-if="editor.field.scripted" ng-if="editor.field.scripted"
id="scriptedFieldType" id="scriptedFieldType"
@ -83,7 +83,7 @@
<i class="fa fa-warning"></i> Warning <i class="fa fa-warning"></i> Warning
</span> </span>
<label for="scriptFieldFormat">Format <small>(Default: <i>{{editor.defFormatType.resolvedTitle}}</i>)</small></label> <label for="scriptFieldFormat" class="kuiFormLabel">Format <small>(Default: <i>{{editor.defFormatType.resolvedTitle}}</i>)</small></label>
<div class="hintbox" ng-if="editor.showFormatHelp"> <div class="hintbox" ng-if="editor.showFormatHelp">
<h4 class="hintbox-heading"> <h4 class="hintbox-heading">
@ -112,7 +112,7 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="editorFieldCount">Popularity</label> <label for="editorFieldCount" class="kuiFormLabel">Popularity</label>
<div class="kuiFieldGroup"> <div class="kuiFieldGroup">
<div class="kuiFieldGroupSection"> <div class="kuiFieldGroupSection">
<input <input
@ -157,7 +157,7 @@
<div ng-if="editor.field.scripted"> <div ng-if="editor.field.scripted">
<div class="form-group"> <div class="form-group">
<label for="scriptedFieldScript">Script</label> <label for="scriptedFieldScript" class="kuiFormLabel">Script</label>
<textarea <textarea
required required
class="field-editor_script-input form-control text-monospace" class="field-editor_script-input form-control text-monospace"
@ -167,12 +167,11 @@
></textarea> ></textarea>
</div> </div>
<div class="form-group"> <div class="euiCallOut euiCallOut--warning">
<div class="hintbox"> <div class="euiCallOutHeader">
<h4> <span class="euiCallOutHeader__title">Proceed with caution</span>
<i class="fa fa-warning text-warning"></i> Proceed with caution </div>
</h4> <div class="euiText euiText--small">
<p> <p>
Please familiarize yourself with <a target="_window" documentation-href="scriptedFields.scriptFields">script fields <i class="fa-link fa"></i></a> and with <a target="_window" documentation-href="scriptedFields.scriptAggs">scripts in aggregations <i class="fa-link fa"></i></a> before using scripted fields. Please familiarize yourself with <a target="_window" documentation-href="scriptedFields.scriptFields">script fields <i class="fa-link fa"></i></a> and with <a target="_window" documentation-href="scriptedFields.scriptAggs">scripts in aggregations <i class="fa-link fa"></i></a> before using scripted fields.
</p> </p>
@ -183,12 +182,13 @@
</div> </div>
</div> </div>
<div class="form-group"> <div class="euiSpacer euiSpacer--m"></div>
<div class="hintbox">
<h4>
<i class="fa fa-question-circle text-info"></i> Scripting Help
</h4>
<div class="euiCallOut euiCallOut--primary">
<div class="euiCallOutHeader">
<span class="euiCallOutHeader__title">Scripting Help</span>
</div>
<div class="euiText euiText--small">
<p> <p>
By default, Kibana scripted fields use <a target="_window" documentation-href="scriptedFields.painless">Painless <i class="fa-link fa"></i></a>, a simple and secure scripting language designed specifically for use with Elasticsearch. To access values in the document use the following format: By default, Kibana scripted fields use <a target="_window" documentation-href="scriptedFields.painless">Painless <i class="fa-link fa"></i></a>, a simple and secure scripting language designed specifically for use with Elasticsearch. To access values in the document use the following format:
</p> </p>
@ -234,6 +234,8 @@
</div> </div>
<div class="euiSpacer euiSpacer--l"></div>
<div ng-if="editor.conflictDescriptionsLength > 0"> <div ng-if="editor.conflictDescriptionsLength > 0">
<p> <p>
<i class="fa fa-warning text-warning"></i> <i class="fa fa-warning text-warning"></i>

2
src/ui/public/number_list/number_list.html
View file

@ -33,6 +33,8 @@
Please specify at least one {{numberListCntr.getUnitName()}} Please specify at least one {{numberListCntr.getUnitName()}}
</p> </p>
<div class="euiSpacer euiSpacer--s"></div>
<button <button
ng-click="numberListCntr.add()" ng-click="numberListCntr.add()"
type="button" type="button"

19
src/ui/public/styles/base.less
View file

@ -87,7 +87,7 @@ ul.navbar-inline li {
.checkbox label { .checkbox label {
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 0; padding-left: 0 !important;
input[type="checkbox"] { input[type="checkbox"] {
float: none; float: none;
@ -541,6 +541,16 @@ style-compile {
background-color: @globalColorWhite; background-color: @globalColorWhite;
padding: 10px; padding: 10px;
border-radius: 4px; border-radius: 4px;
label {
margin-bottom: 5px !important;
font-weight: 700;
display: block;
}
.vis-option-item label {
font-weight: normal !important;
}
} }
.kuiSideBarSection .kuiSideBarSection .kuiSideBarSection{ .kuiSideBarSection .kuiSideBarSection .kuiSideBarSection{
@ -631,7 +641,7 @@ style-compile {
*/ */
.kuiSideBarFormSectionTitle { .kuiSideBarFormSectionTitle {
font-size: 12px; font-size: 12px;
color: @globalColorMediumGray; color: @globalColorDarkGray;
margin: 10px 0 !important; // 1 margin: 10px 0 !important; // 1
padding-bottom: 2px; padding-bottom: 2px;
} }
@ -695,4 +705,9 @@ style-compile {
height: 64px; height: 64px;
} }
.pdf-options label {
padding-bottom: 5px;
display: block;
}
@import "~dragula/dist/dragula.css"; @import "~dragula/dist/dragula.css";

1
src/ui/public/styles/hintbox.less
View file

@ -5,6 +5,7 @@
border-radius: 5px; border-radius: 5px;
margin-bottom: @hintbox-spacing-vertical; margin-bottom: @hintbox-spacing-vertical;
background-color: @hintbox-background-color; background-color: @hintbox-background-color;
line-height: 1.5;
a { a {
color: @hintbox-link-color !important; color: @hintbox-link-color !important;

10
src/ui/public/styles/sidebar.less
View file

@ -39,6 +39,16 @@
border-top: solid 1px transparent; border-top: solid 1px transparent;
border-bottom: solid 1px transparent; border-bottom: solid 1px transparent;
label {
margin-bottom: 5px;
font-weight: 700;
display: block;
}
label[for] {
cursor: pointer;
}
&.active { &.active {
background-color: darken(@globalColorLightestGray, 10%) !important; background-color: darken(@globalColorLightestGray, 10%) !important;
color: @sidebar-active-color; color: @sidebar-active-color;

1
src/ui/public/vis/editors/default/agg_add.html
View file

@ -1,5 +1,6 @@
<div ng-show="add.form" class="vis-editor-agg-add-schemas"> <div ng-show="add.form" class="vis-editor-agg-add-schemas">
<label>Select {{ groupName }} type</label> <label>Select {{ groupName }} type</label>
<div class="euiSpacer euiSpacer--s"></div>
<ul class="form-group list-group list-group-menu"> <ul class="form-group list-group list-group-menu">
<li <li
tabindex="0" tabindex="0"

1
src/ui/public/vis/editors/default/agg_select.html
View file

@ -1,6 +1,7 @@
<div class="form-group"> <div class="form-group">
<label ng-if="$index < 1 || groupName !== 'buckets'">Aggregation</label> <label ng-if="$index < 1 || groupName !== 'buckets'">Aggregation</label>
<label ng-if="$index >= 1 && groupName === 'buckets'">Sub Aggregation</label> <label ng-if="$index >= 1 && groupName === 'buckets'">Sub Aggregation</label>
<div class="euiSpacer euiSpacer--s"></div>
<ui-select <ui-select
required required
name="agg" name="agg"

3
ui_framework/dist/ui_framework.css vendored
View file

@ -3690,7 +3690,8 @@ main {
max-width: 20px; max-width: 20px;
/* 1 */ /* 1 */
color: #191E23; color: #191E23;
border-top: 1px solid #D9D9D9; } border-top: 1px solid #D9D9D9;
vertical-align: middle; }
/** /**
* 1. Vertically align all children. * 1. Vertically align all children.

1
ui_framework/src/components/table/_table.scss
View file

@ -104,6 +104,7 @@
@include tableCell; @include tableCell;
color: $kuiFontColor; color: $kuiFontColor;
border-top: $kuiBorderThin; border-top: $kuiBorderThin;
vertical-align: middle;
} }
/** /**