Skip to content

N
nexpie-grafana-theme
Commit 307248f7 by David Kaltschmidt
Options

Add clear row button 

- clears the content of a query row
parent 00f04f4e
Showing with 67 additions and 57 deletions
public/app/containers/Explore/Explore.tsx
......@@ -166,7 +166,7 @@ export class Explore extends React.Component<any, IExploreState> {
supportsTable,
datasourceLoading: false,
},
() => datasourceError === null && this.handleSubmit()
() => datasourceError === null && this.onSubmit()
);
}
......@@ -174,7 +174,7 @@ export class Explore extends React.Component<any, IExploreState> {
this.el = el;
};
handleAddQueryRow = index => {
onAddQueryRow = index => {
const { queries } = this.state;
const nextQueries = [
...queries.slice(0, index + 1),
......@@ -184,7 +184,7 @@ export class Explore extends React.Component<any, IExploreState> {
this.setState({ queries: nextQueries });
};
handleChangeDatasource = async option => {
onChangeDatasource = async option => {
this.setState({
datasource: null,
datasourceError: null,
......@@ -197,10 +197,10 @@ export class Explore extends React.Component<any, IExploreState> {
this.setDatasource(datasource);
};
handleChangeQuery = (value, index) => {
onChangeQuery = (value: string, index: number, override?: boolean) => {
const { queries } = this.state;
const prevQuery = queries[index];
const edited = prevQuery.query !== value;
const edited = override ? false : prevQuery.query !== value;
const nextQuery = {
...queries[index],
edited,
......@@ -211,50 +211,71 @@ export class Explore extends React.Component<any, IExploreState> {
this.setState({ queries: nextQueries });
};
handleChangeTime = nextRange => {
onChangeTime = nextRange => {
const range = {
from: nextRange.from,
to: nextRange.to,
};
this.setState({ range }, () => this.handleSubmit());
this.setState({ range }, () => this.onSubmit());
};
handleClickCloseSplit = () => {
onClickClear = () => {
this.setState({
graphResult: null,
logsResult: null,
queries: ensureQueries(),
tableResult: null,
});
};
onClickCloseSplit = () => {
const { onChangeSplit } = this.props;
if (onChangeSplit) {
onChangeSplit(false);
}
};
handleClickGraphButton = () => {
onClickGraphButton = () => {
this.setState(state => ({ showingGraph: !state.showingGraph }));
};
handleClickLogsButton = () => {
onClickLogsButton = () => {
this.setState(state => ({ showingLogs: !state.showingLogs }));
};
handleClickSplit = () => {
onClickSplit = () => {
const { onChangeSplit } = this.props;
if (onChangeSplit) {
onChangeSplit(true, this.state);
}
};
handleClickTableButton = () => {
onClickTableButton = () => {
this.setState(state => ({ showingTable: !state.showingTable }));
};
handleRemoveQueryRow = index => {
onClickTableCell = (columnKey: string, rowValue: string) => {
const { datasource, queries } = this.state;
if (datasource && datasource.modifyQuery) {
const nextQueries = queries.map(q => ({
...q,
edited: false,
query: datasource.modifyQuery(q.query, { addFilter: { key: columnKey, value: rowValue } }),
}));
this.setState({ queries: nextQueries }, () => this.onSubmit());
}
};
onRemoveQueryRow = index => {
const { queries } = this.state;
if (queries.length <= 1) {
return;
}
const nextQueries = [...queries.slice(0, index), ...queries.slice(index + 1)];
this.setState({ queries: nextQueries }, () => this.handleSubmit());
this.setState({ queries: nextQueries }, () => this.onSubmit());
};
handleSubmit = () => {
onSubmit = () => {
const { showingLogs, showingGraph, showingTable, supportsGraph, supportsLogs, supportsTable } = this.state;
if (showingTable && supportsTable) {
this.runTableQuery();
......@@ -267,27 +288,6 @@ export class Explore extends React.Component<any, IExploreState> {
}
};
onClickClear = () => {
this.setState({
graphResult: null,
logsResult: null,
queries: ensureQueries(),
tableResult: null,
});
};
onClickTableCell = (columnKey: string, rowValue: string) => {
const { datasource, queries } = this.state;
if (datasource && datasource.modifyQuery) {
const nextQueries = queries.map(q => ({
...q,
edited: false,
query: datasource.modifyQuery(q.query, { addFilter: { key: columnKey, value: rowValue } }),
}));
this.setState({ queries: nextQueries }, () => this.handleSubmit());
}
};
onQuerySuccess(datasourceId: string, queries: any[]): void {
// save queries to history
let { datasource, history } = this.state;
......@@ -450,7 +450,7 @@ export class Explore extends React.Component<any, IExploreState> {
</div>
) : (
<div className="navbar-buttons explore-first-button">
<button className="btn navbar-button" onClick={this.handleClickCloseSplit}>
<button className="btn navbar-button" onClick={this.onClickCloseSplit}>
Close Split
</button>
</div>
......@@ -460,7 +460,7 @@ export class Explore extends React.Component<any, IExploreState> {
<Select
className="datasource-picker"
clearable={false}
onChange={this.handleChangeDatasource}
onChange={this.onChangeDatasource}
options={datasources}
placeholder="Loading datasources..."
value={selectedDatasource}
......@@ -470,19 +470,19 @@ export class Explore extends React.Component<any, IExploreState> {
<div className="navbar__spacer" />
{position === 'left' && !split ? (
<div className="navbar-buttons">
<button className="btn navbar-button" onClick={this.handleClickSplit}>
<button className="btn navbar-button" onClick={this.onClickSplit}>
Split
</button>
</div>
) : null}
<TimePicker range={range} onChangeTime={this.handleChangeTime} />
<TimePicker range={range} onChangeTime={this.onChangeTime} />
<div className="navbar-buttons">
<button className="btn navbar-button navbar-button--no-icon" onClick={this.onClickClear}>
Clear All
</button>
</div>
<div className="navbar-buttons relative">
<button className="btn navbar-button--primary" onClick={this.handleSubmit}>
<button className="btn navbar-button--primary" onClick={this.onSubmit}>
Run Query <i className="fa fa-level-down run-icon" />
</button>
{loading || latency ? <ElapsedTime time={latency} className="text-info" /> : null}
......@@ -505,26 +505,26 @@ export class Explore extends React.Component<any, IExploreState> {
history={history}
queries={queries}
request={this.request}
onAddQueryRow={this.handleAddQueryRow}
onChangeQuery={this.handleChangeQuery}
onExecuteQuery={this.handleSubmit}
onRemoveQueryRow={this.handleRemoveQueryRow}
onAddQueryRow={this.onAddQueryRow}
onChangeQuery={this.onChangeQuery}
onExecuteQuery={this.onSubmit}
onRemoveQueryRow={this.onRemoveQueryRow}
/>
{queryError && !loading ? <div className="text-warning m-a-2">{queryError}</div> : null}
<div className="result-options">
{supportsGraph ? (
<button className={`btn navbar-button ${graphButtonActive}`} onClick={this.handleClickGraphButton}>
<button className={`btn navbar-button ${graphButtonActive}`} onClick={this.onClickGraphButton}>
Graph
</button>
) : null}
{supportsTable ? (
<button className={`btn navbar-button ${tableButtonActive}`} onClick={this.handleClickTableButton}>
<button className={`btn navbar-button ${tableButtonActive}`} onClick={this.onClickTableButton}>
Table
</button>
) : null}
{supportsLogs ? (
<button className={`btn navbar-button ${logsButtonActive}`} onClick={this.handleClickLogsButton}>
<button className={`btn navbar-button ${logsButtonActive}`} onClick={this.onClickLogsButton}>
Logs
</button>
) : null}
......
public/app/containers/Explore/QueryRows.tsx
......@@ -3,28 +3,35 @@ import React, { PureComponent } from 'react';
import QueryField from './PromQueryField';
class QueryRow extends PureComponent<any, {}> {
handleChangeQuery = value => {
onChangeQuery = value => {
const { index, onChangeQuery } = this.props;
if (onChangeQuery) {
onChangeQuery(value, index);
}
};
handleClickAddButton = () => {
onClickAddButton = () => {
const { index, onAddQueryRow } = this.props;
if (onAddQueryRow) {
onAddQueryRow(index);
}
};
handleClickRemoveButton = () => {
onClickClearButton = () => {
const { index, onChangeQuery } = this.props;
if (onChangeQuery) {
onChangeQuery('', index, true);
}
};
onClickRemoveButton = () => {
const { index, onRemoveQueryRow } = this.props;
if (onRemoveQueryRow) {
onRemoveQueryRow(index);
}
};
handlePressEnter = () => {
onPressEnter = () => {
const { onExecuteQuery } = this.props;
if (onExecuteQuery) {
onExecuteQuery();
......@@ -36,20 +43,23 @@ class QueryRow extends PureComponent<any, {}> {
return (
<div className="query-row">
<div className="query-row-tools">
<button className="btn navbar-button navbar-button--tight" onClick={this.handleClickAddButton}>
<button className="btn navbar-button navbar-button--tight" onClick={this.onClickAddButton}>
<i className="fa fa-plus" />
</button>
<button className="btn navbar-button navbar-button--tight" onClick={this.handleClickRemoveButton}>
<button className="btn navbar-button navbar-button--tight" onClick={this.onClickRemoveButton}>
<i className="fa fa-minus" />
</button>
<button className="btn navbar-button navbar-button--tight" onClick={this.onClickClearButton}>
<i className="fa fa-times" />
</button>
</div>
<div className="slate-query-field-wrapper">
<QueryField
initialQuery={edited ? null : query}
history={history}
portalPrefix="explore"
onPressEnter={this.handlePressEnter}
onQueryChange={this.handleChangeQuery}
onPressEnter={this.onPressEnter}
onQueryChange={this.onChangeQuery}
request={request}
/>
</div>
......
public/sass/pages/_explore.scss
......@@ -107,7 +107,7 @@
}
.query-row-tools {
width: 4rem;
width: 6rem;
}
.explore {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment