apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

wip: testing new query editor row design

Browse Source
pull/14930/head
Torkel Ödegaard 7 years ago
parent 4bad76c0f4
commit 166e5edebd
4 changed files with 123 additions and 84 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 63
      public/app/features/dashboard/panel_editor/QueriesTab.tsx
  2. 44
      public/app/features/dashboard/panel_editor/QueryEditorRow.tsx
  3. 44
      public/app/features/panel/partials/query_editor_row.html
  4. 56
      public/sass/components/_query_editor.scss

63
public/app/features/dashboard/panel_editor/QueriesTab.tsx
Unescape 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
Unescape 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
Unescape 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
Unescape 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;
}

Write Preview
Loading…
Cancel
Save