opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-02 09:21:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

add project and help component

Browse Source
This commit is contained in:
Erik Sundell
2018-12-20 16:55:02 +01:00
parent 06f771afd3
commit e2ed163779
4 changed files with 129 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
public/app/plugins/datasource/stackdriver/components/Help.tsx Normal file
View File

@ -0,0 +1,59 @@
import React from 'react';
import { Project } from './Project';
export interface Props {
datasource: any;
}
interface State {
displayHelp: boolean;
displaRawQuery: boolean;
}
export class Help extends React.Component<Props, State> {
state: State = {
displayHelp: false,
displaRawQuery: false,
};
handleHelpClicked() {
this.setState({ displayHelp: !this.state.displayHelp });
}
handleRawQueryClicked() {
this.setState({ displayHelp: !this.state.displayHelp });
}
render() {
const { displayHelp, displaRawQuery } = this.state;
const { datasource } = this.props;
return (
<div className="gf-form-inline">
<Project datasource={datasource} />
{/* {displayHelp && ( */}
<div className="gf-form" ng-show="ctrl.lastQueryMeta">
<label className="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
Show Help
<i className={`fa fa-caret-${displayHelp ? 'down' : 'right'}`} />
</label>
</div>
{/* )} */}
{displaRawQuery && (
<div className="gf-form">
<label className="gf-form-label query-keyword" ng-click="ctrl.showLastQuery = !ctrl.showLastQuery">
Raw Query
<i className={`fa fa-caret-${displaRawQuery ? 'down' : 'right'}`} ng-show="ctrl.showHelp" />
{/* <i className="fa fa-caret-down" ng-show="ctrl.showLastQuery" />
<i className="fa fa-caret-right" ng-hide="ctrl.showLastQuery" /> */}
</label>
</div>
)}
<div className="gf-form gf-form--grow">
<div className="gf-form-label gf-form-label--grow" />
</div>
</div>
);
}
}

30
public/app/plugins/datasource/stackdriver/components/Project.tsx Normal file
View File

@ -0,0 +1,30 @@
import React from 'react';
export interface Props {
datasource: any;
}
interface State {
projectName: string;
}
export class Project extends React.Component<Props, State> {
state: State = {
projectName: 'Loading project...',
};
async componentDidMount() {
const projectName = await this.props.datasource.getDefaultProject();
this.setState({ projectName });
}
render() {
const { projectName } = this.state;
return (
<div className="gf-form">
<span className="gf-form-label width-9 query-keyword">Project</span>
<input className="gf-form-input width-15" disabled type="text" value={projectName} />
</div>
);
}
}

63
public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx
View File

@ -7,6 +7,7 @@ import { Aggregations } from './Aggregations';
import { Alignments } from './Alignments';
import { AlignmentPeriods } from './AlignmentPeriods';
import { AliasBy } from './AliasBy';
import { Help } from './Help';
import { Target } from '../types';
import { getAlignmentPickerData } from '../functions';
@ -73,28 +74,18 @@ export class QueryEditor extends React.Component<Props, State> {
);
}
handleFilterChange(value) {
this.setState(
{
filters: value,
},
() => {
this.props.onQueryChange(this.state);
this.props.onExecuteQuery();
}
);
handleFilterChange(filters) {
this.setState({ filters }, () => {
this.props.onQueryChange(this.state);
this.props.onExecuteQuery();
});
}
handleGroupBysChange(value) {
this.setState(
{
groupBys: value,
},
() => {
this.props.onQueryChange(this.state);
this.props.onExecuteQuery();
}
);
handleGroupBysChange(groupBys) {
this.setState({ groupBys }, () => {
this.props.onQueryChange(this.state);
this.props.onExecuteQuery();
});
}
handleAggregationChange(value) {
@ -177,15 +168,37 @@ export class QueryEditor extends React.Component<Props, State> {
)
}
</Aggregations>
<AlignmentPeriods
templateSrv={templateSrv}
alignmentPeriod={alignmentPeriod}
onChange={value => this.handleAlignmentPeriodChange(value)}
/>
<AliasBy value={aliasBy} onChange={value => this.handleAliasByChange(value)} />
</React.Fragment>
)}
</Metrics>
<AlignmentPeriods
templateSrv={templateSrv}
alignmentPeriod={alignmentPeriod}
onChange={value => this.handleAlignmentPeriodChange(value)}
/>
<Help datasource={datasource} />
{/* <div className="gf-form-inline">
<Help datasource={datasource} />
<div className="gf-form" ng-show="ctrl.lastQueryMeta">
<label className="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
Show Help
<i className="fa fa-caret-down" ng-show="ctrl.showHelp" />
<i className="fa fa-caret-right" ng-hide="ctrl.showHelp" />
</label>
</div>
<div className="gf-form" ng-show="ctrl.lastQueryMeta">
<label className="gf-form-label query-keyword" ng-click="ctrl.showLastQuery = !ctrl.showLastQuery">
Raw Query
<i className="fa fa-caret-down" ng-show="ctrl.showLastQuery" />
<i className="fa fa-caret-right" ng-hide="ctrl.showLastQuery" />
</label>
</div>
<div className="gf-form gf-form--grow">
<div className="gf-form-label gf-form-label--grow" />
</div>
</div> */}
</React.Fragment>
);
}

4
public/app/plugins/datasource/stackdriver/partials/query.editor.html
View File

@ -19,7 +19,7 @@
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div> -->
<div class="gf-form-inline">
<!-- <div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-9 query-keyword">Project</span>
<input class="gf-form-input width-15" disabled type="text" ng-model='ctrl.target.defaultProject' />
@ -41,7 +41,7 @@
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
</div> -->
<div class="gf-form" ng-show="ctrl.showLastQuery">
<pre class="gf-form-pre">{{ctrl.lastQueryMeta.rawQueryString}}</pre>