Commit cc4564cf by Torkel Ödegaard

Query editor row in react is working

parent 548708a8
......@@ -189,7 +189,7 @@ export class QueriesTab extends PureComponent<Props, State> {
return (
<EditorTabBody
heading="Data Source"
heading="Queries to"
renderToolbar={this.renderToolbar}
toolbarItems={[queryInspector, dsHelp]}
setScrollTop={this.setScrollTop}
......
......@@ -110,8 +110,8 @@ export class QueryEditorRow extends PureComponent<Props, State> {
const { datasource } = this.state;
if (datasource.pluginExports.QueryCtrl) {
return <div ref={element => (this.element = element)} />;
}
return <div ref={element => (this.element = element)} />;
if (datasource.pluginExports.QueryEditor) {
const QueryEditor = datasource.pluginExports.QueryEditor;
......@@ -128,7 +128,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
angularScope.toggleEditorMode();
this.angularQueryEditor.digest();
}
}
};
get hasTextEditMode() {
const { angularScope } = this.state;
......@@ -149,6 +149,16 @@ export class QueryEditorRow extends PureComponent<Props, State> {
this.forceUpdate();
};
renderCollapsedText(): string | null {
const { angularScope } = this.state;
if (angularScope && angularScope.getCollapsedText) {
return angularScope.getCollapsedText();
}
return null;
}
render() {
const { query, datasourceName, inMixedMode } = this.props;
const { datasource, isCollapsed } = this.state;
......@@ -177,9 +187,16 @@ export class QueryEditorRow extends PureComponent<Props, State> {
{inMixedMode && <em className="query-editor-row__context-info"> ({datasourceName})</em>}
{isDisabled && <em className="query-editor-row__context-info"> Disabled</em>}
</div>
<div className="query-editor-row__collapsed-text">
{isCollapsed && <div>{this.renderCollapsedText()}</div>}
</div>
<div className="query-editor-row__actions">
{this.hasTextEditMode && (
<button className="query-editor-row__action" onClick={this.onToggleEditMode} title="Toggle text edit mode">
<button
className="query-editor-row__action"
onClick={this.onToggleEditMode}
title="Toggle text edit mode"
>
<i className="fa fa-fw fa-pencil" />
</button>
)}
......@@ -218,4 +235,5 @@ export interface AngularQueryComponentScope {
moveQuery: (query: DataQuery, direction: number) => void;
datasource: DataSourceApi;
toggleEditorMode?: () => void;
getCollapsedText?: () => string;
}
......@@ -3,94 +3,26 @@ import angular from 'angular';
const module = angular.module('grafana.directives');
export class QueryRowCtrl {
collapsedText: string;
canCollapse: boolean;
getCollapsedText: any;
target: any;
queryCtrl: any;
panelCtrl: any;
panel: any;
collapsed: any;
hideEditorRowActions: boolean;
hasTextEditMode: boolean;
constructor() {
this.panelCtrl = this.queryCtrl.panelCtrl;
this.target = this.queryCtrl.target;
this.panel = this.panelCtrl.panel;
this.hideEditorRowActions = this.panelCtrl.hideEditorRowActions;
if (this.hasTextEditMode) {
this.panelCtrl.toggleEditorMode = this.toggleEditorMode.bind(this);
// expose this function to react parent component
this.panelCtrl.toggleEditorMode = this.queryCtrl.toggleEditorMode.bind(this.queryCtrl);
}
if (!this.target.refId) {
this.target.refId = this.panel.getNextQueryLetter();
if (this.queryCtrl.getCollapsedText) {
// expose this function to react parent component
this.panelCtrl.getCollapsedText = this.queryCtrl.getCollapsedText.bind(this.queryCtrl);
}
this.toggleCollapse(true);
if (this.target.isNew) {
delete this.target.isNew;
this.toggleCollapse(false);
}
if (this.panel.targets.length < 4) {
this.collapsed = false;
}
}
toggleHideQuery() {
this.target.hide = !this.target.hide;
this.panelCtrl.refresh();
}
toggleCollapse(init) {
if (!this.canCollapse) {
return;
}
if (!this.panelCtrl.__collapsedQueryCache) {
this.panelCtrl.__collapsedQueryCache = {};
}
if (init) {
this.collapsed = this.panelCtrl.__collapsedQueryCache[this.target.refId] !== false;
} else {
this.collapsed = !this.collapsed;
this.panelCtrl.__collapsedQueryCache[this.target.refId] = this.collapsed;
}
try {
this.collapsedText = this.queryCtrl.getCollapsedText();
} catch (e) {
const err = e.message || e.toString();
this.collapsedText = 'Error: ' + err;
}
}
toggleEditorMode() {
if (this.canCollapse && this.collapsed) {
this.collapsed = false;
}
this.queryCtrl.toggleEditorMode();
}
removeQuery() {
if (this.panelCtrl.__collapsedQueryCache) {
delete this.panelCtrl.__collapsedQueryCache[this.target.refId];
}
this.panelCtrl.removeQuery(this.target);
}
duplicateQuery() {
const clone = angular.copy(this.target);
this.panelCtrl.addQuery(clone);
}
moveQuery(direction) {
this.panelCtrl.moveQuery(this.target, direction);
}
}
......
......@@ -35,6 +35,7 @@
flex-grow: 1;
background: $input-bg;
margin: 0 20px 0 84px;
width: calc(100% - 84px);
border-radius: 3px;
box-shadow: $panel-editor-shadow;
min-height: 0;
......
......@@ -200,6 +200,8 @@ input[type='text'].tight-form-func-param {
position: relative;
height: 35px;
background: $page-bg;
flex-wrap: nowrap;
align-items: center;
}
.query-editor-row__ref-id {
......@@ -217,8 +219,26 @@ input[type='text'].tight-form-func-param {
}
}
.query-editor-row__actions {
.query-editor-row__collapsed-text {
padding: 0 10px;
display: flex;
align-items: center;
flex-grow: 1;
overflow: hidden;
> div {
color: $text-muted;
font-style: italic;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: $font-size-sm;
min-width: 0;
}
}
.query-editor-row__actions {
flex-shrink: 0;
display: flex;
justify-content: flex-end;
color: $text-muted;
......@@ -235,14 +255,14 @@ input[type='text'].tight-form-func-param {
}
}
.query-editor-row__body {
margin: 0 0 10px 40px;
background: $page-bg;
.query-editor-row__body {
margin: 0 0 10px 40px;
background: $page-bg;
&--collapsed {
display: none;
}
}
&--collapsed {
display: none;
}
}
.query-editor-row__context-info {
font-style: italic;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment