Inspector enhancements (#20452) (#20474)

* Rename trigger button to Inspect

* Change default page size to 20

* Change request description layout

* Fix functional tests

* Fix functional test

* Fix more functional tests
This commit is contained in:
Tim Roes 2018-07-05 10:52:05 +02:00 committed by GitHub
parent 941533eb25
commit 4cc9fc30a8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 48 additions and 50 deletions

View file

@ -108,6 +108,11 @@ class DataTableFormat extends Component {
render() {
const { columns, rows } = this.state;
const pagination = {
pageSizeOptions: [10, 20, 50],
initialPageSize: 20,
};
return (
<React.Fragment>
<EuiFlexGroup>
@ -127,7 +132,7 @@ class DataTableFormat extends Component {
columns={columns}
items={rows}
sorting={true}
pagination={true}
pagination={pagination}
compressed={true}
/>
</React.Fragment>

View file

@ -17,7 +17,6 @@
* under the License.
*/
export * from './req_details_description';
export * from './req_details_request';
export * from './req_details_response';
export * from './req_details_stats';

View file

@ -1,40 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import PropTypes from 'prop-types';
import {
EuiText,
} from '@elastic/eui';
function RequestDetailsDescription(props) {
return (
<EuiText className="requests-details__description">
{ props.request.description }
</EuiText>
);
}
RequestDetailsDescription.shouldShow = (request) => !!request.description;
RequestDetailsDescription.propTypes = {
request: PropTypes.object.isRequired,
};
export { RequestDetailsDescription };

View file

@ -25,14 +25,12 @@ import {
} from '@elastic/eui';
import {
RequestDetailsDescription,
RequestDetailsRequest,
RequestDetailsResponse,
RequestDetailsStats,
} from './details';
const DETAILS = [
{ name: 'Description', component: RequestDetailsDescription },
{ name: 'Statistics', component: RequestDetailsStats },
{ name: 'Request', component: RequestDetailsRequest },
{ name: 'Response', component: RequestDetailsResponse },

View file

@ -118,6 +118,12 @@ class RequestsViewComponent extends Component {
selectedRequest={this.state.request}
onRequestChanged={this.selectRequest}
/>
<EuiSpacer size="xs"/>
{ this.state.request && this.state.request.description &&
<EuiText size="xs">
<p>{this.state.request.description}</p>
</EuiText>
}
<EuiSpacer size="m" />
{ this.state.request &&
<RequestDetails

View file

@ -37,7 +37,7 @@ export function getInspectorPanelAction({ closeContextMenu, panelTitle }) {
return new DashboardPanelAction(
{
id: 'openInspector',
displayName: 'Inspector',
displayName: 'Inspect',
parentPanelId: 'mainMenu',
},
{

View file

@ -144,7 +144,7 @@ function VisEditor(
template: require('plugins/kibana/visualize/editor/panels/share.html'),
testId: 'visualizeShareButton',
}, {
key: 'inspector',
key: 'inspect',
description: 'Open Inspector for visualization',
testId: 'openInspectorButton',
disableButton() {

View file

@ -85,7 +85,17 @@ export default function ({ getService, getPageObjects }) {
['2015-09-20 18:00', '188'],
['2015-09-20 21:00', '31'],
['2015-09-21 00:00', '42'],
['2015-09-21 03:00', '202']
['2015-09-21 03:00', '202'],
['2015-09-21 06:00', '683'],
['2015-09-21 09:00', '1,361'],
['2015-09-21 12:00', '1,415'],
['2015-09-21 15:00', '707'],
['2015-09-21 18:00', '177'],
['2015-09-21 21:00', '27'],
['2015-09-22 00:00', '32'],
['2015-09-22 03:00', '175'],
['2015-09-22 06:00', '707'],
['2015-09-22 09:00', '1,408'],
];

View file

@ -178,7 +178,17 @@ export default function ({ getService, getPageObjects }) {
['-', '9v', '938', { 'lat': 31, 'lon': -96 }],
['-', '9q', '722', { 'lat': 36, 'lon': -120 }],
['-', '9w', '475', { 'lat': 36, 'lon': -107 }],
['-', 'cb', '457', { 'lat': 46, 'lon': -96 }]
['-', 'cb', '457', { 'lat': 46, 'lon': -96 }],
[ '-', 'c2', '453', { lat: 47, lon: -120 } ],
[ '-', '9x', '420', { lat: 41, lon: -107 } ],
[ '-', 'dq', '399', { lat: 37, lon: -78 } ],
[ '-', '9r', '396', { lat: 41, lon: -120 } ],
[ '-', '9t', '274', { lat: 32, lon: -107 } ],
[ '-', 'c8', '271', { lat: 47, lon: -107 } ],
[ '-', 'dh', '214', { lat: 26, lon: -82 } ],
[ '-', 'b6', '207', { lat: 60, lon: -162 } ],
[ '-', 'bd', '206', { lat: 59, lon: -153 } ],
[ '-', 'b7', '167', { lat: 64, lon: -163 } ],
];
await PageObjects.visualize.clickMapFitDataBounds();

View file

@ -97,6 +97,16 @@ export default function ({ getService, getPageObjects }) {
['2015-09-20 21:00', '31'],
['2015-09-21 00:00', '42'],
['2015-09-21 03:00', '202'],
[ '2015-09-21 06:00', '683' ],
[ '2015-09-21 09:00', '1,361' ],
[ '2015-09-21 12:00', '1,415' ],
[ '2015-09-21 15:00', '707' ],
[ '2015-09-21 18:00', '177' ],
[ '2015-09-21 21:00', '27' ],
[ '2015-09-22 00:00', '32' ],
[ '2015-09-22 03:00', '175' ],
[ '2015-09-22 06:00', '707' ],
[ '2015-09-22 09:00', '1,408' ],
];
await PageObjects.visualize.openInspector();

View file

@ -32,7 +32,7 @@ export default function ({ getService, loadTestFile }) {
await kibanaServer.uiSettings.replace({ 'dateFormat:tz': 'UTC', 'defaultIndex': 'logstash-*' });
});
loadTestFile(require.resolve('./_spy_panel'));
loadTestFile(require.resolve('./_inspector'));
loadTestFile(require.resolve('./_chart_types'));
loadTestFile(require.resolve('./_experimental_vis'));
loadTestFile(require.resolve('./_gauge_chart'));

View file

@ -363,7 +363,7 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
async setInspectorTablePageSize(size) {
const panel = await testSubjects.find('inspectorPanel');
await find.clickByButtonText('Rows per page: 10', panel);
await find.clickByButtonText('Rows per page: 20', panel);
await find.clickByButtonText(`${size} rows`, panel);
}