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

Merge pull request #6156 from stormpython/visualize

Browse source 
New Design for Visualize
This commit is contained in:
Rashid Khan 2016-03-15 11:46:14 -07:00
commit 0049a48e28
15 changed files with 312 additions and 164 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/plugins/kibana/public/visualize/editor/styles/_editor.less
View file

@ -26,13 +26,20 @@
&:before {
display: none;
}
&:hover {
background-color: transparent;
}
}
> li {
> a {
padding: 4px 0;
margin: 0 10px;
color: @kibanaGray2;
}
> a:hover {
border-bottom: 2px solid @kibanaGray2;
}
}
.danger {
@ -104,7 +111,7 @@
.index-pattern,
nav {
min-height: 34px;
min-height: @app-icon-height;
border-radius: 0px;
}

116
src/plugins/kibana/public/visualize/styles/main.less
View file

@ -3,44 +3,98 @@
@import (reference) "~ui/styles/list-group-menu";
.vis-wizard {
h1 {
margin-top: 45px;
}
}
margin-right: 0;
margin-left: 0;
padding-left: 0;
padding-right: 0;
.wizard-vis-type {
.list-group-item();
.list-group-menu .list-group-menu-item();
@media (min-width: @screen-lg) {
.wizard {
padding: 0;
display: flex;
// overrided for tablet and desktop
@media (min-width: @screen-md-min) {
display: flex;
align-items: flex-start;
}
.wizard-column {
flex: 1;
display: flex;
flex-direction: column;
padding: 0px 2.5px;
&-heading {
flex: 0 0 200px;
display: flex;
align-items: center;
font-size: 1.2em;
.fa {
flex: 0 0 auto;
margin-right: @padding-base-horizontal;
font-size: 1.5em;
text-align: center;
}
h4 {
flex: 1 0 auto;
.wizard-row {
flex: 1;
background-color: @kibanaGray6;
}
}
}
}
&-description {
flex: 1 1 auto;
color: @wizard-vis-type-description-color;
h3 {
margin-top: 35px;
padding: 0px 15px;
}
.wizard-row {
.panel {
margin-bottom: 0;
border: none;
}
.panel-default > .panel-heading {
background-color: @kibanaGray6;
}
.list-group {
margin-bottom: 0;
.list-group-item {
border-radius: 0;
border: none;
}
}
.striped {
li:nth-child(odd) {
background-color: @white;
}
li:nth-child(even) {
background-color: @kibanaGray6;
}
}
}
.wizard-type {
flex: 1;
.list-group-item();
.list-group-menu .list-group-menu-item();
border: none;
border-radius: 0;
background-color: @kibanaGray6;
&-heading {
flex: 0 0 200px;
display: flex;
align-items: center;
font-size: 1.2em;
.fa {
flex: 0 0 auto;
margin-right: @padding-base-horizontal;
font-size: 1.5em;
text-align: center;
color: @saved-object-finder-icon-color;
}
h4 {
flex: 1 0 auto;
}
}
&-description {
flex: 1 1 auto;
color: @wizard-vis-type-description-color;
}
}
}
@import "../editor/styles/_editor.less";

42
src/plugins/kibana/public/visualize/wizard/step_1.html
View file

@ -1,24 +1,22 @@
<h1>
Create a new visualization <br class="visible-xs">
<span class="pull-right label label-default hidden-xs">Step 1</span>
<span class="label label-default visible-xs">Step 1</span>
</h1>
<div class="wizard-vis-types">
<a class="wizard-vis-type"
ng-repeat="type in visTypes.inTitleOrder"
ng-href="{{ visTypeUrl(type) }}">
<div class="wizard-vis-type-heading">
<i aria-hidden="true" class="fa fa-fw" ng-class="type.icon"></i>
<h4>{{type.title}}</h4>
<div class="wizard">
<div class="wizard-column">
<h3>Create New Visualization</h3>
<div class="wizard-row">
<a class="wizard-type" ng-repeat="type in visTypes.inTitleOrder" ng-href="{{ visTypeUrl(type) }}">
<div class="wizard-type-heading">
<i aria-hidden="true" class="fa fa-fw" ng-class="type.icon"></i>
<h4>{{type.title}}</h4>
</div>
<p class="wizard-type-description">{{type.description}}</p>
</a>
</div>
<p class="wizard-vis-type-description">{{type.description}}</p>
</a>
</div>
<div class="wizard-column">
<h3>Or, Open a Saved Visualization</h3>
<saved-object-finder
title="Saved Visualizations"
type="visualizations"
class="wizard-row">
</saved-object-finder>
</div>
</div>
<h1>Or, open a saved visualization</h1>
<saved-object-finder
title="Saved Visualizations"
type="visualizations">
</saved-object-finder>

53
src/plugins/kibana/public/visualize/wizard/step_2.html
View file

@ -1,37 +1,26 @@
<h1>
Select a search source
<span class="pull-right label label-default hidden-xs">Step 2</span>
<span class="label label-default visible-xs">Step 2</span>
</h1>
<ul class="list-group list-group-menu" ng-switch on="stepTwoMode">
<li ng-click="stepTwoMode='new'"
ng-class="{'active': stepTwoMode=='new'}"
class="list-group-item list-group-menu-item">
From a new search
</li>
<li class="list-group-item" ng-switch-when="new">
<div class="wizard">
<div class="wizard-column">
<h3>From a New Search</h3>
<!-- Index patterns -->
Select an index pattern
<div class="form-group">
<select
class="form-control"
ng-model="indexPattern.selection"
ng-options="pattern as pattern for pattern in indexPattern.list | orderBy:'toString()'">
</select>
<div class="wizard-row">
<div class="panel panel-default">
<div class="panel-heading">Index Patterns</div>
</div>
<ul class="striped list-group">
<li class="list-group-item" ng-repeat="pattern in indexPattern.list | orderBy: 'toString()'">
<a class="index-link" kbn-href="{{ makeUrl(pattern) }}">{{pattern}}</a>
</li>
</ul>
</div>
</li>
<li ng-click="stepTwoMode='saved'"
ng-class="{'active': stepTwoMode=='saved'}"
class="list-group-item list-group-menu-item">
From a saved search
</li>
<li class="list-group-item" ng-switch-when="saved">
</div>
<div class="wizard-column">
<h3>Or, From a Saved Search</h3>
<!-- Saved searches -->
<saved-object-finder
title="Saved Searches"
type="searches"
make-url="step2WithSearchUrl">
title="Saved Searches"
type="searches"
class="wizard-row"
make-url="step2WithSearchUrl">
</saved-object-finder>
</li>
</ul>
</div>
</div>

16
src/plugins/kibana/public/visualize/wizard/wizard.js
View file

@ -8,7 +8,7 @@ import uiModules from 'ui/modules';
const templateStep = function (num, txt) {
return '<div ng-controller="VisualizeWizardStep' + num + '" class="container vis-wizard">' + txt + '</div>';
return '<div ng-controller="VisualizeWizardStep' + num + '" class="container-fluid vis-wizard">' + txt + '</div>';
};
const module = uiModules.get('app/visualize', ['kibana/courier']);
@ -56,16 +56,8 @@ module.controller('VisualizeWizardStep2', function ($route, $scope, $location, t
list: $route.current.locals.indexPatternIds
};
$scope.$watch('stepTwoMode', function (mode) {
if (mode === 'new') {
if ($scope.indexPattern.list && $scope.indexPattern.list.length === 1) {
$scope.indexPattern.selection = $scope.indexPattern.list[0];
}
}
});
$scope.$watch('indexPattern.selection', function (pattern) {
$scope.makeUrl = function (pattern) {
if (!pattern) return;
kbnUrl.change('/visualize/create?type={{type}}&indexPattern={{pattern}}', {type: type, pattern: pattern});
});
return `#/visualize/create?type=${type}&indexPattern=${pattern}`;
};
});

14
src/ui/public/chrome/directives/app_switcher/app_switcher.less
View file

@ -1,20 +1,6 @@
@import (reference) "~ui/styles/mixins";
@import (reference) "~ui/styles/variables";
// as - App Switcher
@as-open-width: 160px;
@as-closed-width: 53px;
@app-icon-height: 38px;
@app-line-height: 24px;
@transition-time: .35s;
@transition-delay: .25s;
@app-links-wrapper-background: #3caed2;
@app-links-active-background: lighten(@app-links-wrapper-background, 7.5%);
@firstLinkColor: #E4BB51;
@secondLinkColor: #8AC336;
@thirdLinkColor: #59C6C5;
body { overflow-x: hidden; }
.app-links-wrapper {

17
src/ui/public/directives/saved_object_finder.js
View file

@ -48,6 +48,23 @@ module.directive('savedObjectFinder', function ($location, $injector, kbnUrl, Pr
filterResults();
/**
* Boolean that keeps track of whether hits are sorted ascending (true)
* or descending (false) by title
* @type {Boolean}
*/
self.isAscending = true;
/**
* Sorts saved object finder hits either ascending or descending
* @param {Array} hits Array of saved finder object hits
* @return {Array} Array sorted either ascending or descending
*/
self.sortHits = function (hits) {
self.isAscending = !self.isAscending;
self.hits = self.isAscending ? _.sortBy(hits, 'title') : _.sortBy(hits, 'title').reverse();
};
/**
* Passed the hit objects and will determine if the
* hit should have a url in the UI, returns it if so

1
src/ui/public/paginated_table/paginated_table.html
View file

@ -33,5 +33,4 @@
<!-- auto-inserted by the paginate directive... -->
<!-- <paginate-controls></paginate-controls> -->
<div class="pagination-container" ng-transclude></div>
</paginate>

71
src/ui/public/partials/saved_object_finder.html
View file

@ -1,26 +1,42 @@
<form role="form">
<div class="form-group finder-form">
<div class="finder-form-options">
<a class="small" ng-click="finder.manageObjects(finder.properties.name)">manage {{finder.properties.nouns}}</a>
<form role="form" class="form-inline">
<div class="container-fluid">
<div class="row">
<div class="input-group form-group finder-form col-md-7">
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span>
<input
input-focus
ng-model="filter"
ng-attr-placeholder="{{finder.properties.nouns}} Filter..."
ng-keydown="finder.filterKeyDown($event)"
class="form-control"
name="filter"
type="text"
autocomplete="off" />
</div>
<div class="finder-hit-count col-md-2">
<span>{{finder.hitCount}} of {{finder.hitCount}}</span>
</div>
<div class="finder-manage-object col-md-2">
<a class="small" ng-click="finder.manageObjects(finder.properties.name)">Manage {{finder.properties.nouns}}</a>
</div>
</div>
<div class="clearfix visible-xs-block"></div>
<input
input-focus
ng-model="filter"
ng-attr-placeholder="{{finder.properties.noun}} Filter"
ng-keydown="finder.filterKeyDown($event)"
class="form-control"
name="filter"
type="text"
autocomplete="off" />
<span class="finder-hit-count"><strong>{{finder.hitCount}}</strong> {{finder.hitCountNoun()}}</span>
</div>
</form>
<paginate list="finder.hits" per-page="{{perPage}}">
<ul
class="list-group list-group-menu"
ng-class="{'select-mode': finder.selector.enabled}">
<paginate list="finder.hits" per-page="20">
<ul class="li-striped list-group list-group-menu" ng-class="{'select-mode': finder.selector.enabled}">
<li class="list-group-item list-group-menu-item">
<span class="paginate-heading">
Name
<i
class="fa"
ng-click="finder.sortHits(finder.hits)"
ng-class="finder.isAscending ? 'fa-caret-up' : 'fa-caret-down'">
</i>
</span>
</li>
<li
class="list-group-item list-group-menu-item"
@ -29,19 +45,20 @@
ng-keydown="finder.hitKeyDown($event, page, paginate)"
ng-click="finder.onChoose(hit, $event)">
<a
ng-href="{{finder.makeUrl(hit)}}"
ng-blur="finder.hitBlur($event)"
ng-click="finder.preventClick($event)">
<i aria-hidden="true" class="fa" ng-if="hit.icon" ng-class="hit.icon"></i> {{hit.title}}
<p ng-if="hit.description" ng-bind="hit.description"></p>
<a ng-href="{{finder.makeUrl(hit)}}"
ng-blur="finder.hitBlur($event)"
ng-click="finder.preventClick($event)">
<i aria-hidden="true" class="finder-type fa" ng-if="hit.icon" ng-class="hit.icon"></i>
<span>{{hit.title}}</span>
<p ng-if="hit.description" ng-bind="hit.description"></p>
</a>
</li>
<li
class="list-group-item list-group-no-results"
ng-if="finder.hits.length === 0">
<p ng-bind="'No matching ' + finder.properties.nouns + ' found.'"></p>
</li>
</ul>
</paginate>

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

@ -289,28 +289,108 @@ table {
//== SavedObjectFinder
saved-object-finder {
.row {
background-color: @kibanaGray6;
padding: 10px;
display: flex;
flex-direction: row;
}
.form-group {
margin-bottom: 0;
float: left;
flex: 8;
input {
.border-bottom-radius(0);
border: none;
padding: 5px 0px;
border-radius: @border-radius-base;
text-transform: capitalize;
}
span {
padding: 5px 0px;
background-color: @white;
border: none;
i {
color: @kibanaGray3;
width: 15px;
}
}
.finder-hit-count, .finder-manage-object {
min-width: 80px;
padding: 5px;
}
.finder-hit-count {
flex: 1;
text-align: center;
span {
color: @kibanaGray3;
}
}
.finder-manage-object {
flex: 3;
text-align: left;
text-transform: capitalize;
}
}
.list-group-item {
a {
i {
color: @saved-object-finder-icon-color !important;
.list-group-item-menu:hover {
background-color: transparent;
}
ul.li-striped {
li {
border: none;
}
li:nth-child(odd) {
background-color: @kibanaGray6;
}
li:nth-child(even) {
background-color: @white;
}
.paginate-heading {
font-weight: normal;
color: @kibanaGray1;
}
.list-group-item {
padding: 8px 15px;
ul {
padding: 0;
display: flex;
flex-direction: row;
.finder-type {
margin-right: 10px;
}
}
color: @saved-object-finder-link-color !important;
}
a {
i {
color: @saved-object-finder-icon-color !important;
margin-right: 10px;
}
&:first-child {
.border-top-radius(0) !important;
}
color: @saved-object-finder-link-color !important;
}
&.list-group-no-results p {
margin-bottom: 0 !important;
&:first-child {
.border-top-radius(0) !important;
}
&.list-group-no-results p {
margin-bottom: 0 !important;
}
}
}
@ -324,13 +404,6 @@ saved-object-finder {
}
}
span.finder-hit-count {
position: absolute;
right: 10px;
top: 25px;
font-size: 0.85em;
}
.finder-options {
max-height: 300px;
overflow: auto;

1
src/ui/public/styles/dark-theme.less
View file

@ -581,4 +581,3 @@
}
}
}

2
src/ui/public/styles/list-group-menu.less
View file

@ -1,7 +1,7 @@
@import (reference) "~ui/styles/theme";
.list-group-menu {
&.select-mode a{
&.select-mode a {
outline: none;
color: @list-group-menu-item-select-color;
}

3
src/ui/public/styles/pagination.less
View file

@ -29,6 +29,9 @@ paginate {
a {
text-decoration: none;
background-color: @white;
margin-left: 2px;
padding: 8px 11px;
}
a:hover {

4
src/ui/public/styles/variables/bootstrap-mods.less vendored
View file

@ -10,8 +10,8 @@
//** Global textual link color.
@link-color: @brand-info;
@link-hover-color: lighten(@link-color, 10%);
@link-color: @kibanaBlue2;
@link-hover-color: @kibanaBlue1;
@link-hover-decoration: none;
//** Disabled cursor for form controls and buttons.

16
src/ui/public/styles/variables/for-theme.less
View file

@ -217,7 +217,7 @@
// Paginate ====================================================================
@paginate-page-link-active-color: @text-color;
@paginate-page-link-active-color: @kibanaGray2;
// Spinner =====================================================================
@ -319,3 +319,17 @@
// Saved Object Finder =========================================================
@saved-object-finder-link-color: @link-color;
@saved-object-finder-icon-color: darken(@saved-object-finder-link-color, 10%);
// App-switcher ================================================================
@as-open-width: 160px;
@as-closed-width: 53px;
@app-icon-height: 38px;
@app-line-height: 24px;
@transition-time: .35s;
@transition-delay: .25s;
@app-links-wrapper-background: #3caed2;
@app-links-active-background: lighten(@app-links-wrapper-background, 7.5%);
@firstLinkColor: #E4BB51;
@secondLinkColor: #8AC336;
@thirdLinkColor: #59C6C5;