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.

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

Integrate UI Framework #8679

Merged
merged 1 commit into from
Oct 27, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
"test:server": "grunt test:server",
"test:coverage": "grunt test:coverage",
"test:visualRegression": "grunt test:visualRegression",
"checkLicenses": "grunt licenses",
"build": "grunt build",
"release": "grunt release",
"start": "sh ./bin/kibana --dev",
Expand All @@ -71,6 +72,7 @@
"@bigfunger/decompress-zip": "0.2.0-stripfix3",
"@bigfunger/jsondiffpatch": "0.1.38-webpack",
"@elastic/datemath": "2.3.0",
"@elastic/kibana-ui-framework": "0.0.9",
"@spalger/filesaver": "1.1.2",
"@spalger/leaflet-draw": "0.2.3",
"@spalger/leaflet-heat": "0.1.3",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,26 @@ export function SenseTopNavController(Private) {
{
key: 'welcome',
hideButton: true,
template: `<sense-welcome></sense-welcome>`
template: `<sense-welcome></sense-welcome>`,
testId: 'consoleWelcomeButton',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Originally, data-test-subj attributes were added to the Menu buttons implicitly, by using the key value. I added this property so we can be explicit about this value.

},
{
key: 'history',
description: 'History',
template: `<sense-history></sense-history>`
template: `<sense-history></sense-history>`,
testId: 'consoleHistoryButton',
},
{
key: 'settings',
description: 'Settings',
template: `<sense-settings></sense-settings>`
template: `<sense-settings></sense-settings>`,
testId: 'consoleSettingsButton',
},
{
key: 'help',
description: 'Help',
template: `<sense-help></sense-help>`
template: `<sense-help></sense-help>`,
testId: 'consoleHelpButton',
},
]);

Expand Down
62 changes: 33 additions & 29 deletions src/core_plugins/console/public/src/directives/help.html
Original file line number Diff line number Diff line change
@@ -1,36 +1,40 @@
<h3>Help</h3>
<div class="localDropdownTitle">Help</div>

<tabset>
<tab heading="Request 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>
<div class="list-group-item list-group-item--noBorder">
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">
<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>
</dl>
<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>
</dl>
</div>
</tab>
</tabset>
5 changes: 2 additions & 3 deletions src/core_plugins/console/public/src/directives/history.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<h3>History</h3>
<div class="localDropdownTitle">History</div>

<div class="history-body">
<ul class="list-group history-reqs">
Expand All @@ -11,8 +11,7 @@ <h3>History</h3>
ng-dblclick="history.restore(req)"
title="{{ req.description }}"
class="list-group-item history-req"
>

>
{{ history.describeReq(req) }}
<span class="history-req-icon"><i class="fa fa-chevron-right"></i></span>
</li>
Expand Down
33 changes: 17 additions & 16 deletions src/core_plugins/console/public/src/directives/settings.html
Original file line number Diff line number Diff line change
@@ -1,22 +1,21 @@
<h3>Settings</h3>
<div class="localDropdownTitle">Settings</div>

<form class="form" name="settingsForm" ng-submit="settingsForm.$valid && settings.apply()">
<div class="form-group">
<h4>Editor &amp; Output pane settings</h4>
<div class="localDropdownHeader">
<div class="localDropdownHeader__label">Font Size</div>
</div>

<div class="form-group">
<label>Font Size</label>
<div>
<input
input-focus
ng-model="settings.vals.fontSize"
name="fontSize"
type="number"
required
class="form-control"
data-test-subj="setting-font-size-input"
>
</div>
<div>
<input
input-focus
ng-model="settings.vals.fontSize"
name="fontSize"
type="number"
required
class="form-control"
data-test-subj="setting-font-size-input"
>
</div>

<div class="checkbox">
Expand All @@ -28,7 +27,9 @@ <h4>Editor &amp; Output pane settings</h4>
</div>

<div class="form-group">
<h4>Autocomplete</h4>
<div class="localDropdownHeader">
<div class="localDropdownHeader__label">Autocomplete</div>
</div>

<div class="checkbox">
<label>
Expand Down
7 changes: 3 additions & 4 deletions src/core_plugins/console/public/src/directives/welcome.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<h3>Welcome to Console</h3>
<div class="localDropdownTitle">Welcome to Console</div>

<h4>Quick intro to the UI</h4>
<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
Expand All @@ -14,8 +14,7 @@ <h4>Quick intro to the UI</h4>
These suggestions are made based on the request structure <i>as well as</i> your indices and types.
</p>


<h4>A few quick tips, while I have your attention</h4>
<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>
Expand Down
84 changes: 49 additions & 35 deletions src/core_plugins/kibana/public/dashboard/index.html
Original file line number Diff line number Diff line change
@@ -1,43 +1,57 @@
<dashboard-app class="app-container dashboard-container">
<!-- Local nav. -->
<kbn-top-nav name="dashboard" config="topNavMenu">
<div class="kibana-nav-info">
<span ng-show="dash.id" class="kibana-nav-info-title">
<span ng-bind="::dash.title"></span>
</span>
</div>
</kbn-top-nav>

<navbar ng-show="chrome.getVisible()" name="dashboard-search">
<form name="queryInput"
class="fill inline-form"
ng-submit="filterResults()"
role="form">

<div class="typeahead" kbn-typeahead="dashboard">
<div class="input-group"
ng-class="queryInput.$invalid ? 'has-error' : ''">

<input
type="text"
placeholder="Filter..."
aria-label="Filter input"
class="form-control"
ng-model="state.query"
input-focus
kbn-typeahead-input
parse-query>
<button type="submit" class="btn btn-default" ng-disabled="queryInput.$invalid" aria-label="Filter dashboards">
<span aria-hidden="true" class="fa fa-search"></span>
</button>
</div>

