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 ( -
-
  Create Graph
- -
- ); - }, -}); - -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 ( - - ); - }, - - 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