Skip to content

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

Explore split view 

* button to bring a up a duplicate explore area to compare
* side by side rendering of two explore components
* right component has close button
* left component has page title
parent 23c9da61
Showing with 109 additions and 6 deletions
public/app/containers/Explore/Explore.tsx
...@@ -80,6 +80,7 @@ export class Explore extends React.Component<any, IExploreState> { ...@@ -80,6 +80,7 @@ export class Explore extends React.Component<any, IExploreState> {
showingGraph: true, showingGraph: true,
showingTable: true, showingTable: true,
tableResult: null, tableResult: null,
...props.initialState,
}; };
} }
...@@ -126,10 +127,24 @@ export class Explore extends React.Component<any, IExploreState> { ...@@ -126,10 +127,24 @@ export class Explore extends React.Component<any, IExploreState> {
this.setState({ range }, () => this.handleSubmit()); this.setState({ range }, () => this.handleSubmit());
}; };
handleClickCloseSplit = () => {
const { onChangeSplit } = this.props;
if (onChangeSplit) {
onChangeSplit(false);
}
};
handleClickGraphButton = () => { handleClickGraphButton = () => {
this.setState(state => ({ showingGraph: !state.showingGraph })); this.setState(state => ({ showingGraph: !state.showingGraph }));
}; };
handleClickSplit = () => {
const { onChangeSplit } = this.props;
if (onChangeSplit) {
onChangeSplit(true, this.state);
}
};
handleClickTableButton = () => { handleClickTableButton = () => {
this.setState(state => ({ showingTable: !state.showingTable })); this.setState(state => ({ showingTable: !state.showingTable }));
}; };
...@@ -211,6 +226,7 @@ export class Explore extends React.Component<any, IExploreState> { ...@@ -211,6 +226,7 @@ export class Explore extends React.Component<any, IExploreState> {
}; };
render() { render() {
const { position, split } = this.props;
const { const {
datasource, datasource,
datasourceError, datasourceError,
...@@ -230,16 +246,32 @@ export class Explore extends React.Component<any, IExploreState> { ...@@ -230,16 +246,32 @@ export class Explore extends React.Component<any, IExploreState> {
const graphHeight = showingBoth ? '200px' : '400px'; const graphHeight = showingBoth ? '200px' : '400px';
const graphButtonActive = showingBoth || showingGraph ? 'active' : ''; const graphButtonActive = showingBoth || showingGraph ? 'active' : '';
const tableButtonActive = showingBoth || showingTable ? 'active' : ''; const tableButtonActive = showingBoth || showingTable ? 'active' : '';
const exploreClass = split ? 'explore explore-split' : 'explore';
return ( return (
<div className="explore"> <div className={exploreClass}>
<div className="navbar"> <div className="navbar">
{position === 'left' ? (
<div> <div>
<a className="navbar-page-btn"> <a className="navbar-page-btn">
<i className="fa fa-rocket" /> <i className="fa fa-rocket" />
Explore Explore
</a> </a>
</div> </div>
) : (
<div className="navbar-buttons explore-first-button">
<button className="btn navbar-button" onClick={this.handleClickCloseSplit}>
Close Split
</button>
</div>
)}
<div className="navbar__spacer" /> <div className="navbar__spacer" />
{position === 'left' && !split ? (
<div className="navbar-buttons">
<button className="btn navbar-button" onClick={this.handleClickSplit}>
Split
</button>
</div>
) : null}
<div className="navbar-buttons"> <div className="navbar-buttons">
<button className={`btn navbar-button ${graphButtonActive}`} onClick={this.handleClickGraphButton}> <button className={`btn navbar-button ${graphButtonActive}`} onClick={this.handleClickGraphButton}>
Graph Graph
...@@ -278,7 +310,13 @@ export class Explore extends React.Component<any, IExploreState> { ...@@ -278,7 +310,13 @@ export class Explore extends React.Component<any, IExploreState> {
{queryError ? <div className="text-warning m-a-2">{queryError}</div> : null} {queryError ? <div className="text-warning m-a-2">{queryError}</div> : null}
<main className="m-t-2"> <main className="m-t-2">
{showingGraph ? ( {showingGraph ? (
<Graph data={graphResult} id="explore-1" options={requestOptions} height={graphHeight} /> <Graph
data={graphResult}
id={`explore-graph-${position}`}
options={requestOptions}
height={graphHeight}
split={split}
/>
) : null} ) : null}
{showingTable ? <Table data={tableResult} className="m-t-3" /> : null} {showingTable ? <Table data={tableResult} className="m-t-3" /> : null}
</main> </main>
......
public/app/containers/Explore/Graph.tsx
...@@ -75,6 +75,7 @@ class Graph extends Component<any, any> { ...@@ -75,6 +75,7 @@ class Graph extends Component<any, any> {
if ( if (
prevProps.data !== this.props.data || prevProps.data !== this.props.data ||
prevProps.options !== this.props.options || prevProps.options !== this.props.options ||
prevProps.split !== this.props.split ||
prevProps.height !== this.props.height prevProps.height !== this.props.height
) { ) {
this.draw(); this.draw();
......
public/app/containers/Explore/Wrapper.tsx 0 → 100644
import React, { PureComponent } from 'react';
import Explore from './Explore';
export default class Wrapper extends PureComponent<any, any> {
state = {
initialState: null,
split: false,
};
handleChangeSplit = (split, initialState) => {
this.setState({ split, initialState });
};
render() {
// State overrides for props from first Explore
const { initialState, split } = this.state;
return (
<div className="explore-wrapper">
<Explore {...this.props} position="left" onChangeSplit={this.handleChangeSplit} split={split} />
{split ? (
<Explore
{...this.props}
initialState={initialState}
onChangeSplit={this.handleChangeSplit}
position="right"
split={split}
/>
) : null}
</div>
);
}
}
public/app/routes/routes.ts
...@@ -3,7 +3,6 @@ import './ReactContainer'; ...@@ -3,7 +3,6 @@ import './ReactContainer';
import ServerStats from 'app/containers/ServerStats/ServerStats'; import ServerStats from 'app/containers/ServerStats/ServerStats';
import AlertRuleList from 'app/containers/AlertRuleList/AlertRuleList'; import AlertRuleList from 'app/containers/AlertRuleList/AlertRuleList';
// import Explore from 'app/containers/Explore/Explore';
import FolderSettings from 'app/containers/ManageDashboards/FolderSettings'; import FolderSettings from 'app/containers/ManageDashboards/FolderSettings';
import FolderPermissions from 'app/containers/ManageDashboards/FolderPermissions'; import FolderPermissions from 'app/containers/ManageDashboards/FolderPermissions';
...@@ -114,7 +113,7 @@ export function setupAngularRoutes($routeProvider, $locationProvider) { ...@@ -114,7 +113,7 @@ export function setupAngularRoutes($routeProvider, $locationProvider) {
.when('/explore/:initial?', { .when('/explore/:initial?', {
template: '<react-container />', template: '<react-container />',
resolve: { resolve: {
component: () => import(/* webpackChunkName: "explore" */ 'app/containers/Explore/Explore'), component: () => import(/* webpackChunkName: "explore" */ 'app/containers/Explore/Wrapper'),
}, },
}) })
.when('/org', { .when('/org', {
......
public/sass/pages/_explore.scss
.explore { .explore {
.explore-container { width: 100%;
&-container {
padding: 2rem; padding: 2rem;
} }
&-wrapper {
display: flex;
> .explore-split {
width: 50%;
}
}
.explore-first-button {
margin-left: 15px;
}
.explore-graph { .explore-graph {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -12,7 +26,15 @@ ...@@ -12,7 +26,15 @@
padding: 10px 10px 5px 10px; padding: 10px 10px 5px 10px;
} }
.navbar-page-btn .fa { .navbar {
flex-wrap: wrap;
height: auto;
}
.navbar-page-btn {
margin-right: 1rem;
.fa {
position: relative; position: relative;
top: -1px; top: -1px;
font-size: 19px; font-size: 19px;
...@@ -20,6 +42,12 @@ ...@@ -20,6 +42,12 @@
opacity: 0.75; opacity: 0.75;
margin-right: 8px; margin-right: 8px;
} }
}
.navbar-button.active {
color: #0083b3;
background-color: white;
}
.elapsed-time { .elapsed-time {
position: absolute; position: absolute;
...@@ -52,6 +80,10 @@ ...@@ -52,6 +80,10 @@
} }
} }
.explore + .explore {
border-left: 1px dotted #aaa;
}
.query-row { .query-row {
display: flex; display: flex;
......
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