Commit f5e351af by David Kaltschmidt

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