<kbn-typeahead-items></kbn-typeahead-items>
<!-- Transcluded elements. -->
<div data-transclude-slots>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've made a significant change to the way kbnTopNav works. It can now transclude content into its top left corner, and into its bottom row, using this idea of "slots", which are identified by the data-transclude-slots and data-transclude-slot attributes. Refer to the localNav examples to see how these areas of the nav are used.

<!-- Title. -->
<div
data-transclude-slot="topLeftCorner"
class="localTitle"
>
<span
ng-show="dash.id"
ng-bind="::dash.title"
></span>
</div>

</form>
<div class="button-group"></div>
</navbar>
<!-- Search. -->
<form
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Most apps have a search bar in the top nav. I typically had to adjust it to use the new localSearch styles, which generally involved removing some markup too.

data-transclude-slot="bottomRow"
class="fullWidth"
ng-show="chrome.getVisible()"
role="form"
name="queryInput"
ng-submit="filterResults()"
>
<div class="typeahead" kbn-typeahead="dashboard">
<div class="localSearch">
<input
parse-query
input-focus
kbn-typeahead-input
ng-model="state.query"
placeholder="Filter..."
aria-label="Filter input"
type="text"
class="localSearchInput"
ng-class="{'localSearchInput-isInvalid': queryInput.$invalid}"
>
<button
type="submit"
aria-label="Filter Dashboards"
class="localSearchButton"
ng-disabled="queryInput.$invalid"
>
<span class="fa fa-search" aria-hidden="true"></span>
</button>
</div>
<kbn-typeahead-items></kbn-typeahead-items>
</div>
</form>
</div>
</kbn-top-nav>

<!-- Filters. -->
<filter-bar state="state"></filter-bar>

<div ng-show="!state.panels.length" class="text-center start-screen">
Expand Down
2 changes: 1 addition & 1 deletion src/core_plugins/kibana/public/dashboard/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
template: require('plugins/kibana/dashboard/partials/save_dashboard.html')
}, {
key: 'open',
description: 'Load Saved Dashboard',
description: 'Open Saved Dashboard',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I made our language more consistent, using the term "Open" instead of "Load".

template: require('plugins/kibana/dashboard/partials/load_dashboard.html')
}, {
key: 'share',
Expand Down
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
<saved-object-finder type="dashboards"></saved-object-finder>
<div class="localDropdownTitle">Open Dashboard</div>
<saved-object-finder type="dashboards"></saved-object-finder>
17 changes: 8 additions & 9 deletions src/core_plugins/kibana/public/dashboard/partials/options.html
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
<form role="form" class="options">
<p>
<div class="input-group">
<label>
<input type="checkbox" ng-model="opts.ui.darkTheme" ng-checked="opts.ui.darkTheme">
Use dark theme
</label>
</div>
</p>
<form role="form">
<div class="localDropdownTitle">Options</div>
<div class="input-group">
<label>
<input type="checkbox" ng-model="opts.ui.darkTheme" ng-checked="opts.ui.darkTheme">
Use dark theme
</label>
</div>
</form>
Original file line number Diff line number Diff line change
@@ -1,14 +1,27 @@
<div ng-switch on="mode" ng-init="mode = 'visualization'" class="dashboard-panel-picker">
<div
ng-switch="mode"
ng-init="mode = 'visualization'"
>
<div class="localDropdownTitle">Add Panels</div>

<ul class="nav nav-tabs">
<li ng-class="{active: mode == 'visualization'}"><a ng-click="mode='visualization'" title="Visualizations">Visualizations</a></li>
<li ng-class="{active: mode == 'search'}"><a ng-click="mode='search'" title="Searches">Searches</a></li>
<li ng-class="{active: mode == 'visualization'}">
<a ng-click="mode='visualization'" title="Visualizations">
Visualization
</a>
</li>
<li ng-class="{active: mode == 'search'}">
<a ng-click="mode='search'" title="Searches">
Saved Search
</a>
</li>
</ul>

<div class="list-group-item" ng-switch-when="visualization">
<div class="list-group-item list-group-item--noBorder" ng-switch-when="visualization">
<saved-object-finder title="Choose a visualization" type="visualizations" on-choose="opts.addVis"></saved-object-finder>
</div>

<div class="list-group-item" ng-switch-when="search">
<div class="list-group-item list-group-item--noBorder" ng-switch-when="search">
<saved-object-finder title="Choose a search" type="searches" on-choose="opts.addSearch"></saved-object-finder>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -1,8 +1,16 @@
<form ng-submit="opts.save()" role="form">
<div class="form-group">
<label for="dashboardTitle">Save As</label>
<input id="dashboardTitle" type="text" ng-model="opts.dashboard.title" class="form-control" placeholder="Dashboard title" input-focus="select">
</div>
<form
role="form"
ng-submit="opts.save()"
>
<div class="localDropdownTitle">Save Dashboard</div>
<input
class="localDropdownInput"
id="dashboardTitle"
type="text"
ng-model="opts.dashboard.title"
placeholder="Dashboard title"
input-focus="select"
>
<div class="form-group">
<label>
<input type="checkbox" ng-model="opts.dashboard.timeRestore" ng-checked="opts.dashboard.timeRestore">
Expand Down
4 changes: 0 additions & 4 deletions src/core_plugins/kibana/public/dashboard/styles/main.less
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,3 @@ dashboard-grid {
}
}
}

.dashboard-panel-picker > .list-group-item {
border-top: 0;
}
Loading