Restyling of data explorer
This commit is contained in:
parent
6ac463290e
commit
dad55e085b
|
@ -1,5 +1,6 @@
|
|||
export default Ember.Component.extend({
|
||||
classNameBindings: [':schema-table', 'open'],
|
||||
tagName: 'li',
|
||||
|
||||
open: Em.computed.alias('table.open'),
|
||||
|
||||
|
|
|
@ -47,7 +47,7 @@ export default Ember.Component.extend({
|
|||
tables.push({
|
||||
name: key,
|
||||
columns: schema[key],
|
||||
open: haveFilter
|
||||
open: false
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
|
|
@ -10,7 +10,7 @@ export default Ember.ArrayController.extend({
|
|||
showResults: false,
|
||||
loading: false,
|
||||
|
||||
explain: true,
|
||||
explain: false,
|
||||
|
||||
saveDisabled: Ember.computed.not('selectedItem.dirty'),
|
||||
runDisabled: Ember.computed.alias('selectedItem.dirty'),
|
||||
|
@ -42,6 +42,21 @@ export default Ember.ArrayController.extend({
|
|||
);
|
||||
}.property(),
|
||||
|
||||
save() {
|
||||
const self = this;
|
||||
this.set('loading', true);
|
||||
return this.get('selectedItem').save().then(function() {
|
||||
const query = self.get('selectedItem');
|
||||
query.markNotDirty();
|
||||
self.set('editName', false);
|
||||
}).catch(function(x) {
|
||||
popupAjaxError(x);
|
||||
throw x;
|
||||
}).finally(function() {
|
||||
self.set('loading', false);
|
||||
});
|
||||
},
|
||||
|
||||
actions: {
|
||||
dummy() {},
|
||||
|
||||
|
@ -70,6 +85,14 @@ export default Ember.ArrayController.extend({
|
|||
this.get('selectedItem').saveDefaults();
|
||||
},
|
||||
|
||||
save() {
|
||||
this.save();
|
||||
},
|
||||
|
||||
saverun() {
|
||||
this.save().then(() => this.send('run'));
|
||||
},
|
||||
|
||||
create() {
|
||||
const self = this;
|
||||
this.set('loading', true);
|
||||
|
@ -82,18 +105,6 @@ export default Ember.ArrayController.extend({
|
|||
});
|
||||
},
|
||||
|
||||
save() {
|
||||
const self = this;
|
||||
this.set('loading', true);
|
||||
this.get('selectedItem').save().then(function() {
|
||||
const query = self.get('selectedItem');
|
||||
query.markNotDirty();
|
||||
self.set('editName', false);
|
||||
}).catch(popupAjaxError).finally(function() {
|
||||
self.set('loading', false);
|
||||
});
|
||||
},
|
||||
|
||||
discard() {
|
||||
const self = this;
|
||||
this.set('loading', true);
|
||||
|
|
|
@ -1,36 +1,39 @@
|
|||
{{#if selectedItem}}
|
||||
<div class="pull-right">
|
||||
<span class="schema-title">
|
||||
{{i18n "explorer.schema.title"}}<br>
|
||||
{{{i18n "explorer.schema.type_help"}}}
|
||||
</span>
|
||||
<div class="schema">
|
||||
{{explorer-schema schema=schema}}
|
||||
</div>
|
||||
<div class="name">
|
||||
{{#if editName}}
|
||||
{{text-field value=selectedItem.name}}
|
||||
{{else}}
|
||||
<h2>{{selectedItem.name}}</h2>
|
||||
{{d-button action="editName" icon="pencil" class="no-text btn-small"}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="pull-left">
|
||||
<div class="name">
|
||||
{{#if editName}}
|
||||
{{text-field value=selectedItem.name}}
|
||||
{{else}}
|
||||
<h2>{{selectedItem.name}}</h2>
|
||||
{{d-button action="editName" icon="pencil" class="no-text btn-small"}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="desc">
|
||||
{{#if controller.editName}}
|
||||
{{textarea value=selectedItem.description}}
|
||||
{{else}}
|
||||
{{selectedItem.description}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="sql">
|
||||
{{textarea value=selectedItem.sql}}
|
||||
</div>
|
||||
<div class="desc">
|
||||
{{#if controller.editName}}
|
||||
{{textarea value=selectedItem.description}}
|
||||
{{else}}
|
||||
{{selectedItem.description}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="query-editor">
|
||||
<div class="editor-panel">
|
||||
<div class="sql">
|
||||
{{textarea value=selectedItem.sql class="grippie-target"}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<div class="schema grippie-target">
|
||||
{{explorer-schema schema=schema}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="grippie"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="clear"></div>
|
||||
<div class="pull-left">
|
||||
{{d-button action="save" label="explorer.save" disabled=saveDisabled}}
|
||||
{{d-button action="save" label="explorer.save" disabled=saveDisabled class="btn-primary"}}
|
||||
{{d-button action="download" label="explorer.export" disabled=runDisabled icon="download"}}
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
|
|
|
@ -47,7 +47,15 @@
|
|||
<div class="bool-options">
|
||||
<label>{{input type="checkbox" checked=explain name="explain"}} {{i18n "explorer.explain_label"}}</label>
|
||||
</div>
|
||||
{{d-button action="run" label="explorer.run" disabled=runDisabled}}
|
||||
{{#if runDisabled}}
|
||||
{{#if saveDisabled}}
|
||||
{{d-button label="explorer.run" disabled="true" class="btn-primary"}}
|
||||
{{else}}
|
||||
{{d-button action="saverun" label="explorer.saverun"}}
|
||||
{{/if}}
|
||||
{{else}}
|
||||
{{d-button action="run" label="explorer.run" disabled=runDisabled class="btn-primary"}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
|
|
@ -8,28 +8,26 @@
|
|||
</div>
|
||||
<div class="schema-table-cols">
|
||||
{{#if table.open}}
|
||||
<dl>
|
||||
{{#each table.columns as |col|}}
|
||||
<div class="schema-table-col">
|
||||
<div>
|
||||
<dt class="{{if col.sensitive "sensitive"}}" title="{{if col.sensitive (i18n "explorer.schema.sensitive")}}">
|
||||
{{#if col.sensitive}}
|
||||
<span class="schema-colname sensitive" title="{{i18n "explorer.schema.sensitive"}}">
|
||||
<i class="fa fa-warning"></i>
|
||||
{{col.column_name}}
|
||||
</span>
|
||||
{{else}}
|
||||
<span class="schema-colname" >
|
||||
{{col.column_name}}
|
||||
<i class="fa fa-warning"></i>
|
||||
{{/if}}
|
||||
{{col.column_name}}
|
||||
</dt>
|
||||
<dd>
|
||||
{{col.data_type}}
|
||||
{{#if col.notes}}
|
||||
<br>
|
||||
<span class="schema-typenotes">
|
||||
{{col.notes}}
|
||||
</span>
|
||||
{{/if}}
|
||||
<span class="schema-type">
|
||||
{{col.data_type}}
|
||||
|
||||
{{#if col.notes}}
|
||||
<span class="schema-typenotes">
|
||||
{{col.notes}}
|
||||
</span>
|
||||
{{/if}}
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
{{/each}}
|
||||
</dl>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
|
|
@ -1,7 +1,12 @@
|
|||
<span class="schema-title">
|
||||
{{i18n "explorer.schema.title"}} - {{{i18n "explorer.schema.type_help"}}}
|
||||
</span>
|
||||
{{text-field value=filter placeholderKey="explorer.schema.filter"}}
|
||||
{{conditional-loading-spinner condition=loading}}
|
||||
<div class="schema-container">
|
||||
{{#each tables as |table|}}
|
||||
{{explorer-schema-onetable table=table}}
|
||||
{{/each}}
|
||||
<ul>
|
||||
{{#each tables as |table|}}
|
||||
{{explorer-schema-onetable table=table}}
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
@ -2,6 +2,89 @@
|
|||
color: $danger;
|
||||
}
|
||||
|
||||
.query-editor {
|
||||
border: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
|
||||
margin-bottom: 15px;
|
||||
.editor-panel {
|
||||
float: left;
|
||||
width: 65%;
|
||||
|
||||
.sql textarea {
|
||||
padding: 4px;
|
||||
height: calc(400px - 8px - 2px);
|
||||
width: 100%;
|
||||
font-family: monospace;
|
||||
box-shadow: none;
|
||||
border: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
transition: initial;
|
||||
}
|
||||
}
|
||||
.right-panel {
|
||||
float: right;
|
||||
width: calc(35% - 10px);
|
||||
.schema {
|
||||
border-left: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
|
||||
height: 400px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
color: dark-light-diff($primary, $secondary, 20%, -20%);
|
||||
font-size: 11px;
|
||||
|
||||
.schema-table-name {
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
|
||||
padding-left: 5px;
|
||||
.fa {
|
||||
width: 6px;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
}
|
||||
dl {
|
||||
margin: 0;
|
||||
}
|
||||
dl > div > * {
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
dl > div {
|
||||
clear:both;
|
||||
}
|
||||
dt {
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
overflow-wrap: break-word;
|
||||
width: 110px;
|
||||
margin-left: 5px;
|
||||
&.sensitive {
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
dd {
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
width: 70px;
|
||||
color: $tertiary;
|
||||
margin: 0;
|
||||
padding-left: 7px;
|
||||
border-left: 1px dotted dark-light-diff($primary, $secondary, 80%, -20%);
|
||||
|
||||
.schema-typenotes {
|
||||
color: dark-light-diff($primary, $secondary, 50%, -20%);
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.grippie {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.query-edit {
|
||||
.name h2 {
|
||||
display: inline-block;
|
||||
|
@ -12,76 +95,19 @@
|
|||
&:not(.editing) .desc {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.sql textarea {
|
||||
width: 500px;
|
||||
height: 350px;
|
||||
font-family: monospace;
|
||||
border-color: $tertiary;
|
||||
}
|
||||
.clear { clear: both; }
|
||||
}
|
||||
|
||||
.schema {
|
||||
border: 1px solid black;
|
||||
overflow-y: scroll;
|
||||
> div {
|
||||
width: 306px;
|
||||
}
|
||||
max-height: 400px;
|
||||
.clear { clear: both; }
|
||||
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.schema-title {
|
||||
display: block;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
.schema input {
|
||||
padding: 4px;
|
||||
margin: 3px;
|
||||
width: calc(100% - 7px - 7px - 1px);
|
||||
}
|
||||
.schema .schema-table:first-child {
|
||||
border-top: 1px solid;
|
||||
}
|
||||
.schema-table-name {
|
||||
background: dark-light-diff($primary, $secondary, 80%, -20%);
|
||||
border-color: dark-light-diff($primary, $secondary, 60%, -20%);
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.schema-table-cols {
|
||||
|
||||
}
|
||||
.schema-table-col {
|
||||
background: $secondary;
|
||||
border-color: dark-light-diff($primary, $secondary, 60%, -20%);
|
||||
border-bottom: 1px solid;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.schema-colname {
|
||||
font-weight: bold;
|
||||
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
word-wrap: break-word;
|
||||
vertical-align: text-top;
|
||||
background: dark-light-diff($primary, $secondary, 98%, -20%);
|
||||
|
||||
&.sensitive {
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
.schema-type {
|
||||
display: inline-block;
|
||||
max-width: 140px;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
.schema-typenotes {
|
||||
color: dark-light-diff($primary, $secondary, 50%, -20%);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.query-params {
|
||||
border: 1px solid dark-light-diff($primary, $secondary, 60%, -20%);
|
||||
|
|
|
@ -32,14 +32,15 @@ en:
|
|||
title: "Database Schema"
|
||||
filter: "Search..."
|
||||
sensitive: "The contents of this column may contain particularly sensitive or private information."
|
||||
type_help: "<a href='http://www.postgresql.org/docs/9.3/static/datatype.html' target='_blank'>Types explanation</a>"
|
||||
type_help: "<a href='http://www.postgresql.org/docs/9.3/static/datatype.html#DATATYPE-TABLE' target='_blank'>Types</a>"
|
||||
export: "Export"
|
||||
save: "Save Changes"
|
||||
saverun: "Save Changes and Run Query"
|
||||
run: "Run Query"
|
||||
undo: "Revert"
|
||||
delete: "Delete"
|
||||
recover: "Undelete Query"
|
||||
download_json: "Save Query Results"
|
||||
download_json: "Download Results"
|
||||
run_time: "Query completed in {{value}} ms."
|
||||
column: "Column {{number}}"
|
||||
explain_label: "Include query plan?"
|
||||
|
|
Loading…
Reference in New Issue