Skip to content

Commit

Permalink
Improve Filter Editor UI (#12161)
Browse files Browse the repository at this point in the history 
* Use labels consistently in Filter Editor dropdown. Improve screen reader and keyboard accessibility.
* Convert 'Edit Query DSL' from button to toggle link.
* Add link to documentation.
  • Loading branch information
@cjcenizal
cjcenizal authored Jun 5, 2017
1 parent 27745f7 commit 7b7cf51
Show file tree
Hide file tree
Showing 5 changed files with 98 additions and 80 deletions.
3 changes: 2 additions & 1 deletion src/ui/public/documentation_links/documentation_links.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ export const documentationLinks = {
luceneExpressions: `${baseUrl}guide/en/elasticsearch/reference/${urlVersion}/modules-scripting-expression.html`
},
query: {
luceneQuerySyntax: `${baseUrl}guide/en/elasticsearch/reference/${urlVersion}/query-dsl-query-string-query.html#query-string-syntax`
luceneQuerySyntax: `${baseUrl}guide/en/elasticsearch/reference/${urlVersion}/query-dsl-query-string-query.html#query-string-syntax`,
queryDsl: `${baseUrl}guide/en/elasticsearch/reference/${urlVersion}/query-dsl.html`,
},
date: {
dateMath: `${baseUrl}guide/en/elasticsearch/reference/${urlVersion}/common-options.html#date-math`
Expand Down
1 change: 0 additions & 1 deletion src/ui/public/filter_bar/filter_bar.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@ filter-bar {

.ace_editor {
height: 175px;
margin: 15px 0;
}

.filter-edit-alias {
Expand Down
166 changes: 88 additions & 78 deletions src/ui/public/filter_editor/filter_editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,110 +6,120 @@
filter
</div>

<div
<button
class="kuiModalHeaderCloseButton kuiIcon fa-times"
ng-click="filterEditor.onCancel()"
></div>
aria-label="Close filter popover"
></button>
</div>

<div class="kuiModalBody">
<div ng-show="filterEditor.showQueryDslEditor()">
<filter-query-dsl-editor
filter="filterEditor.filter"
on-change="filterEditor.setQueryDsl(queryDsl)"
></filter-query-dsl-editor>
<div
ng-show="filterEditor.isEditingQueryDsl"
ng-click="filterEditor.isEditingQueryDsl = false"
>
<button class="kuiMenuButton kuiMenuButton--basic">
<span class="kuiMenuButton__icon kuiIcon fa-chevron-left"></span>
<span>Back</span>
</button>
</div>
</div>
<!-- Filter definition -->
<div class="kuiVerticalRhythm">
<div class="kuiVerticalRhythmSmall filterEditor__labelBar">
<label class="kuiLabel">
Filter
</label>

<div
class="kuiFieldGroup kuiVerticalRhythm kuiFieldGroup--alignTop"
ng-hide="filterEditor.showQueryDslEditor()"
>
<div class="kuiFieldGroupSection">
<filter-field-select
index-patterns="filterEditor.indexPatterns"
field="filterEditor.field"
on-select="filterEditor.onFieldSelect(field)"
></filter-field-select>
</div>
<div>
<a
class="kuiLink"
ng-click="filterEditor.isEditingQueryDsl = !filterEditor.isEditingQueryDsl"
kbn-accessible-click
>
<span ng-if="filterEditor.isEditingQueryDsl">
Search filter values
</span>

<div class="kuiFieldGroupSection">
<filter-operator-select
ng-if="filterEditor.field"
field="filterEditor.field"
operator="filterEditor.operator"
on-select="filterEditor.onOperatorSelect(operator)"
></filter-operator-select>
<span ng-if="!filterEditor.isEditingQueryDsl">
Edit Query DSL
</span>
</a>
</div>
</div>

<div class="kuiFieldGroupSection kuiFieldGroupSection--wide filterEditor__wideField">
<filter-params-editor
ng-if="filterEditor.field && filterEditor.operator"
field="filterEditor.field"
operator="filterEditor.operator"
params="filterEditor.params"
></filter-params-editor>
</div>
</div>
<!-- Filter dropdowns -->
<div
class="kuiFieldGroup kuiVerticalRhythmSmall kuiFieldGroup--alignTop"
ng-show="!filterEditor.showQueryDslEditor()"
>
<div class="kuiFieldGroupSection">
<filter-field-select
index-patterns="filterEditor.indexPatterns"
field="filterEditor.field"
on-select="filterEditor.onFieldSelect(field)"
></filter-field-select>
</div>

<div class="kuiHeaderBar kuiVerticalRhythm">
<div class="kuiHeaderBarSection">
<h2 class="kuiSubTitle">
Label
</h2>
<div class="kuiFieldGroupSection">
<filter-operator-select
ng-if="filterEditor.field"
field="filterEditor.field"
operator="filterEditor.operator"
on-select="filterEditor.onOperatorSelect(operator)"
></filter-operator-select>
</div>

<div class="kuiFieldGroupSection kuiFieldGroupSection--wide filterEditor__wideField">
<filter-params-editor
ng-if="filterEditor.field && filterEditor.operator"
field="filterEditor.field"
operator="filterEditor.operator"
params="filterEditor.params"
></filter-params-editor>
</div>
</div>
</div>

<div class="kuiFieldGroup kuiVerticalRhythm">
<div class="kuiFieldGroupSection">
<input
class="kuiTextInput"
placeholder="Optional"
type="text"
ng-model="filterEditor.alias"
/>
<!-- DSL editor -->
<div
class="kuiVerticalRhythmSmall"
ng-show="filterEditor.showQueryDslEditor()"
>
<filter-query-dsl-editor
class="kuiVerticalRhythmSmall"
filter="filterEditor.filter"
on-change="filterEditor.setQueryDsl(queryDsl)"
></filter-query-dsl-editor>

<p class="kuiText kuiVerticalRhythmSmall">
Filters are built using the <a class="kuiLink" target="_blank" ng-href="{{ filterEditor.docLinks.query.queryDsl }}">Elasticsearch Query DSL</a>.
</p>
</div>
</div>

<div
class="kuiHeaderBar kuiVerticalRhythm"
ng-hide="filterEditor.showQueryDslEditor()"
>
<div class="kuiHeaderBarSection">
<h2 class="kuiSubTitle">
More actions
</h2>
<!-- Label -->
<div class="kuiVerticalRhythm">
<div class="kuiVerticalRhythmSmall">
<label
class="kuiLabel"
for="filterEditorLabelInput"
>
Label
</label>
</div>
</div>

<div
class="kuiMenuButtonGroup kuiVerticalRhythm"
ng-hide="filterEditor.showQueryDslEditor()"
>
<button
class="kuiMenuButton kuiMenuButton--basic"
ng-click="filterEditor.isEditingQueryDsl = true"
>
<span>Edit the query DSL</span>
</button>
<input
class="kuiTextInput kuiVerticalRhythmSmall"
placeholder="Optional"
type="text"
ng-model="filterEditor.alias"
id="filterEditorLabelInput"
/>
</div>
</div>

<!-- Footer -->
<div class="kuiModalFooter kuiBar">
<div class="kuiBarSection" ng-hide="filterEditor.filter.meta.isNew">
<button
class="kuiButton kuiButton--danger"
ng-click="filterEditor.onDelete()"
aria-label="Delete filter"
>
<span class="fa fa-trash"></span>
<span
class="kuiIcon fa-trash"
aria-hidden="true"
></span>
</button>
</div>

Expand Down
2 changes: 2 additions & 0 deletions src/ui/public/filter_editor/filter_editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import _ from 'lodash';
import { uiModules } from 'ui/modules';
import { FILTER_OPERATOR_TYPES } from './lib/filter_operators';
import template from './filter_editor.html';
import { documentationLinks } from '../documentation_links/documentation_links';
import './filter_query_dsl_editor';
import './filter_field_select';
import './filter_operator_select';
Expand Down Expand Up @@ -35,6 +36,7 @@ module.directive('filterEditor', function ($timeout, indexPatterns) {
controller: function ($scope, $element) {
this.init = () => {
const { filter } = this;
this.docLinks = documentationLinks;
this.alias = filter.meta.alias;
this.isEditingQueryDsl = false;
this.queryDsl = getQueryDslFromFilter(filter);
Expand Down
6 changes: 6 additions & 0 deletions src/ui/public/filter_editor/filter_editor.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,12 @@
z-index: 101;
}

.filterEditor__labelBar {
display: flex;
align-items: center;
justify-content: space-between;
}

.filterEditor__wideField {
min-width: 0;
}
Expand Down

0 comments on commit 7b7cf51

Please sign in to comment.