diff --git a/ui/spec/data_explorer/reducers/dataExplorerUISpec.js b/ui/spec/data_explorer/reducers/dataExplorerUISpec.js
deleted file mode 100644
index b0f4404676..0000000000
--- a/ui/spec/data_explorer/reducers/dataExplorerUISpec.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import reducer from 'src/data_explorer/reducers/dataExplorerUI';
-import {activatePanel} from 'src/data_explorer/actions/view';
-
-describe('DataExplorer.Reducers.UI', () => {
- it('can set the active panel', () => {
- const activePanel = 123;
- const actual = reducer({}, activatePanel(activePanel));
-
- expect(actual).to.deep.equal({activePanel});
- });
-});
diff --git a/ui/spec/data_explorer/reducers/panelSpec.js b/ui/spec/data_explorer/reducers/panelSpec.js
deleted file mode 100644
index 8182edd052..0000000000
--- a/ui/spec/data_explorer/reducers/panelSpec.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import reducer from 'src/data_explorer/reducers/panels';
-import {deletePanel} from 'src/data_explorer/actions/view';
-
-const fakeAddPanelAction = (panelID, queryID) => {
- return {
- type: 'CREATE_PANEL',
- payload: {panelID, queryID},
- };
-};
-
-describe('Chronograf.Reducers.Panel', () => {
- let state;
- const panelID = 123;
- const queryID = 456;
-
- beforeEach(() => {
- state = reducer({}, fakeAddPanelAction(panelID, queryID));
- });
-
- it('can add a panel', () => {
- const actual = state[panelID];
- expect(actual).to.deep.equal({
- id: panelID,
- queryIds: [queryID],
- });
- });
-
- it('can delete a panel', () => {
- const nextState = reducer(state, deletePanel(panelID));
-
- const actual = nextState[panelID];
- expect(actual).to.equal(undefined);
- });
-});
diff --git a/ui/src/data_explorer/actions/view/index.js b/ui/src/data_explorer/actions/view/index.js
index 21d7d79c97..8e5f36b224 100644
--- a/ui/src/data_explorer/actions/view/index.js
+++ b/ui/src/data_explorer/actions/view/index.js
@@ -1,35 +1,6 @@
import uuid from 'node-uuid';
-export function createPanel() {
- return {
- type: 'CREATE_PANEL',
- payload: {
- panelID: uuid.v4(), // for the default Panel
- queryID: uuid.v4(), // for the default Query
- },
- };
-}
-
-export function renamePanel(panelId, name) {
- return {
- type: 'RENAME_PANEL',
- payload: {
- panelId,
- name,
- },
- };
-}
-
-export function deletePanel(panelId) {
- return {
- type: 'DELETE_PANEL',
- payload: {
- panelId,
- },
- };
-}
-
-export function addQuery(panelId, options) {
+export function addQuery(options = {}) {
return {
type: 'ADD_QUERY',
payload: {
@@ -157,12 +128,3 @@ export function updateRawQuery(queryID, text) {
},
};
}
-
-export function activatePanel(panelID) {
- return {
- type: 'ACTIVATE_PANEL',
- payload: {
- panelID,
- },
- };
-}
diff --git a/ui/src/data_explorer/components/Panel.js b/ui/src/data_explorer/components/Panel.js
deleted file mode 100644
index 50ddf8621f..0000000000
--- a/ui/src/data_explorer/components/Panel.js
+++ /dev/null
@@ -1,183 +0,0 @@
-import React, {PropTypes} from 'react';
-import classNames from 'classnames';
-import QueryEditor from './QueryEditor';
-import QueryTabItem from './QueryTabItem';
-import RenamePanelModal from './RenamePanelModal';
-import SimpleDropdown from 'src/shared/components/SimpleDropdown';
-
-const Panel = React.createClass({
- propTypes: {
- panel: PropTypes.shape({
- id: PropTypes.string.isRequired,
- }).isRequired,
- queries: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
- timeRange: PropTypes.shape({
- upper: PropTypes.string,
- lower: PropTypes.string,
- }).isRequired,
- isExpanded: PropTypes.bool.isRequired,
- onTogglePanel: PropTypes.func.isRequired,
- actions: PropTypes.shape({
- chooseNamespace: PropTypes.func.isRequired,
- chooseMeasurement: PropTypes.func.isRequired,
- chooseTag: PropTypes.func.isRequired,
- groupByTag: PropTypes.func.isRequired,
- addQuery: PropTypes.func.isRequired,
- deleteQuery: PropTypes.func.isRequired,
- toggleField: PropTypes.func.isRequired,
- groupByTime: PropTypes.func.isRequired,
- toggleTagAcceptance: PropTypes.func.isRequired,
- applyFuncsToField: PropTypes.func.isRequired,
- deletePanel: PropTypes.func.isRequired,
- renamePanel: PropTypes.func.isRequired,
- }).isRequired,
- setActiveQuery: PropTypes.func.isRequired,
- activeQueryID: PropTypes.string,
- },
-
- handleSetActiveQuery(query) {
- this.props.setActiveQuery(query.id);
- },
-
- handleAddQuery() {
- this.props.actions.addQuery();
- },
-
- handleAddRawQuery() {
- this.props.actions.addQuery({rawText: `SELECT "fields" from "db"."rp"."measurement"`});
- },
-
- handleDeleteQuery(query) {
- this.props.actions.deleteQuery(query.id);
- },
-
- handleSelectPanel() {
- this.props.onTogglePanel(this.props.panel);
- },
-
- handleDeletePanel(e) {
- e.stopPropagation();
- this.props.actions.deletePanel(this.props.panel.id);
- },
-
- getActiveQuery() {
- const {queries, activeQueryID} = this.props;
- const activeQuery = queries.find((query) => query.id === activeQueryID);
- const defaultQuery = queries[0];
-
- return activeQuery || defaultQuery;
- },
-
- openRenamePanelModal(e) {
- e.stopPropagation();
- $(`#renamePanelModal-${this.props.panel.id}`).modal('show'); // eslint-disable-line no-undef
- },
-
- handleRename(newName) {
- this.props.actions.renamePanel(this.props.panel.id, newName);
- },
-
-
- render() {
- const {panel, isExpanded} = this.props;
-
- return (
-
-
-
-
- {panel.name || "Graph"}
-
-
-
- {this.renderQueryTabList()}
- {this.renderQueryEditor()}
-
-
- );
- },
-
- renderQueryEditor() {
- if (!this.props.isExpanded) {
- return null;
- }
-
- const {timeRange, actions} = this.props;
- const query = this.getActiveQuery();
-
- if (!query) {
- return (
-
-
This Graph has no Queries
-
-
Add a Query
-
- );
- }
-
- return (
-
- );
- },
-
- renderQueryTabList() {
- const {isExpanded, queries} = this.props;
- if (!isExpanded) {
- return null;
- }
- return (
-
- {queries.map((q) => {
- let queryTabText;
- if (q.rawText) {
- queryTabText = 'InfluxQL';
- } else {
- queryTabText = (q.measurement && q.fields.length !== 0) ? `${q.measurement}.${q.fields[0].field}` : 'Query';
- }
- return (
-
- );
- })}
-
- {this.renderAddQuery()}
-
- );
- },
-
- onChoose(item) {
- switch (item.text) {
- case 'Query Builder':
- this.handleAddQuery();
- break;
- case 'InfluxQL':
- this.handleAddRawQuery();
- break;
- }
- },
-
- renderAddQuery() {
- return (
-
-
-
- );
- },
-});
-
-export default Panel;
diff --git a/ui/src/data_explorer/components/PanelBuilder.js b/ui/src/data_explorer/components/PanelBuilder.js
deleted file mode 100644
index e5b7890707..0000000000
--- a/ui/src/data_explorer/components/PanelBuilder.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, {PropTypes} from 'react';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import PanelList from './PanelList';
-import * as viewActions from '../actions/view';
-
-const {string, func} = PropTypes;
-const PanelBuilder = React.createClass({
- propTypes: {
- width: string,
- actions: PropTypes.shape({
- activatePanel: func.isRequired,
- createPanel: func.isRequired,
- deleteQuery: func.isRequired,
- addQuery: func.isRequired,
- editRawText: func.isRequired,
- chooseNamespace: func.isRequired,
- chooseMeasurement: func.isRequired,
- toggleField: func.isRequired,
- groupByTime: func.isRequired,
- applyFuncsToField: func.isRequired,
- chooseTag: func.isRequired,
- groupByTag: func.isRequired,
- toggleTagAcceptance: func.isRequired,
- deletePanel: func.isRequired,
- }).isRequired,
- setActiveQuery: func.isRequired,
- activePanelID: string,
- activeQueryID: string,
- },
-
- handleCreateExplorer() {
- this.props.actions.createPanel();
- },
-
- render() {
- const {width, actions, setActiveQuery, activePanelID, activeQueryID} = this.props;
-
- return (
-
- );
- },
-});
-
-function mapStateToProps() {
- return {};
-}
-
-function mapDispatchToProps(dispatch) {
- return {
- actions: bindActionCreators(viewActions, dispatch),
- };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(PanelBuilder);
diff --git a/ui/src/data_explorer/components/PanelList.js b/ui/src/data_explorer/components/PanelList.js
deleted file mode 100644
index c3d365e2d6..0000000000
--- a/ui/src/data_explorer/components/PanelList.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React, {PropTypes} from 'react';
-import {connect} from 'react-redux';
-import _ from 'lodash';
-
-import Panel from './Panel';
-
-const {func, string, shape} = PropTypes;
-const PanelList = React.createClass({
- propTypes: {
- timeRange: shape({
- upper: string,
- lower: string,
- }).isRequired,
- panels: shape({}).isRequired,
- queryConfigs: PropTypes.shape({}),
- actions: shape({
- activatePanel: func.isRequired,
- deleteQuery: func.isRequired,
- addQuery: func.isRequired,
- }).isRequired,
- setActiveQuery: func.isRequired,
- activePanelID: string,
- activeQueryID: string,
- },
-
- handleTogglePanel(panel) {
- const panelID = panel.id === this.props.activePanelID ? null : panel.id;
- this.props.actions.activatePanel(panelID);
-
- // Reset the activeQueryID when toggling Exporations
- this.props.setActiveQuery(null);
- },
-
- render() {
- const {actions, panels, timeRange, queryConfigs, setActiveQuery, activeQueryID, activePanelID} = this.props;
-
- return (
-
- {Object.keys(panels).map((panelID) => {
- const panel = panels[panelID];
- const queries = panel.queryIds.map((configId) => queryConfigs[configId]);
- const deleteQueryFromPanel = _.partial(actions.deleteQuery, panelID);
- const addQueryToPanel = _.partial(actions.addQuery, panelID);
- const allActions = Object.assign({}, actions, {
- addQuery: addQueryToPanel,
- deleteQuery: deleteQueryFromPanel,
- });
-
- return (
-
- );
- })}
-
- );
- },
-});
-
-function mapStateToProps(state) {
- return {
- timeRange: state.timeRange,
- panels: state.panels,
- queryConfigs: state.queryConfigs,
- };
-}
-
-export default connect(mapStateToProps)(PanelList);
diff --git a/ui/src/data_explorer/components/QueryBuilder.js b/ui/src/data_explorer/components/QueryBuilder.js
index 116ca61c80..45079bf862 100644
--- a/ui/src/data_explorer/components/QueryBuilder.js
+++ b/ui/src/data_explorer/components/QueryBuilder.js
@@ -26,8 +26,6 @@ const QueryBuilder = React.createClass({
groupByTime: PropTypes.func.isRequired,
toggleTagAcceptance: PropTypes.func.isRequired,
applyFuncsToField: PropTypes.func.isRequired,
- deletePanel: PropTypes.func.isRequired,
- renamePanel: PropTypes.func.isRequired,
}).isRequired,
setActiveQuery: PropTypes.func.isRequired,
activeQueryID: PropTypes.string,
diff --git a/ui/src/data_explorer/components/RenamePanelModal.js b/ui/src/data_explorer/components/RenamePanelModal.js
deleted file mode 100644
index bffa495cca..0000000000
--- a/ui/src/data_explorer/components/RenamePanelModal.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React, {PropTypes} from 'react';
-
-const RenamePanelModal = React.createClass({
- propTypes: {
- onConfirm: PropTypes.func.isRequired,
- panel: PropTypes.shape({
- id: PropTypes.string.isRequired,
- }),
- },
-
- getInitialState() {
- return {error: null};
- },
-
- componentDidMount() {
- this.refs.name.focus();
- },
-
- render() {
- const {panel} = this.props;
-
- return (
-
-
-
-
-
-
Rename Panel
-
-
- {this.state.error ?
-
{this.state.error}
- : null}
-
-
-
-
-
-
-
-
-
- );
- },
-
- handleConfirm() {
- const name = this.refs.name.value;
-
- if (name === '') {
- this.setState({error: "Name can't be blank"});
- return;
- }
-
- $(`#renamePanelModal-${this.props.panel.id}`).modal('hide'); // eslint-disable-line no-undef
- this.refs.name.value = '';
- this.setState({error: null});
- this.props.onConfirm(name);
- },
-});
-
-export default RenamePanelModal;
diff --git a/ui/src/data_explorer/components/Visualization.js b/ui/src/data_explorer/components/Visualization.js
index 2a0705b70c..74e590c0e9 100644
--- a/ui/src/data_explorer/components/Visualization.js
+++ b/ui/src/data_explorer/components/Visualization.js
@@ -52,7 +52,7 @@ const Visualization = React.createClass({
const isInDataExplorer = true;
return (
- this.panel = p} className={classNames("graph", {active: true})}>
+
{name || "Graph"}
diff --git a/ui/src/data_explorer/components/Visualizations.js b/ui/src/data_explorer/components/Visualizations.js
deleted file mode 100644
index aa577b0d6e..0000000000
--- a/ui/src/data_explorer/components/Visualizations.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, {PropTypes} from 'react';
-import {connect} from 'react-redux';
-import Visualization from './Visualization';
-
-const {shape, string} = PropTypes;
-
-const Visualizations = React.createClass({
- propTypes: {
- timeRange: shape({
- upper: string,
- lower: string,
- }).isRequired,
- panels: shape({}).isRequired,
- queryConfigs: shape({}).isRequired,
- width: string,
- activePanelID: string,
- activeQueryID: string,
- },
-
- render() {
- const {panels, queryConfigs, timeRange, width, activePanelID} = this.props;
-
- const visualizations = Object.keys(panels).map((panelID) => {
- const panel = panels[panelID];
- const queries = panel.queryIds.map((id) => queryConfigs[id]);
- const isActive = panelID === activePanelID;
-
- return
;
- });
-
- return (
-
- {visualizations}
-
- );
- },
-
- getActiveQueryIndex(panelID) {
- const {activeQueryID, activePanelID, panels} = this.props;
- const isPanelActive = panelID === activePanelID;
-
- if (!isPanelActive) {
- return -1;
- }
-
- if (activeQueryID === null) {
- return 0;
- }
-
- return panels[panelID].queryIds.indexOf(activeQueryID);
- },
-});
-
-function mapStateToProps(state) {
- return {
- panels: state.panels,
- queryConfigs: state.queryConfigs,
- };
-}
-
-export default connect(mapStateToProps)(Visualizations);
diff --git a/ui/src/data_explorer/containers/DataExplorer.js b/ui/src/data_explorer/containers/DataExplorer.js
index 9caff7b0d8..a7617c2907 100644
--- a/ui/src/data_explorer/containers/DataExplorer.js
+++ b/ui/src/data_explorer/containers/DataExplorer.js
@@ -84,12 +84,11 @@ const DataExplorer = React.createClass({
});
function mapStateToProps(state) {
- const {timeRange, queryConfigs, dataExplorerUI} = state;
+ const {timeRange, queryConfigs} = state;
return {
timeRange,
queryConfigs,
- activePanel: dataExplorerUI.activePanel,
};
}
diff --git a/ui/src/data_explorer/reducers/dataExplorerUI.js b/ui/src/data_explorer/reducers/dataExplorerUI.js
deleted file mode 100644
index 2140a9eba7..0000000000
--- a/ui/src/data_explorer/reducers/dataExplorerUI.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export default function dataExplorerUI(state = {}, action) {
- switch (action.type) {
- case 'ACTIVATE_PANEL':
- case 'CREATE_PANEL': {
- const {panelID} = action.payload;
- return {...state, activePanel: panelID};
- }
- }
-
- return state;
-}
diff --git a/ui/src/data_explorer/reducers/index.js b/ui/src/data_explorer/reducers/index.js
index 4e4483f3bf..4a0171f2a7 100644
--- a/ui/src/data_explorer/reducers/index.js
+++ b/ui/src/data_explorer/reducers/index.js
@@ -1,11 +1,7 @@
import queryConfigs from './queryConfigs';
-import panels from './panels';
import timeRange from './timeRange';
-import dataExplorerUI from './dataExplorerUI';
export {
queryConfigs,
- panels,
timeRange,
- dataExplorerUI,
};
diff --git a/ui/src/data_explorer/reducers/panels.js b/ui/src/data_explorer/reducers/panels.js
deleted file mode 100644
index 749c46493c..0000000000
--- a/ui/src/data_explorer/reducers/panels.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import update from 'react-addons-update';
-
-export default function panels(state = {}, action) {
- switch (action.type) {
- case 'CREATE_PANEL': {
- const {panelID, queryID} = action.payload;
- return {
- ...state,
- [panelID]: {id: panelID, queryIds: [queryID]},
- };
- }
-
- case 'RENAME_PANEL': {
- const {panelId, name} = action.payload;
- return update(state, {
- [panelId]: {
- name: {$set: name},
- },
- });
- }
-
- case 'DELETE_PANEL': {
- const {panelId} = action.payload;
- return update(state, {$apply: (p) => {
- const panelsCopy = Object.assign({}, p);
- delete panelsCopy[panelId];
- return panelsCopy;
- }});
- }
- }
-
- return state;
-}
diff --git a/ui/src/data_explorer/reducers/queryConfigs.js b/ui/src/data_explorer/reducers/queryConfigs.js
index dfb46e4b3f..370923e4bc 100644
--- a/ui/src/data_explorer/reducers/queryConfigs.js
+++ b/ui/src/data_explorer/reducers/queryConfigs.js
@@ -46,7 +46,6 @@ export default function queryConfigs(state = {}, action) {
return nextState;
}
- case 'CREATE_PANEL':
case 'ADD_KAPACITOR_QUERY':
case 'ADD_QUERY': {
const {queryID, options} = action.payload;
diff --git a/ui/src/localStorage.js b/ui/src/localStorage.js
index 2ab3593653..64c2622d82 100644
--- a/ui/src/localStorage.js
+++ b/ui/src/localStorage.js
@@ -19,13 +19,11 @@ export const loadLocalStorage = () => {
}
};
-export const saveToLocalStorage = ({panels, queryConfigs, timeRange, dataExplorerUI}) => {
+export const saveToLocalStorage = ({queryConfigs, timeRange}) => {
try {
window.localStorage.setItem('state', JSON.stringify({
- panels,
queryConfigs,
timeRange,
- dataExplorerUI,
}));
} catch (err) {
console.error('Unable to save data explorer: ', JSON.parse(err)); // eslint-disable-line no-console
diff --git a/ui/src/style/pages/data-explorer.scss b/ui/src/style/pages/data-explorer.scss
index 743af7d3bb..7a60c4e568 100644
--- a/ui/src/style/pages/data-explorer.scss
+++ b/ui/src/style/pages/data-explorer.scss
@@ -29,7 +29,6 @@
// DE Specific components
@import 'data-explorer/query-builder';
@import 'data-explorer/page-header';
-@import 'data-explorer/panel-builder';
@import 'data-explorer/query-editor';
@import 'data-explorer/raw-text';
@import 'data-explorer/tag-list';
diff --git a/ui/src/style/pages/data-explorer/panel-builder.scss b/ui/src/style/pages/data-explorer/panel-builder.scss
deleted file mode 100644
index d71cf7bc7e..0000000000
--- a/ui/src/style/pages/data-explorer/panel-builder.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.panel-builder {
- width: 399px;
- overflow-x: hidden;
- background: $g1-raven;
- padding: $explorer-page-padding;
- @include gradient-v($g2-kevlar,$g0-obsidian);
-
- &::-webkit-scrollbar {
- display: none;
- }
-
- > .btn {
- margin-bottom: 6px;
- }
-}
\ No newline at end of file