IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Query editor row react progress, buttons working

Browse Source
This commit is contained in:
Torkel Ödegaard 2019-01-17 10:26:08 +01:00
parent 6a66d462aa
commit bc956057c3
3 changed files with 75 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/app/features/dashboard/panel_editor/QueriesTab.tsx
View File

@ -181,18 +181,16 @@ export class QueriesTab extends PureComponent<Props, State> {
onRemoveQuery={this.onRemoveQuery} onRemoveQuery={this.onRemoveQuery}
onAddQuery={this.onAddQuery} onAddQuery={this.onAddQuery}
onMoveQuery={this.onMoveQuery} onMoveQuery={this.onMoveQuery}
inMixedMode={currentDS.meta.mixed}
/> />
))} ))}
</div> </div>
<div> <div className="query-editor-box">
<div className="gf-form-query"> <div className="query-editor-row__header">
<div className="gf-form gf-form-query-letter-cell"> <div className="query-editor-row__ref-id">
<label className="gf-form-label"> <i className="fa fa-caret-down" />
<span className="gf-form-query-letter-cell-carret muted"> {' '}
<i className="fa fa-caret-down" /> <span>{panel.getNextQueryLetter()}</span>
</span>{' '}
<span className="gf-form-query-letter-cell-letter">{panel.getNextQueryLetter()}</span>
</label>
</div> </div>
<div className="gf-form"> <div className="gf-form">
{!isAddingMixed && ( {!isAddingMixed && (

61
public/app/features/dashboard/panel_editor/QueryEditorRow.tsx
View File

@ -1,6 +1,7 @@
// Libraries // Libraries
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import _ from 'lodash';
// Utils & Services // Utils & Services
import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
@ -18,6 +19,7 @@ interface Props {
onRemoveQuery: (query: DataQuery) => void; onRemoveQuery: (query: DataQuery) => void;
onMoveQuery: (query: DataQuery, direction: number) => void; onMoveQuery: (query: DataQuery, direction: number) => void;
datasourceName: string | null; datasourceName: string | null;
inMixedMode: boolean;
} }
interface State { interface State {
@ -133,47 +135,68 @@ export class QueryEditorRow extends PureComponent<Props, State> {
return angularScope && angularScope.toggleEditorMode; 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() { render() {
const { query } = this.props; const { query, datasourceName, inMixedMode } = this.props;
const { datasource, isCollapsed, angularScope } = this.state; const { datasource, isCollapsed } = this.state;
const bodyClasses = classNames('query-editor-box__body gf-form-query', { hide: isCollapsed }); 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) { if (!datasource) {
return null; return null;
} }
console.log('Query render');
if (angularScope !== null && angularScope.toggleEditorMode) {
console.log('Query editor has text edit mode');
}
return ( return (
<div className="query-editor-box"> <div className={rowClasses}>
<div className="query-editor-box__header"> <div className="query-editor-row__header">
<div className="query-editor-box__ref-id" onClick={this.onToggleCollapse}> <div className="query-editor-row__ref-id" onClick={this.onToggleCollapse}>
{isCollapsed && <i className="fa fa-caret-right" />} {isCollapsed && <i className="fa fa-caret-right" />}
{!isCollapsed && <i className="fa fa-caret-down" />} {!isCollapsed && <i className="fa fa-caret-down" />}
<span>{query.refId}</span> <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>
<div className="query-editor-box__actions"> <div className="query-editor-row__actions">
{this.hasTextEditMode && ( {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" /> <i className="fa fa-fw fa-pencil" />
</button> </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" /> <i className="fa fa-fw fa-arrow-down" />
</button> </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" /> <i className="fa fa-fw fa-arrow-up" />
</button> </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" /> <i className="fa fa-fw fa-copy" />
</button> </button>
<button className="query-editor-box__action"> <button className="query-editor-row__action" onClick={this.onDisableQuery} title="Disable/enable query">
<i className="fa fa-fw fa-eye" /> {isDisabled && <i className="fa fa-fw fa-eye-slash" />}
{!isDisabled && <i className="fa fa-fw fa-eye" />}
</button> </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" /> <i className="fa fa-fw fa-trash" />
</button> </button>
</div> </div>

39
public/sass/components/_query_editor.scss
View File

@ -3,12 +3,6 @@
color: $blue; color: $blue;
} }
.gf-form-disabled {
.query-keyword {
color: darken($blue, 20%);
}
}
.query-segment-operator { .query-segment-operator {
color: $orange; color: $orange;
} }
@ -183,17 +177,24 @@ input[type='text'].tight-form-func-param {
display: block; display: block;
} }
.query-editor-box { .query-editor-row {
margin-bottom: 2px; margin-bottom: 2px;
&:hover { &:hover {
.query-editor-box__actions { .query-editor-row__actions {
display: flex; display: flex;
} }
} }
&--disabled {
.query-keyword {
color: darken($blue, 20%);
}
}
} }
.query-editor-box__header { .query-editor-row__header {
display: flex; display: flex;
padding: 4px 0px 4px 8px; padding: 4px 0px 4px 8px;
position: relative; position: relative;
@ -201,7 +202,7 @@ input[type='text'].tight-form-func-param {
background: $page-bg; background: $page-bg;
} }
.query-editor-box__ref-id { .query-editor-row__ref-id {
font-weight: $font-weight-semi-bold; font-weight: $font-weight-semi-bold;
color: $blue; color: $blue;
font-size: $font-size-md; 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; flex-grow: 1;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
color: $text-muted; color: $text-muted;
} }
.query-editor-box__action { .query-editor-row__action {
margin-left: 3px; margin-left: 3px;
background: transparent; background: transparent;
border: none; 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; margin: 0 0 10px 40px;
background: $page-bg; 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;
}