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 in react is working

Browse Source
This commit is contained in:
Torkel Ödegaard
2019-01-17 13:08:20 +01:00
parent 548708a8d3
commit cc4564cf8b
5 changed files with 56 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -110,8 +110,8 @@ export class QueryEditorRow extends PureComponent<Props, State> {
const { datasource } = this.state;
if (datasource.pluginExports.QueryCtrl) {
return <div ref={element => (this.element = element)} />;
}
return <div ref={element => (this.element = element)} />;
if (datasource.pluginExports.QueryEditor) {
const QueryEditor = datasource.pluginExports.QueryEditor;
@@ -128,7 +128,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
angularScope.toggleEditorMode();
this.angularQueryEditor.digest();
}
}
};
get hasTextEditMode() {
const { angularScope } = this.state;
@@ -149,6 +149,16 @@ export class QueryEditorRow extends PureComponent<Props, State> {
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<Props, State> {
{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-row__collapsed-text">
{isCollapsed && <div>{this.renderCollapsedText()}</div>}
</div>
<div className="query-editor-row__actions">
{this.hasTextEditMode && (
<button className="query-editor-row__action" onClick={this.onToggleEditMode} title="Toggle text edit mode">
<button
className="query-editor-row__action"
onClick={this.onToggleEditMode}
title="Toggle text edit mode"
>
<i className="fa fa-fw fa-pencil" />
</button>
)}
@@ -218,4 +235,5 @@ export interface AngularQueryComponentScope {
moveQuery: (query: DataQuery, direction: number) => void;
datasource: DataSourceApi;
toggleEditorMode?: () => void;
getCollapsedText?: () => string;
}