IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2024-11-22 08:46:39 -06:00
Code Issues Packages Projects Releases Wiki Activity

Improve the history UI.

Browse Source
This commit is contained in:
Matthew Kleiman 2017-07-20 20:50:37 +01:00 committed by Dave Page
parent 21bfcd83f4
commit e29cd8d83d
5 changed files with 93 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/pgadmin/feature_tests/query_tool_journey_test.py
View File

@ -78,6 +78,10 @@ class QueryToolJourneyTest(BaseFeatureTest):
self.page.click_tab("History")
selected_history_entry = self.page.find_by_css_selector("#query_list .selected")
self.assertIn("SELECT * FROM shoes", selected_history_entry.text)
failed_history_detail_pane = self.page.find_by_id("query_detail")
self.assertIn("Error Message relation \"shoes\" does not exist", failed_history_detail_pane.text)
ActionChains(self.page.driver) \
.send_keys(Keys.ARROW_DOWN) \
.perform()

30
web/pgadmin/static/jsx/history/detail/history_error_message.jsx Normal file
View File

@ -0,0 +1,30 @@
//////////////////////////////////////////////////////////////////////////
//
// pgAdmin 4 - PostgreSQL Tools
//
// Copyright (C) 2013 - 2017, The pgAdmin Development Team
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////////////////
import React from 'react';
import Shapes from '../../react_shapes';
export default class HistoryErrorMessage extends React.Component {
parseErrorMessage(message) {
return message.match(/ERROR:\s*([^\n\r]*)/i)[1];
}
render() {
return (
<div className='history-error-text'>
<span>Error Message</span> {this.parseErrorMessage(this.props.historyEntry.message)}
</div>);
}
}
HistoryErrorMessage.propTypes = {
historyEntry: Shapes.historyDetail,
};

9
web/pgadmin/static/jsx/history/query_history_detail.jsx
View File

@ -11,14 +11,23 @@ import React from 'react';
import HistoryDetailMetadata from './detail/history_detail_metadata';
import HistoryDetailQuery from './detail/history_detail_query';
import HistoryDetailMessage from './detail/history_detail_message';
import HistoryErrorMessage from './detail/history_error_message';
import Shapes from '../react_shapes';
export default class QueryHistoryDetail extends React.Component {
render() {
if (!_.isUndefined(this.props.historyEntry)) {
let historyErrorMessage = null;
if (!this.props.historyEntry.status) {
historyErrorMessage = <div className='error-message-block'>
<HistoryErrorMessage {...this.props} />
</div>;
}
return (
<div id='query_detail' className='query-detail'>
{historyErrorMessage}
<div className='metadata-block'>
<HistoryDetailMetadata {...this.props} />
</div>

26
web/pgadmin/static/scss/sqleditor/_history.scss
View File

@ -62,19 +62,37 @@
.query-detail {
width: 100%;
padding-top: 10px;
display: flex;
flex-direction: column;
.error-message-block {
@extend .bg-red-1;
flex: 0.3;
padding-left: 20px;
.history-error-text {
@extend .text-12;
padding: 7px 0;
span {
@extend .font-red-3;
font-weight: 500;
margin-right: 8px;
}
}
}
.metadata-block {
flex: 1;
padding: 0 10px;
flex: 0.4;
padding: 10px 20px;
.metadata {
display: flex;
flex-wrap: wrap;
.item {
flex: 1;
min-width: 130px;
.value {
@extend .text-14;
@ -106,7 +124,7 @@
.message-block {
flex: 2;
display: flex;
padding-left: 10px;
padding: 0 20px;
.message {
flex: 2 2 0%;

37
web/regression/javascript/history/query_history_spec.jsx
View File

@ -49,6 +49,7 @@ describe('QueryHistory', () => {
expect(foundChildren.length).toBe(0);
done();
});
it('nothing is displayed on right panel', (done) => {
let foundChildren = historyWrapper.find(QueryHistoryDetail);
expect(foundChildren.length).toBe(1);
@ -68,7 +69,7 @@ describe('QueryHistory', () => {
status: true,
row_affected: 12345,
total_time: '14 msec',
message: 'message from first sql query',
message: 'something important ERROR: message from first sql query',
}, {
query: 'second sql statement',
start_time: new Date(2016, 11, 11, 1, 33, 5, 99),
@ -191,27 +192,41 @@ describe('QueryHistory', () => {
done();
}, 1000);
});
describe('when the query failed', () => {
let failedEntry;
beforeEach(() => {
failedEntry = foundChildren.at(1);
failedEntry.simulate('click');
});
it('displays the error message on top of the details pane', () => {
expect(queryDetail.at(0).text()).toContain('Error Message message from second sql query');
});
});
});
describe('when the older query is clicked on', () => {
let firstEntry, secondEntry;
beforeEach(() => {
foundChildren.at(1).simulate('click');
firstEntry = foundChildren.at(0);
secondEntry = foundChildren.at(1);
secondEntry.simulate('click');
});
it('displays the query in the right pane', () => {
expect(queryDetail.at(0).text()).toContain('second sql statement');
});
it('renders the most recent query as selected in the left pane', () => {
expect(foundChildren.at(0).nodes.length).toBe(1);
expect(foundChildren.at(0).hasClass('selected')).toBeFalsy();
expect(foundChildren.at(0).hasClass('error')).toBeFalsy();
it('deselects the first history entry', () => {
expect(firstEntry.nodes.length).toBe(1);
expect(firstEntry.hasClass('selected')).toBeFalsy();
});
it('renders the older query as selected in the left pane', () => {
expect(foundChildren.at(1).nodes.length).toBe(1);
expect(foundChildren.at(1).hasClass('selected')).toBeTruthy();
expect(foundChildren.at(1).hasClass('error')).toBeTruthy();
it('selects the second history entry', () => {
expect(secondEntry.nodes.length).toBe(1);
expect(secondEntry.hasClass('selected')).toBeTruthy();
});
});
@ -223,7 +238,7 @@ describe('QueryHistory', () => {
status: false,
row_affected: 5,
total_time: '26 msec',
message: 'third sql message',
message: 'pretext ERROR: third sql message',
});
foundChildren = historyWrapper.find(QueryHistoryEntry);