From bc956057c34f660765255247ecc8d361ccc35ed7 Mon Sep 17 00:00:00 2001 From: Torkel Ödegaard <torkel@grafana.com> Date: Thu, 17 Jan 2019 10:26:08 +0100 Subject: [PATCH] Query editor row react progress, buttons working --- public/app/features/dashboard/panel_editor/QueriesTab.tsx | 16 +++++++--------- public/app/features/dashboard/panel_editor/QueryEditorRow.tsx | 61 ++++++++++++++++++++++++++++++++++++++++++------------------- public/sass/components/_query_editor.scss | 39 ++++++++++++++++++++++++++------------- 3 files changed, 75 insertions(+), 41 deletions(-) diff --git a/public/app/features/dashboard/panel_editor/QueriesTab.tsx b/public/app/features/dashboard/panel_editor/QueriesTab.tsx index b1d2bd7..d6c05e1 100644 --- a/public/app/features/dashboard/panel_editor/QueriesTab.tsx +++ b/public/app/features/dashboard/panel_editor/QueriesTab.tsx @@ -181,18 +181,16 @@ export class QueriesTab extends PureComponent<Props, State> { onRemoveQuery={this.onRemoveQuery} onAddQuery={this.onAddQuery} onMoveQuery={this.onMoveQuery} + inMixedMode={currentDS.meta.mixed} /> ))} </div> - <div> - <div className="gf-form-query"> - <div className="gf-form gf-form-query-letter-cell"> - <label className="gf-form-label"> - <span className="gf-form-query-letter-cell-carret muted"> - <i className="fa fa-caret-down" /> - </span>{' '} - <span className="gf-form-query-letter-cell-letter">{panel.getNextQueryLetter()}</span> - </label> + <div className="query-editor-box"> + <div className="query-editor-row__header"> + <div className="query-editor-row__ref-id"> + <i className="fa fa-caret-down" /> + {' '} + <span>{panel.getNextQueryLetter()}</span> </div> <div className="gf-form"> {!isAddingMixed && ( diff --git a/public/app/features/dashboard/panel_editor/QueryEditorRow.tsx b/public/app/features/dashboard/panel_editor/QueryEditorRow.tsx index a7724ee..1000329 100644 --- a/public/app/features/dashboard/panel_editor/QueryEditorRow.tsx +++ b/public/app/features/dashboard/panel_editor/QueryEditorRow.tsx @@ -1,6 +1,7 @@ // Libraries import React, { PureComponent } from 'react'; import classNames from 'classnames'; +import _ from 'lodash'; // Utils & Services import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; @@ -18,6 +19,7 @@ interface Props { onRemoveQuery: (query: DataQuery) => void; onMoveQuery: (query: DataQuery, direction: number) => void; datasourceName: string | null; + inMixedMode: boolean; } interface State { @@ -133,47 +135,68 @@ export class QueryEditorRow extends PureComponent<Props, State> { return angularScope && angularScope.toggleEditorMode; } + onRemoveQuery = () => { + this.props.onRemoveQuery(this.props.query); + }; + + onCopyQuery = () => { + const copy = _.cloneDeep(this.props.query); + this.props.onAddQuery(copy); + }; + + onDisableQuery = () => { + this.props.query.hide = !this.props.query.hide; + this.forceUpdate(); + }; + render() { - const { query } = this.props; - const { datasource, isCollapsed, angularScope } = this.state; - const bodyClasses = classNames('query-editor-box__body gf-form-query', { hide: isCollapsed }); + const { query, datasourceName, inMixedMode } = this.props; + const { datasource, isCollapsed } = this.state; + const isDisabled = query.hide; + + const bodyClasses = classNames('query-editor-row__body gf-form-query', { + 'query-editor-row__body--collapsed': isCollapsed, + }); + + const rowClasses = classNames('query-editor-row', { + 'query-editor-row--disabled': isDisabled, + 'gf-form-disabled': isDisabled, + }); if (!datasource) { return null; } - console.log('Query render'); - if (angularScope !== null && angularScope.toggleEditorMode) { - console.log('Query editor has text edit mode'); - } - return ( - <div className="query-editor-box"> - <div className="query-editor-box__header"> - <div className="query-editor-box__ref-id" onClick={this.onToggleCollapse}> + <div className={rowClasses}> + <div className="query-editor-row__header"> + <div className="query-editor-row__ref-id" onClick={this.onToggleCollapse}> {isCollapsed && <i className="fa fa-caret-right" />} {!isCollapsed && <i className="fa fa-caret-down" />} <span>{query.refId}</span> + {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-box__actions"> + <div className="query-editor-row__actions"> {this.hasTextEditMode && ( - <button className="query-editor-box__action" onClick={this.onToggleEditMode}> + <button className="query-editor-row__action" onClick={this.onToggleEditMode} title="Toggle text edit mode"> <i className="fa fa-fw fa-pencil" /> </button> )} - <button className="query-editor-box__action"> + <button className="query-editor-row__action" onClick={() => this.props.onMoveQuery(query, 1)}> <i className="fa fa-fw fa-arrow-down" /> </button> - <button className="query-editor-box__action"> + <button className="query-editor-row__action" onClick={() => this.props.onMoveQuery(query, -1)}> <i className="fa fa-fw fa-arrow-up" /> </button> - <button className="query-editor-box__action"> + <button className="query-editor-row__action" onClick={this.onCopyQuery} title="Duplicate query"> <i className="fa fa-fw fa-copy" /> </button> - <button className="query-editor-box__action"> - <i className="fa fa-fw fa-eye" /> + <button className="query-editor-row__action" onClick={this.onDisableQuery} title="Disable/enable query"> + {isDisabled && <i className="fa fa-fw fa-eye-slash" />} + {!isDisabled && <i className="fa fa-fw fa-eye" />} </button> - <button className="query-editor-box__action"> + <button className="query-editor-row__action" onClick={this.onRemoveQuery} title="Remove query"> <i className="fa fa-fw fa-trash" /> </button> </div> diff --git a/public/sass/components/_query_editor.scss b/public/sass/components/_query_editor.scss index 7e8edde..35abd34 100644 --- a/public/sass/components/_query_editor.scss +++ b/public/sass/components/_query_editor.scss @@ -3,12 +3,6 @@ color: $blue; } -.gf-form-disabled { - .query-keyword { - color: darken($blue, 20%); - } -} - .query-segment-operator { color: $orange; } @@ -183,17 +177,24 @@ input[type='text'].tight-form-func-param { display: block; } -.query-editor-box { +.query-editor-row { margin-bottom: 2px; &:hover { - .query-editor-box__actions { + .query-editor-row__actions { display: flex; } } + + &--disabled { + .query-keyword { + color: darken($blue, 20%); + } + } + } -.query-editor-box__header { +.query-editor-row__header { display: flex; padding: 4px 0px 4px 8px; position: relative; @@ -201,7 +202,7 @@ input[type='text'].tight-form-func-param { background: $page-bg; } -.query-editor-box__ref-id { +.query-editor-row__ref-id { font-weight: $font-weight-semi-bold; color: $blue; font-size: $font-size-md; @@ -216,14 +217,14 @@ input[type='text'].tight-form-func-param { } } -.query-editor-box__actions { +.query-editor-row__actions { flex-grow: 1; display: flex; justify-content: flex-end; color: $text-muted; } -.query-editor-box__action { +.query-editor-row__action { margin-left: 3px; background: transparent; border: none; @@ -234,7 +235,19 @@ input[type='text'].tight-form-func-param { } } - .query-editor-box__body { + .query-editor-row__body { margin: 0 0 10px 40px; background: $page-bg; + + &--collapsed { + display: none; + } } + +.query-editor-row__context-info { + font-style: italic; + font-size: $font-size-sm; + color: $text-muted; + padding-left: 10px; +} + -- libgit2 0.26.0