maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

K7 Discover app cleanup (#30037)

Browse source 
Does some design cleanup in the discover application.
This commit is contained in:
dave.snider@gmail.com 2019-02-06 10:12:17 -08:00 committed by GitHub
parent a64ed95b84
commit 662a5abb9f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 157 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/legacy/core_plugins/kbn_doc_views/public/__tests__/doc_views.js
View file

@ -117,7 +117,7 @@ describe('docViews', function () {
describe('filtering', function () {
it('should apply a filter when clicking filterable fields', function () {
const cell = $elem.find('td[title="bytes"]').next();
const cell = $elem.find('td[title="bytes"]').prev();
cell.find('.fa-search-plus').first().click();
expect($scope.filter.calledOnce).to.be(true);
@ -128,7 +128,7 @@ describe('docViews', function () {
});
it('should NOT apply a filter when clicking non-filterable fields', function () {
const cell = $elem.find('td[title="area"]').next();
const cell = $elem.find('td[title="area"]').prev();
cell.find('.fa-search-plus').first().click();
expect($scope.filter.calledOnce).to.be(false);

18
src/legacy/core_plugins/kbn_doc_views/public/views/table.html
View file

@ -1,11 +1,6 @@
<table class="table table-condensed">
<tbody>
<tr ng-repeat="field in fields" data-test-subj="tableDocViewRow-{{ field }}">
<td field-name="field"
field-type="mapping[field].type"
width="1%"
class="kbnDocViewer__field">
</td>
<td width="1%" class="kbnDocViewer__buttons" ng-if="filter">
<span ng-if="mapping[field].filterable">
<button
@ -14,6 +9,7 @@
data-test-subj="addInclusiveFilterButton"
tooltip="{{ ::'kbnDocViews.table.filterForValueButtonTooltip' | i18n: { defaultMessage: 'Filter for value' } }}"
tooltip-append-to-body="1"
class="kbnDocViewer__actionButton"
>
<i
class="fa fa-search-plus"></i>
@ -24,6 +20,7 @@
ng-click="filter(mapping[field], flattened[field],'-')"
tooltip="{{ ::'kbnDocViews.table.filterOutValueButtonTooltip' | i18n: { defaultMessage: 'Filter out value' } }}"
tooltip-append-to-body="1"
class="kbnDocViewer__actionButton"
>
<i
class="fa fa-search-minus"></i>
@ -32,6 +29,7 @@
<span
ng-if="!mapping[field].filterable"
tooltip="{{ ::'kbnDocViews.table.unindexedFieldsCanNotBeSearchedTooltip' | i18n: { defaultMessage: 'Unindexed fields can not be searched' } }}"
class="kbnDocViewer__actionButton"
>
<i class="fa fa-search-plus text-muted"></i>
<i class="fa fa-search-minus text-muted"></i>
@ -43,6 +41,7 @@
ng-click="toggleColumn(field)"
tooltip-append-to-body="1"
tooltip="{{ ::'kbnDocViews.table.toggleColumnInTableButtonTooltip' | i18n: { defaultMessage: 'Toggle column in table' } }}"
class="kbnDocViewer__actionButton"
>
<i
class="fa fa-columns"
@ -55,6 +54,7 @@
ng-click="filter('_exists_', field, '+')"
tooltip="{{ ::'kbnDocViews.table.filterForFieldPresentButtonTooltip' | i18n: { defaultMessage: 'Filter for field present' } }}"
tooltip-append-to-body="1"
class="kbnDocViewer__actionButton"
>
<i
class="fa fa-asterisk"></i>
@ -63,17 +63,23 @@
<span
ng-if="indexPattern.metaFields.includes(field)"
tooltip="{{ ::'kbnDocViews.table.unableToFilterForPresenceOfMetaFieldsTooltip' | i18n: { defaultMessage: 'Unable to filter for presence of meta fields' } }}"
class="kbnDocViewer__actionButton"
>
<i class="fa fa-asterisk text-muted"></i>
</span>
<span
ng-if="mapping[field].scripted"
tooltip="{{ ::'kbnDocViews.table.unableToFilterForPresenceOfScriptedFieldsTooltip' | i18n: { defaultMessage: 'Unable to filter for presence of scripted fields' } }}"
class="kbnDocViewer__actionButton"
>
<i class="fa fa-asterisk text-muted"></i>
</span>
</td>
<td field-name="field"
field-type="mapping[field].type"
width="1%"
class="kbnDocViewer__field">
</td>
<td>
<i ng-if="!mapping[field] && field[0] === '_'"
tooltip-placement="top"

10
src/legacy/core_plugins/kibana/public/discover/_discover.scss
View file

@ -123,16 +123,14 @@ discover-app {
.dscFieldDetails {
padding: 10px;
background-color: shade($euiColorLightestShade, 5%);
color: shade($euiColorEmptyShade, 65%);
color: $euiTextColor;
}
// SASSTODO: replace the padding and margin values with variables
.dscFieldDetails__progress {
background-color: rgba(0, 0, 0, 0.8);
padding: 3px;
border-radius: $euiBorderRadius;
margin-left: 3px;
margin-right: 3px;
background-color: $euiColorEmptyShade;
color: $euiColorDarkShade;
padding: $euiSizeXS;
}
// SASSTODO: replace the margin-top value with a variable

1
src/legacy/core_plugins/kibana/public/discover/_hacks.scss
View file

@ -1,6 +1,7 @@
// SASSTODO: the classname is dinamically generated with ng-class
.tab-discover {
overflow: hidden;
background: $euiColorEmptyShade;
}
// SASSTODO: these are Angular Bootstrap classes. Will be replaced by EUI

4
src/legacy/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html
View file

@ -33,7 +33,7 @@
<div class="dscSidebar__listHeader sidebar-list-header" ng-if="fields.length">
<h3
class="sidebar-list-header-label"
class="euiFlexItem euiTitle euiTitle--xxsmall"
id="selected_fields"
tabindex="0"
i18n-id="kbn.discover.fieldChooser.filter.selectedFieldsTitle"
@ -54,7 +54,7 @@
<div class="sidebar-list-header sidebar-item euiFlexGroup euiFlexGroup--gutterMedium" ng-if="fields.length">
<h3
class="euiFlexItem sidebar-list-header-label"
class="euiFlexItem euiTitle euiTitle--xxsmall"
id="available_fields"
tabindex="0"
i18n-id="kbn.discover.fieldChooser.filter.availableFieldsTitle"

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

@ -93,7 +93,7 @@
<a
ng-href="{{field.details.visualizeUrl}}"
ng-show="field.visualizable"
class="kuiButton kuiButton--secondary kuiButton--small kuiButton--fullWidth kuiVerticalRhythmSmall"
class="kuiButton kuiButton--secondary kuiButton--small kuiVerticalRhythmSmall"
data-test-subj="fieldVisualize-{{::field.name}}"
>
<span

15
src/legacy/core_plugins/kibana/public/discover/index.html
View file

@ -88,14 +88,15 @@
ng-hide="fetchError"
class="dscOverlay"
>
<div class="euiTitle">
<h2
i18n-id="kbn.discover.searchingTitle"
i18n-default-message="Searching"
></h2>
</div>
<h2
i18n-id="kbn.discover.searchingTitle"
i18n-default-message="Searching"
class="euiTitle euiTitle--small"
></h2>
<div class="euiSpacer euiSpacer--m"></div>
<div ng-show="fetchStatus">{{fetchStatus.complete}}/{{fetchStatus.total}}</div>
<div class="euiLoadingSpinner euiLoadingSpinner--large"></div>
<div class="euiSpacer euiSpacer--m"></div>
<div ng-show="fetchStatus">{{fetchStatus.complete}} / {{fetchStatus.total}}</div>
</div>
</div>

2
src/ui/public/doc_table/components/table_row.js
View file

@ -61,7 +61,7 @@ module.directive('kbnTableRow', function ($compile, $httpParamSerializer, kbnUrl
onRemoveColumn: '=?',
},
link: function ($scope, $el) {
$el.after('<tr data-test-subj="docTableDetailsRow">');
$el.after('<tr data-test-subj="docTableDetailsRow" class="kbnDocTableDetails__row">');
$el.empty();
// when we compile the details, we use this $scope

4
src/ui/public/doc_table/components/table_row/_cell.scss
View file

@ -2,6 +2,10 @@
white-space: pre-wrap;
}
.kbnDocTableCell__toggleDetails {
padding: 4px 0 0 0!important;
}
.kbnDocTableCell__filter {
position: absolute;
white-space: nowrap;

18
src/ui/public/doc_table/components/table_row/_details.scss
View file

@ -5,3 +5,21 @@
float: right;
padding-top: $euiSizeS; /* 1 */
}
// Overwrite the border on the bootstrap table
.kbnDocTableDetails__row {
> td {
// Offsets negative margins from an inner flex group
padding: $euiSizeL !important;
tr:hover td {
background: tintOrShade($euiColorLightestShade, 50%, 20%);
}
}
td {
border-top: none !important;
}
}

54
src/ui/public/doc_table/components/table_row/details.html
View file

@ -1,20 +1,42 @@
<td colspan="{{ columns.length + 2 }}">
<div class="kbnDocTableDetails__actions">
<a
class="kuiButton kuiButton--small kuiButton--secondary"
data-test-subj="docTableRowAction"
ng-href="{{ getContextAppHref() }}"
ng-if="indexPattern.isTimeBased()"
i18n-id="common.ui.docTable.tableRow.viewSurroundingDocumentsLinkText"
i18n-default-message="View surrounding documents"
></a>
<a
class="kuiButton kuiButton--small kuiButton--secondary"
data-test-subj="docTableRowAction"
ng-href="#/doc/{{indexPattern.id}}/{{row._index}}/{{row._type}}/?id={{row._id | uriescape}}"
i18n-id="common.ui.docTable.tableRow.viewSingleDocumentLinkText"
i18n-default-message="View single document"
></a>
<div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--justifyContentSpaceBetween">
<div class="euiFlexItem euiFlexItem--flexGrowZero euiText euiText--small">
<div class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow">
<div class="euiFlexItem euiFlexItem--flexGrowZero">
<icon type="'folderOpen'" size="'m'"></icon>
</div>
<div class="euiFlexItem euiFlexItem--flexGrowZero">
<h4
class="euiTitle euiTitle--xsmall"
i18n-id="common.ui.docTable.tableRow.detailHeading"
i18n-default-message="Expanded document"
></h4>
</div>
</div>
</div>
<div class="euiFlexItem euiFlexItem--flexGrowZero euiText euiText--small">
<div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow">
<div class="euiFlexItem euiFlexItem--flexGrowZero euiText euiText--small">
<a
class="euiLink"
data-test-subj="docTableRowAction"
ng-href="{{ getContextAppHref() }}"
ng-if="indexPattern.isTimeBased()"
i18n-id="common.ui.docTable.tableRow.viewSurroundingDocumentsLinkText"
i18n-default-message="View surrounding documents"
></a>
</div>
<div class="euiFlexItem euiFlexItem--flexGrowZero euiText euiText--small">
<a
class="euiLink"
data-test-subj="docTableRowAction"
ng-href="#/doc/{{indexPattern.id}}/{{row._index}}/{{row._type}}/?id={{row._id | uriescape}}"
i18n-id="common.ui.docTable.tableRow.viewSingleDocumentLinkText"
i18n-default-message="View single document"
></a>
</div>
</div>
</div>
</div>
<doc-viewer
columns="columns"

10
src/ui/public/doc_table/components/table_row/open.html
View file

@ -1,12 +1,10 @@
<td ng-click="toggleRow()" data-test-subj="docTableExpandToggleColumn">
<td ng-click="toggleRow()" data-test-subj="docTableExpandToggleColumn" class="kbnDocTableCell__toggleDetails">
<button
class="kbnDocTableOpen__button"
class="euiButtonIcon euiButtonIcon--text"
aria-expanded="{{!!open}}"
aria-label="{{ ::'common.ui.docTable.tableRow.toggleRowDetailsButtonAriaLabel' | i18n: {defaultMessage: 'Toggle row details'} }}"
>
<span
class="kuiIcon"
ng-class="{ 'fa-caret-down': open, 'fa-caret-right': !open }"
></span>
<icon ng-if="open" type="'arrowDown'" size="'s'"></icon>
<icon ng-if="!open" type="'arrowRight'" size="'s'"></icon>
</button>
</td>

4
src/ui/public/doc_viewer/__tests__/doc_viewer.js
View file

@ -81,14 +81,14 @@ describe('docViewer', function () {
registerExtension();
registerExtension({ title: 'exampleView2' });
init();
expect($elem.find('.nav-tabs li').length).to.be(2);
expect($elem.find('.euiTabs button').length).to.be(2);
});
it('should activate the first view in order', function () {
registerExtension({ order: 2 });
registerExtension({ title: 'exampleView2' });
init();
expect($elem.find('.nav-tabs .active').text().trim()).to.be('exampleView2');
expect($elem.find('.euiTabs .euiTab-isSelected').text().trim()).to.be('exampleView2');
});
});
});

19
src/ui/public/doc_viewer/_doc_viewer.scss
View file

@ -5,6 +5,11 @@
word-break: break-all;
word-wrap: break-word;
white-space: pre-wrap;
color: $euiColorFullShade;
}
.dscFieldName {
color: $euiColorDarkShade;
}
td,
@ -15,6 +20,12 @@
tr:first-child td {
border-top-color: transparent;
}
tr:hover {
.kbnDocViewer__actionButton {
opacity: 1;
}
}
}
.kbnDocViewer__content {
@ -26,3 +37,11 @@
.kbnDocViewer__field {
white-space: nowrap;
}
.kbnDocViewer__actionButton {
opacity: 0;
&:focus {
opacity: 1;
}
}

17
src/ui/public/doc_viewer/doc_viewer.js
View file

@ -39,25 +39,26 @@ uiModules.get('kibana')
template: function ($el) {
const $viewer = $('<div class="kbnDocViewer">');
$el.append($viewer);
const $tabs = $('<ul class="nav nav-tabs" role="tablist">');
const $tabs = $('<div class="euiTabs euiTabs--small" role="tablist">');
const $content = $('<div class="kbnDocViewer__content" role="tabpanel">');
$viewer.append($tabs);
$viewer.append($content);
docViews.inOrder.forEach(view => {
const $tab = $(
`<li
`<button
ng-show="docViews['${view.name}'].shouldShow(hit)"
ng-class="{active: mode == '${view.name}'}"
class="euiTab"
ng-class="{'euiTab euiTab-isSelected': mode === '${view.name}', 'euiTab': true}"
role="tab"
aria-selected="{{mode === '${view.name}'}}"
ng-click="mode='${view.name}'"
>
<a
ng-click="mode='${view.name}'"
kbn-accessible-click
<span
class="euiTab__content"
>
${view.title}
</a>
</li>`
</span>
</button>`
);
$tabs.append($tab);
const $viewAttrs = `

2
src/ui/public/filter_bar/_global_filter_group.scss
View file

@ -9,7 +9,7 @@
// sass-lint:disable quotes
.globalFilterGroup__branch {
padding: $euiSize $euiSize $euiSizeS $euiSizeS;
padding: $euiSize $euiSize 0 $euiSizeS;
background-repeat: no-repeat;
background-position: right top;
background-image: url("data:image/svg+xml,%0A%3Csvg width='28px' height='28px' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='#{hexToRGB($euiColorLightShade)}'%3E%3Crect x='14' y='27' width='14' height='1'%3E%3C/rect%3E%3Crect x='0' y='0' width='1' height='14'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E");

46
src/ui/public/filter_bar/filter_bar.tsx
View file

@ -115,7 +115,7 @@ class FilterBarUI extends Component<Props, State> {
const newFilter = buildEmptyFilter(isPinned, index);
const button = (
<EuiButtonEmpty size="s" onClick={this.onOpenAddFilterPopover} data-test-subj="addFilter">
<EuiButtonEmpty size="xs" onClick={this.onOpenAddFilterPopover} data-test-subj="addFilter">
+{' '}
<FormattedMessage
id="common.ui.filterBar.addFilterButtonLabel"
@ -125,27 +125,29 @@ class FilterBarUI extends Component<Props, State> {
);
return (
<EuiPopover
id="addFilterPopover"
button={button}
isOpen={this.state.isAddFilterPopoverOpen}
closePopover={this.onCloseAddFilterPopover}
anchorPosition="downLeft"
withTitle
panelPaddingSize="none"
ownFocus={true}
>
<EuiFlexItem grow={false}>
<div style={{ width: 400 }}>
<FilterEditor
filter={newFilter}
indexPatterns={this.props.indexPatterns}
onSubmit={this.onAdd}
onCancel={this.onCloseAddFilterPopover}
/>
</div>
</EuiFlexItem>
</EuiPopover>
<EuiFlexItem grow={false}>
<EuiPopover
id="addFilterPopover"
button={button}
isOpen={this.state.isAddFilterPopoverOpen}
closePopover={this.onCloseAddFilterPopover}
anchorPosition="downLeft"
withTitle
panelPaddingSize="none"
ownFocus={true}
>
<EuiFlexItem grow={false}>
<div style={{ width: 400 }}>
<FilterEditor
filter={newFilter}
indexPatterns={this.props.indexPatterns}
onSubmit={this.onAdd}
onCancel={this.onCloseAddFilterPopover}
/>
</div>
</EuiFlexItem>
</EuiPopover>
</EuiFlexItem>
);
}

2
src/ui/public/filter_bar/filter_item.tsx
View file

@ -181,7 +181,7 @@ class FilterItemUI extends Component<Props, State> {
isOpen={this.state.isPopoverOpen}
closePopover={this.closePopover}
button={badge}
anchorPosition="downCenter"
anchorPosition="downLeft"
withTitle={true}
panelPaddingSize="none"
>

9
src/ui/public/styles/_legacy/components/_sidebar.scss
View file

@ -8,7 +8,7 @@
border-bottom-color: transparent;
.sidebar-well {
background-color: tint($euiColorPrimary, 90%);
background-color: lightOrDarkTheme(tint($euiColorPrimary, 90%), $euiColorLightShade);
}
.sidebar-list {
@ -94,7 +94,7 @@
padding: $euiSizeXS $euiSizeS;
display: flex;
justify-content: space-between;
background-color: shade($euiColorPrimary, 60%);
background-color: shadeOrTint($euiColorPrimary, 60%, 60%);
color: $euiColorEmptyShade;
line-height: $euiSizeL;
@ -110,8 +110,9 @@
}
}
.index-pattern-selection .ui-select-toggle {
border-radius: 0;
.index-pattern-selection {
padding: $euiSizeS;
padding-bottom: 0;
}
.index-pattern-selection .ui-select-choices {

2
src/ui/ui_render/views/ui_app.pug
View file

@ -30,7 +30,7 @@ block content
.kibanaWelcomeText {
font-size: 14px;
font-family: Sans-serif;
color: #343741;
color: #98A2B3;
animation: fadeIn 1s ease-in-out;
animation-fill-mode: forwards;
opacity: 0;