Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WIP: Prepwork for EUI in Kibana #15436

Merged
merged 10 commits into from
Dec 12, 2017
Merged

WIP: Prepwork for EUI in Kibana #15436

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
876ae24
bunch of css reset fixes / cleanup
snide Nov 30, 2017
b3e2aa3
homepage converted mostly to eui
snide Dec 1, 2017
f35ce8b
eui fixes
snide Dec 5, 2017
ef924ea
more eui fixes
snide Dec 6, 2017
5302b63
remove hacks, now in eui directly
snide Dec 6, 2017
549345a
Remove Bootstrap resets.
cjcenizal Jul 19, 2017
454be92
eui fixes
snide Dec 5, 2017
d590345
more eui fixes
snide Dec 6, 2017
03ba2c6
remove hacks, now in eui directly
snide Dec 6, 2017
072359d
eui fixes for CJ
snide Dec 12, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 32 additions & 34 deletions src/core_plugins/console/public/src/directives/help.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,38 @@
<h2 class="kuiLocalDropdownTitle">Help</h2>
<h2 class="euiTitle">Help</h2>

<tabset>
<tab heading="Request format">
<div class="list-group-item list-group-item--noBorder">
<div class="euiSpacer euiSpacer--m"></div>

<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:
<sense-help-example></sense-help-example>
</div>
</tab>
<tab heading="Keyboard tips">
<div class="list-group-item list-group-item--noBorder">
<dl class="dl-horizontal">
<dt></dt>
<dd><strong>General editing</strong></dd>
<dt>Ctrl/Cmd + I</dt>
<dd>Auto indent current request</dd>
<dt>Ctrl + Space</dt>
<dd>Open Auto complete (even if not typing)</dd>
<dt>Ctrl/Cmd + Enter</dt>
<dd>Submit request</dd>
<dt>Ctrl/Cmd + Up/Down</dt>
<dd>Jump to the previous/next request start or end.</dd>
<dt>Ctrl/Cmd + Alt + L</dt>
<dd>Collapse/expand current scope.</dd>
<dt>Ctrl/Cmd + Option + 0</dt>
<dd>Collapse all scopes but the current one. Expand by adding a shift.</dd>
</dl>
<dl class="dl-horizontal">
<dt></dt>
<dd><strong>When auto-complete is visible</strong></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>
<div class="euiFlexItem">
<h2 class="euiTitle">Keyboard commands</h2>
<div class="euiSpacer euiSpacer--l"></div>
<dl class="euiDescriptionList euiDescriptionList--row euiDescriptionList--compressed">
<dt class="euiDescriptionList__title">Ctrl/Cmd + I</dt>
<dd class="euiDescriptionList__description">Auto indent current request</dd>
<dt class="euiDescriptionList__title">Ctrl + Space</dt>
<dd class="euiDescriptionList__description">Open Auto complete (even if not typing)</dd>
<dt class="euiDescriptionList__title">Ctrl/Cmd + Enter</dt>
<dd class="euiDescriptionList__description">Submit request</dd>
<dt class="euiDescriptionList__title">Ctrl/Cmd + Up/Down</dt>
<dd class="euiDescriptionList__description">Jump to the previous/next request start or end.</dd>
<dt class="euiDescriptionList__title">Ctrl/Cmd + Alt + L</dt>
<dd class="euiDescriptionList__description">Collapse/expand current scope.</dd>
<dt class="euiDescriptionList__title">Ctrl/Cmd + Option + 0</dt>
<dd class="euiDescriptionList__description">Collapse all scopes but the current one. Expand by adding a shift.</dd>
<dt class="euiDescriptionList__title">Down arrow</dt>
<dd class="euiDescriptionList__description">Switch focus to auto-complete menu. Use arrows to further select a term</dd>
<dt class="euiDescriptionList__title">Enter/Tab</dt>
<dd class="euiDescriptionList__description">Select the currently selected or the top most term in auto-complete menu</dd>
<dt class="euiDescriptionList__title">Esc</dt>
<dd class="euiDescriptionList__description">Close auto-complete menu</dd>
</dl>
</div>
</tab>
</tabset>
</div>
</div>
70 changes: 37 additions & 33 deletions src/core_plugins/console/public/src/directives/welcome.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,37 @@
<h2 class="kuiLocalDropdownTitle">Welcome to Console</h2>

<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
the response pane on the right side.
</p>

<p>Console understands requests in a compact format, similar to cURL:
<sense-help-example></sense-help-example>

<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.
</p>

<p><strong>A few quick tips, while I have your attention</strong></p>
<ul>
<li>Submit requests to ES using the green triangle button.</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 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>
</ul>

<button
type="button"
class="kuiButton kuiButton--primary"
data-test-subj="help-close-button"
ng-click="kbnTopNav.close()"
>
Get to work
</button>
<div class="euiText">

