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

wip: testing new query editor row design

Browse Source
This commit is contained in:
Torkel Ödegaard 2019-01-16 14:00:29 +01:00
parent 4bad76c0f4
commit 166e5edebd
4 changed files with 123 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -171,40 +171,39 @@ export class QueriesTab extends PureComponent<Props, State> {
return (
<EditorTabBody heading="Queries" renderToolbar={this.renderToolbar} toolbarItems={[queryInspector, dsHelp]}>
<>
<PanelOptionsGroup>
<div className="query-editor-rows">
{panel.targets.map((query, index) => (
<QueryEditorRow
datasourceName={query.datasource || panel.datasource}
key={query.refId}
panel={panel}
query={query}
onRemoveQuery={this.onRemoveQuery}
onAddQuery={this.onAddQuery}
onMoveQuery={this.onMoveQuery}
/>
))}
<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>
<div className="gf-form">
{!isAddingMixed && (
<button className="btn btn-secondary gf-form-btn" onClick={this.onAddQueryClick}>
Add Query
</button>
)}
{isAddingMixed && this.renderMixedPicker()}
</div>
<div className="query-editor-rows">
{panel.targets.map((query, index) => (
<QueryEditorRow
datasourceName={query.datasource || panel.datasource}
key={query.refId}
panel={panel}
query={query}
onRemoveQuery={this.onRemoveQuery}
onAddQuery={this.onAddQuery}
onMoveQuery={this.onMoveQuery}
/>
))}
</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>
<div className="gf-form">
{!isAddingMixed && (
<button className="btn btn-secondary gf-form-btn" onClick={this.onAddQueryClick}>
Add Query
</button>
)}
{isAddingMixed && this.renderMixedPicker()}
</div>
</div>
</PanelOptionsGroup>
</div>
<PanelOptionsGroup>
<QueryOptions panel={panel} datasource={currentDS} />
</PanelOptionsGroup>

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

@ -1,5 +1,6 @@
// Libraries
import React, { PureComponent } from 'react';
import classNames from 'classnames';
// Utils & Services
import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
@ -21,6 +22,7 @@ interface Props {
interface State {
datasource: DataSourceApi | null;
isCollapsed: boolean;
}
export class QueryEditorRow extends PureComponent<Props, State> {
@ -29,6 +31,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
state: State = {
datasource: null,
isCollapsed: false,
};
componentDidMount() {
@ -90,15 +93,51 @@ export class QueryEditorRow extends PureComponent<Props, State> {
}
}
onToggleCollapse = () => {
this.setState({ isCollapsed: !this.state.isCollapsed });
};
render() {
const { datasource } = this.state;
const { query } = this.props;
const { datasource, isCollapsed } = this.state;
const bodyClasses = classNames('query-editor-box__body gf-form-query', {hide: isCollapsed});
if (!datasource) {
return null;
}
if (datasource.pluginExports.QueryCtrl) {
return <div ref={element => (this.element = element)} />;
return (
<div className="query-editor-box">
<div className="query-editor-box__header">
<div className="query-editor-box__ref-id" onClick={this.onToggleCollapse}>
{isCollapsed && <i className="fa fa-caret-right" />}
{!isCollapsed && <i className="fa fa-caret-down" />}
<span>{query.refId}</span>
</div>
<div className="query-editor-box__actions">
<button className="query-editor-box__action">
<i className="fa fa-fw fa-arrow-down" />
</button>
<button className="query-editor-box__action">
<i className="fa fa-fw fa-arrow-up" />
</button>
<button className="query-editor-box__action">
<i className="fa fa-fw fa-copy" />
</button>
<button className="query-editor-box__action">
<i className="fa fa-fw fa-eye" />
</button>
<button className="query-editor-box__action">
<i className="fa fa-fw fa-trash" />
</button>
</div>
</div>
<div className={bodyClasses}>
<div ref={element => (this.element = element)} />
</div>
</div>
);
} else if (datasource.pluginExports.QueryEditor) {
const QueryEditor = datasource.pluginExports.QueryEditor;
return <QueryEditor />;
@ -119,4 +158,3 @@ export interface AngularQueryComponentScope {
moveQuery: (query: DataQuery, direction: number) => void;
datasource: DataSourceApi;
}

44
public/app/features/panel/partials/query_editor_row.html
View File

@ -1,44 +1,2 @@
<div class="gf-form-query">
<div ng-if="!ctrl.hideEditorRowActions" class="gf-form gf-form-query-letter-cell">
<label class="gf-form-label">
<a class="pointer" tabindex="1" ng-click="ctrl.toggleCollapse()">
<span ng-class="{muted: !ctrl.canCollapse}" class="gf-form-query-letter-cell-carret">
<i class="fa fa-caret-down" ng-hide="ctrl.collapsed"></i>
<i class="fa fa-caret-right" ng-show="ctrl.collapsed"></i>
</span>
<span class="gf-form-query-letter-cell-letter">{{ ctrl.target.refId }}</span>
<em class="gf-form-query-letter-cell-ds" ng-show="ctrl.target.datasource">({{ ctrl.target.datasource }})</em>
</a>
</label>
</div>
<div ng-transclude class="gf-form-query-content"></div>
<div class="gf-form-query-content gf-form-query-content--collapsed" ng-if="ctrl.collapsed">
<div class="gf-form">
<label class="gf-form-label pointer gf-form-label--grow" ng-click="ctrl.toggleCollapse()">
{{ ctrl.collapsedText }}
</label>
</div>
</div>
<div ng-transclude class="gf-form-query-content" ng-if="!ctrl.collapsed"></div>
<div ng-if="!ctrl.hideEditorRowActions" class="gf-form">
<label class="gf-form-label dropdown">
<a class="pointer dropdown-toggle" data-toggle="dropdown" tabindex="1"> <i class="fa fa-bars"></i> </a>
<ul class="dropdown-menu pull-right" role="menu">
<li role="menuitem" ng-if="ctrl.hasTextEditMode">
<a tabindex="1" ng-click="ctrl.toggleEditorMode()">Toggle Edit Mode</a>
</li>
<li role="menuitem"><a tabindex="1" ng-click="ctrl.duplicateQuery()">Duplicate</a></li>
<li role="menuitem"><a tabindex="1" ng-click="ctrl.moveQuery(-1)">Move up</a></li>
<li role="menuitem"><a tabindex="1" ng-click="ctrl.moveQuery(1)">Move down</a></li>
</ul>
</label>
<label class="gf-form-label">
<a ng-click="ctrl.toggleHideQuery()" role="menuitem"> <i class="fa fa-eye"></i> </a>
</label>
<label class="gf-form-label">
<a class="pointer" tabindex="1" ng-click="ctrl.removeQuery(ctrl.target)"> <i class="fa fa-trash"></i> </a>
</label>
</div>
</div>

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

@ -18,12 +18,6 @@
}
.gf-form-query {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: flex-start;
align-items: flex-start;
.gf-form,
.gf-form-filler {
margin-bottom: 2px;
@ -188,3 +182,53 @@ input[type='text'].tight-form-func-param {
.rst-literal-block .rst-text {
display: block;
}
.query-editor-box {
background: $page-bg;
margin-bottom: 2px;
&:hover {
.query-editor-box__actions {
display: flex;
}
}
}
.query-editor-box__header {
display: flex;
padding: 4px 0px 4px 8px;
position: relative;
height: 35px;
}
.query-editor-box__ref-id {
font-weight: $font-weight-semi-bold;
color: $blue;
font-size: $font-size-md;
flex-grow: 1;
cursor: pointer;
display: flex;
align-items: center;
i {
padding-right: 5px;
color: $text-muted;
position: relative;
}
}
.query-editor-box__actions {
display: flex;
justify-content: flex-end;
display: none;
}
.query-editor-box__action {
@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
border: 1px solid $navbar-button-border;
margin-right: 3px;
}
.query-editor-box__body {
padding: 10px 20px;
}