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