<h2>Welcome to Console</h2>

<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
the response pane on the right side.
</p>

<p>Console understands requests in a compact format, similar to cURL:
<sense-help-example></sense-help-example>

<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.
</p>

<p><strong>A few quick tips, while I have your attention</strong></p>
<ul>
<li>Submit requests to ES using the green triangle button.</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 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>
</ul>

<button
type="button"
class="kuiButton kuiButton--primary"
data-test-subj="help-close-button"
ng-click="kbnTopNav.close()"
>
Get to work
</button>

</div>
1 change: 1 addition & 0 deletions src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,7 @@
class="kuiButton kuiButton--primary kuiButton--fullWidth">
Add Range
</div>
<div class="euiSpacer euiSpacer--s"></div>
<div class="text text-center text-info">Note: colors can be changed in the legend</div>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,7 @@
>
Add Range
</button>
<div class="euiSpacer euiSpacer--s"></div>
<div class="text text-center text-info">Note: colors can be changed in the legend</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/core_plugins/kibana/public/dashboard/styles/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@
.start-screen {
margin: 20px auto;
max-width: 800px;
background: tint(@globalColorBlue, 90%);
background: #FFF;
padding: 40px;
border-radius: 4px;
}
Expand Down
6 changes: 3 additions & 3 deletions src/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@
></bread-crumbs>

<!-- Tabs. -->
<div data-transclude-slot="bottomRow" class="kuiLocalTabs" role="tablist">
<div data-transclude-slot="bottomRow" class="euiTabs" role="tablist">
<a
role="tab"
aria-selected="{{kbnDevToolsApp.currentPath === item.url}}"
ng-repeat="item in kbnDevToolsApp.devTools"
class="kuiLocalTab"
ng-class="{'kuiLocalTab-isSelected': kbnDevToolsApp.currentPath === item.url}"
class="euiTab"
ng-class="{'euiTab-isSelected': kbnDevToolsApp.currentPath === item.url}"
kbn-href="{{::item.url}}"
>
{{::item.display}}
Expand Down
4 changes: 2 additions & 2 deletions ...core_plugins/kibana/public/discover/components/field_chooser/lib/detail_views/string.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="discover-field-details">
<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
<span ng-if="!field.details.error">
<a
Expand All @@ -20,7 +20,7 @@

<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-repeat="bucket in ::field.details.buckets" class="discover-field-details-item">
Expand Down
5 changes: 4 additions & 1 deletion src/core_plugins/kibana/public/discover/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,10 @@ <h1 tabindex="0" id="kui_local_breadcrumb" class="kuiLocalBreadcrumb">
<!-- loading -->
<div ng-show="resultState === 'loading'">
<div class="discover-overlay">
<h2>Searching</h2>
<div class="euiTitle">
<h2>Searching</h2>
</div>
<div class="euiSpacer euiSpacer--m"></div>
<div ng-show="fetchStatus">{{fetchStatus.complete}}/{{fetchStatus.total}}</div>
</div>
</div>
Expand Down
60 changes: 43 additions & 17 deletions src/core_plugins/kibana/public/discover/partials/no_results.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<div>
<div class="col-md-10 col-md-offset-1" data-test-subj="discoverNoResults">
<div class="euiPage">

<div class="euiText" data-test-subj="discoverNoResults">

<h1>No results found <i aria-hidden="true" class="fa fa-meh-o"></i></h1>

Expand Down Expand Up @@ -63,21 +64,46 @@ <h3>
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>

<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:
<pre>status:200</pre>

Find all status codes between 400-499:
<pre>status:[400 TO 499]</pre>

Find status codes 400-499 with the extension php:
<pre>status:[400 TO 499] AND extension:PHP</pre>

Or HTML
<pre>status:[400 TO 499] AND (extension:php OR extension:html)</pre>
<h4>Examples</h4>

<p>Find requests that contain the number 200, in any field:</p>
<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>

<p>Or we can search in a specific field. Find 200 in the status field:</p>
<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>

<p>Find all status codes between 400-499:</p>
<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>

<p>Find status codes 400-499 with the extension php:</p>
<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>
Expand Down
6 changes: 2 additions & 4 deletions src/core_plugins/kibana/public/discover/styles/main.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@
bottom: 0;
right: 0;
z-index: 20;
padding-top: 10px;

opacity: 0.75;
text-align: center;
Expand Down Expand Up @@ -209,10 +210,6 @@
white-space: nowrap;
}

.discover-field-details-error {
margin-top: 5px;
}

.discover-field-details-item {
margin-top: 5px;
}
Expand All @@ -222,6 +219,7 @@
}

.discover-field-details-item-title {
line-height: 1.5;
display: flex;
align-items: center;
justify-content: space-between;
Expand Down
Loading