From cc4564cf8b3932a5a8723b75ebaaa5bedae87232 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 17 Jan 2019 13:08:20 +0100 Subject: [PATCH] Query editor row in react is working --- .../dashboard/panel_editor/QueriesTab.tsx | 2 +- .../dashboard/panel_editor/QueryEditorRow.tsx | 24 +++++- public/app/features/panel/query_editor_row.ts | 78 ++----------------- public/sass/components/_panel_editor.scss | 1 + public/sass/components/_query_editor.scss | 36 +++++++-- 5 files changed, 56 insertions(+), 85 deletions(-) diff --git a/public/app/features/dashboard/panel_editor/QueriesTab.tsx b/public/app/features/dashboard/panel_editor/QueriesTab.tsx index a62da397d7f..e965b285967 100644 --- a/public/app/features/dashboard/panel_editor/QueriesTab.tsx +++ b/public/app/features/dashboard/panel_editor/QueriesTab.tsx @@ -189,7 +189,7 @@ export class QueriesTab extends PureComponent { return ( { const { datasource } = this.state; if (datasource.pluginExports.QueryCtrl) { + return
(this.element = element)} />; } - return
(this.element = element)} />; if (datasource.pluginExports.QueryEditor) { const QueryEditor = datasource.pluginExports.QueryEditor; @@ -128,7 +128,7 @@ export class QueryEditorRow extends PureComponent { angularScope.toggleEditorMode(); this.angularQueryEditor.digest(); } - } + }; get hasTextEditMode() { const { angularScope } = this.state; @@ -149,6 +149,16 @@ export class QueryEditorRow extends PureComponent { 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 { {inMixedMode && ({datasourceName})} {isDisabled && Disabled}
+
+ {isCollapsed &&
{this.renderCollapsedText()}
} +
{this.hasTextEditMode && ( - )} @@ -218,4 +235,5 @@ export interface AngularQueryComponentScope { moveQuery: (query: DataQuery, direction: number) => void; datasource: DataSourceApi; toggleEditorMode?: () => void; + getCollapsedText?: () => string; } diff --git a/public/app/features/panel/query_editor_row.ts b/public/app/features/panel/query_editor_row.ts index 82d93ca5cae..fa25ce832be 100644 --- a/public/app/features/panel/query_editor_row.ts +++ b/public/app/features/panel/query_editor_row.ts @@ -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); } } diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss index b2ab91ccb19..b791231a242 100644 --- a/public/sass/components/_panel_editor.scss +++ b/public/sass/components/_panel_editor.scss @@ -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; diff --git a/public/sass/components/_query_editor.scss b/public/sass/components/_query_editor.scss index 35abd34a770..8d72f901b6e 100644 --- a/public/sass/components/_query_editor.scss +++ b/public/sass/components/_query_editor.scss @@ -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;