Skip to content

N
nexpie-grafana-theme
Commit adb2430a by David Kaltschmidt
Options

Explore: collapsible result panels 

- replace the Graph/Table buttons with toggle control in a wrapper panel
- moved toggle control to left to be close to the label
- removed panel styles from Logs and Graph viewer
- moved loader animation to panel
parent 634d71a6
Showing with 152 additions and 101 deletions
public/app/features/explore/Explore.tsx
......@@ -19,6 +19,7 @@ import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
import TableModel, { mergeTablesIntoModel } from 'app/core/table_model';
import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
import Panel from './Panel';
import QueryRows from './QueryRows';
import Graph from './Graph';
import Logs from './Logs';
......@@ -127,6 +128,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
range: initialRange,
showingGraph: true,
showingLogs: true,
showingStartPage: false,
showingTable: true,
supportsGraph: null,
supportsLogs: null,
......@@ -238,6 +240,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
datasourceLoading: false,
datasourceName: datasource.name,
queries: nextQueries,
showingStartPage: Boolean(StartPage),
},
() => {
if (datasourceError === null) {
......@@ -329,10 +332,11 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
onClickClear = () => {
this.queryExpressions = [''];
this.setState(
{
prevState => ({
queries: ensureQueries(),
queryTransactions: [],
},
showingStartPage: Boolean(prevState.StartPage),
}),
this.saveState
);
};
......@@ -563,6 +567,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
return {
queryTransactions: nextQueryTransactions,
showingStartPage: false,
};
});
......@@ -789,16 +794,13 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
range,
showingGraph,
showingLogs,
showingStartPage,
showingTable,
supportsGraph,
supportsLogs,
supportsTable,
} = this.state;
const showingBoth = showingGraph && showingTable;
const graphHeight = showingBoth ? '200px' : '400px';
const graphButtonActive = showingBoth || showingGraph ? 'active' : '';
const logsButtonActive = showingLogs ? 'active' : '';
const tableButtonActive = showingBoth || showingTable ? 'active' : '';
const graphHeight = showingGraph && showingTable ? '200px' : '400px';
const exploreClass = split ? 'explore explore-split' : 'explore';
const selectedDatasource = datasource ? exploreDatasources.find(d => d.label === datasource.name) : undefined;
const graphRangeIntervals = getIntervals(graphRange, datasource, this.el ? this.el.offsetWidth : 0);
......@@ -823,8 +825,6 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
)
: undefined;
const loading = queryTransactions.some(qt => !qt.done);
const showStartPages = StartPage && queryTransactions.length === 0;
const viewModeCount = [supportsGraph, supportsLogs, supportsTable].filter(m => m).length;
return (
<div className={exploreClass} ref={this.getRef}>
......@@ -913,55 +913,47 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
/>
<main className="m-t-2">
<ErrorBoundary>
{showStartPages && <StartPage onClickQuery={this.onClickQuery} />}
{!showStartPages && (
{showingStartPage && <StartPage onClickQuery={this.onClickQuery} />}
{!showingStartPage && (
<>
{viewModeCount > 1 && (
<div className="result-options">
{supportsGraph ? (
<button className={`btn toggle-btn ${graphButtonActive}`} onClick={this.onClickGraphButton}>
Graph
</button>
) : null}
{supportsTable ? (
<button className={`btn toggle-btn ${tableButtonActive}`} onClick={this.onClickTableButton}>
Table
</button>
) : null}
{supportsLogs ? (
<button className={`btn toggle-btn ${logsButtonActive}`} onClick={this.onClickLogsButton}>
Logs
</button>
) : null}
</div>
)}
{supportsGraph &&
showingGraph && (
{supportsGraph && (
<Panel
label="Graph"
isOpen={showingGraph}
loading={graphLoading}
onToggle={this.onClickGraphButton}
>
<Graph
data={graphResult}
height={graphHeight}
loading={graphLoading}
id={`explore-graph-${position}`}
onChangeTime={this.onChangeTime}
range={graphRange}
split={split}
/>
)}
{supportsTable && showingTable ? (
<div className="panel-container m-t-2">
</Panel>
)}
{supportsTable && (
<Panel
label="Table"
loading={tableLoading}
isOpen={showingTable}
onToggle={this.onClickTableButton}
>
<Table data={tableResult} loading={tableLoading} onClickCell={this.onClickTableCell} />
</div>
) : null}
{supportsLogs && showingLogs ? (
<Logs
data={logsResult}
loading={logsLoading}
position={position}
onChangeTime={this.onChangeTime}
range={range}
/>
) : null}
</Panel>
)}
{supportsLogs && (
<Panel label="Logs" loading={logsLoading} isOpen={showingLogs} onToggle={this.onClickLogsButton}>
<Logs
data={logsResult}
loading={logsLoading}
position={position}
onChangeTime={this.onChangeTime}
range={range}
/>
</Panel>
)}
</>
)}
</ErrorBoundary>
......
public/app/features/explore/Graph.tsx
......@@ -77,7 +77,6 @@ interface GraphProps {
data: any[];
height?: string; // e.g., '200px'
id?: string;
loading?: boolean;
range: RawTimeRange;
split?: boolean;
size?: { width: number; height: number };
......@@ -188,12 +187,11 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
}
render() {
const { height = '100px', id = 'graph', loading = false } = this.props;
const { height = '100px', id = 'graph' } = this.props;
const data = this.getGraphData();
return (
<div className="panel-container">
{loading && <div className="explore-panel__loader" />}
<>
{this.props.data &&
this.props.data.length > MAX_NUMBER_OF_TIME_SERIES &&
!this.state.showAllTimeSeries && (
......@@ -207,7 +205,7 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
)}
<div id={id} className="explore-graph" style={{ height }} />
<Legend data={data} />
</div>
</>
);
}
}
......
public/app/features/explore/Logs.tsx
......@@ -97,7 +97,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
/>
</div>
<div className="panel-container logs-options">
<div className="logs-options">
<div className="logs-controls">
<Switch label="Timestamp" checked={showUtc} onChange={this.onChangeUtc} small />
<Switch label="Local time" checked={showLocalTime} onChange={this.onChangeLocalTime} small />
......@@ -116,33 +116,30 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
</div>
</div>
<div className="panel-container">
{loading && <div className="explore-panel__loader" />}
<div className="logs-entries" style={logEntriesStyle}>
{hasData &&
data.rows.map(row => (
<Fragment key={row.key}>
<div className={row.logLevel ? `logs-row-level logs-row-level-${row.logLevel}` : ''} />
{showUtc && <div title={`Local: ${row.timeLocal} (${row.timeFromNow})`}>{row.timestamp}</div>}
{showLocalTime && <div title={`${row.timestamp} (${row.timeFromNow})`}>{row.timeLocal}</div>}
{showLabels && (
<div className="max-width" title={row.labels}>
{row.labels}
</div>
)}
<div>
<Highlighter
textToHighlight={row.entry}
searchWords={row.searchWords}
findChunks={findHighlightChunksInText}
highlightClassName="logs-row-match-highlight"
/>
<div className="logs-entries" style={logEntriesStyle}>
{hasData &&
data.rows.map(row => (
<Fragment key={row.key}>
<div className={row.logLevel ? `logs-row-level logs-row-level-${row.logLevel}` : ''} />
{showUtc && <div title={`Local: ${row.timeLocal} (${row.timeFromNow})`}>{row.timestamp}</div>}
{showLocalTime && <div title={`${row.timestamp} (${row.timeFromNow})`}>{row.timeLocal}</div>}
{showLabels && (
<div className="max-width" title={row.labels}>
{row.labels}
</div>
</Fragment>
))}
</div>
{!loading && !hasData && 'No data was returned.'}
)}
<div>
<Highlighter
textToHighlight={row.entry}
searchWords={row.searchWords}
findChunks={findHighlightChunksInText}
highlightClassName="logs-row-match-highlight"
/>
</div>
</Fragment>
))}
</div>
{!loading && !hasData && 'No data was returned.'}
</div>
);
}
......
public/app/features/explore/Panel.tsx 0 → 100644
import React, { PureComponent } from 'react';
interface Props {
isOpen: boolean;
label: string;
loading?: boolean;
onToggle: (isOpen: boolean) => void;
}
export default class Panel extends PureComponent<Props> {
onClickToggle = () => this.props.onToggle(!this.props.isOpen);
render() {
const { isOpen, loading } = this.props;
const iconClass = isOpen ? 'fa fa-caret-up' : 'fa fa-caret-down';
const loaderClass = loading ? 'explore-panel__loader explore-panel__loader--active' : 'explore-panel__loader';
return (
<div className="explore-panel panel-container">
<div className="explore-panel__header" onClick={this.onClickToggle}>
<div className="explore-panel__header-buttons">
<span className={iconClass} />
</div>
<div className="explore-panel__header-label">{this.props.label}</div>
</div>
{isOpen && (
<div className="explore-panel__body">
<div className={loaderClass} />
{this.props.children}
</div>
)}
</div>
);
}
}
public/app/features/explore/__snapshots__/Graph.test.tsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Render should render component 1`] = `
<div
className="panel-container"
>
<Fragment>
<div
className="explore-graph"
id="graph"
......@@ -456,13 +454,11 @@ exports[`Render should render component 1`] = `
]
}
/>
</div>
</Fragment>
`;
exports[`Render should render component with disclaimer 1`] = `
<div
className="panel-container"
>
<Fragment>
<div
className="time-series-disclaimer"
>
......@@ -952,13 +948,11 @@ exports[`Render should render component with disclaimer 1`] = `
]
}
/>
</div>
</Fragment>
`;
exports[`Render should show query return no time series 1`] = `
<div
className="panel-container"
>
<Fragment>
<div
className="explore-graph"
id="graph"
......@@ -971,5 +965,5 @@ exports[`Render should show query return no time series 1`] = `
<Legend
data={Array []}
/>
</div>
</Fragment>
`;
public/app/types/explore.ts
......@@ -173,6 +173,7 @@ export interface ExploreState {
range: RawTimeRange;
showingGraph: boolean;
showingLogs: boolean;
showingStartPage?: boolean;
showingTable: boolean;
supportsGraph: boolean | null;
supportsLogs: boolean | null;
......
public/sass/pages/_explore.scss
......@@ -18,10 +18,39 @@
margin-left: 15px;
}
// Graph panel needs a bit extra padding at top
.panel-container {
.explore-panel {
margin-top: $panel-margin;
}
.explore-panel__body {
padding: $panel-padding;
}
.explore-panel__header {
padding: $panel-padding;
padding-top: 10px;
padding-top: 5px;
padding-bottom: 0;
display: flex;
cursor: pointer;
margin-bottom: 5px;
transition: all 0.1s linear;
}
.explore-panel__header:hover {
transform: translateY(-1px);
}
.explore-panel__header-label {
font-weight: 500;
margin-right: $panel-margin;
font-size: $font-size-h6;
box-shadow: $text-shadow-faint;
}
.explore-panel__header-buttons {
margin-right: $panel-margin;
font-size: $font-size-lg;
line-height: $font-size-h6;
}
// Make sure wrap buttons around on small screens
......@@ -91,11 +120,16 @@
height: 2px;
position: relative;
overflow: hidden;
background: $text-color-faint;
background: none;
margin: $panel-margin / 2;
transition: background-color 1s ease;
}
.explore-panel__loader:after {
.explore-panel__loader--active {
background: $text-color-faint;
}
.explore-panel__loader--active:after {
content: ' ';
display: block;
width: 25%;
......@@ -221,17 +255,18 @@
.logs-controls {
display: flex;
background-color: $page-bg;
padding: $panel-padding;
padding-top: 10px;
border-radius: $border-radius;
margin: 2*$panel-margin 0;
border: $panel-border;
> * {
margin-right: 1em;
}
}
.logs-options,
.logs-graph {
margin-bottom: $panel-margin;
}
.logs-meta {
flex: 1;
color: $text-color-weak;
......
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