First steps towards revitalizaing the data explorer

Signed-off-by: Will Piers <willpiers@influxdb.com>

mock/mock.go

@@ -22,7 +22,7 @@ func NewExplorationStore(nowFunc func() time.Time) mrfusion.ExplorationStore {
 		ID:        1,
 		Name:      "Ferdinand Magellan",
 		UserID:    1,
-		Data:      `"{"panels":{“123":{"id”:"123","queryIds":[“456"]}},"queryConfigs":{"456":{"id”:"456","database":null,"measurement":null,"retentionPolicy":null,"fields":[],"tags":{},"groupBy":{"time":null,"tags":[]},"areTagsAccepted":true,"rawText":null}}}"`,
+		Data:      `"{\"panels\":{\"123\":{\"id\":\"123\",\"queryIds\":[\"456\"]}},\"queryConfigs\":{\"456\":{\"id\":\"456\",\"database\":null,\"measurement\":null,\"retentionPolicy\":null,\"fields\":[],\"tags\":{},\"groupBy\":{\"time\":null,\"tags\":[]},\"areTagsAccepted\":true,\"rawText\":null}}}"`,
 		CreatedAt: nowFunc(),
 		UpdatedAt: nowFunc(),
 	}

ui/src/CheckDataNodes.js

@@ -25,16 +25,14 @@ const CheckDataNodes = React.createClass({
   getInitialState() {
     return {
       isFetching: true,
-      // A list of 'queryable' data nodes.
-      dataNodes: null,
+      source: null,
     };
   },
 
   componentDidMount() {
-    getSources().then((resp) => {
-      const dataNodes = resp.data.sources;
+    getSources().then(({data: {sources}}) => {
       this.setState({
-        dataNodes,
+        source: sources[0],
         isFetching: false,
       });
     }).catch((err) => {
@@ -48,13 +46,14 @@ const CheckDataNodes = React.createClass({
       return <div className="page-spinner" />;
     }
 
-    const {dataNodes} = this.state;
-    if (!dataNodes || !dataNodes.length) {
+    const {source} = this.state;
+    if (!source || !source.links.proxy) {
+      // this should probably be changed....
       return <NoClusterError />;
     }
 
     return this.props.children && React.cloneElement(this.props.children, Object.assign({}, this.props, {
-      dataNodes,
+      proxyLink: source.links.proxy,
     }));
   },
 });

ui/src/chronograf/actions/view/index.js

@@ -227,13 +227,14 @@ function loadExplorer(explorer) {
   };
 }
 
-export function fetchExplorers({clusterID, explorerID, push}) {
+export function fetchExplorers({sourceLink, userID, explorerID, push}) {
   return (dispatch) => {
     dispatch({type: 'FETCH_EXPLORERS'});
     AJAX({
-      url: `/api/int/v1/explorers?cluster_id=${clusterID}`,
-    }).then((resp) => {
-      const explorers = resp.data.map(parseRawExplorer);
+      url: `/chronograf/v1/sources/1/users/1/explorations`,
+    }).then(({data: {explorations}}) => {
+      debugger;
+      const explorers = explorations.map(parseRawExplorer);
       dispatch(loadExplorers(explorers));
 
       // Create a new explorer session for a user if they don't have any

ui/src/chronograf/containers/App.js

@@ -6,41 +6,31 @@ import DataExplorer from './DataExplorer';
 
 const App = React.createClass({
   propTypes: {
-    dataNodes: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
+    proxyLink: PropTypes.string.isRequired,
     fetchExplorers: PropTypes.func.isRequired,
     router: PropTypes.shape({
       push: PropTypes.func.isRequired,
     }).isRequired,
     params: PropTypes.shape({
-      clusterID: PropTypes.string.isRequired,
       explorerID: PropTypes.string,
     }).isRequired,
   },
 
   componentDidMount() {
-    const {clusterID, explorerID} = this.props.params;
+    const {explorerID} = this.props.params;
     this.props.fetchExplorers({
-      clusterID,
+      sourceLink: 'linkgoesheres', // source.links.self
+      userID: 1, // userID
       explorerID: Number(explorerID),
       push: this.props.router.push,
     });
   },
 
-  childContextTypes: {
-    clusterID: PropTypes.string,
-  },
-
-  getChildContext() {
-    return {
-      clusterID: this.props.params.clusterID,
-    };
-  },
-
   render() {
-    const {clusterID, explorerID} = this.props.params;
+    const {explorerID} = this.props.params;
     return (
       <div className="data-explorer-container">
-        <DataExplorer dataNodes={this.props.dataNodes} clusterID={clusterID} explorerID={Number(explorerID)} />
+        <DataExplorer proxyLink={this.props.proxyLink} explorerID={Number(explorerID)} />
       </div>
     );
   },

ui/src/chronograf/containers/DataExplorer.js

@@ -16,7 +16,7 @@ import {
 
 const DataExplorer = React.createClass({
   propTypes: {
-    dataNodes: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
+    proxyLink: PropTypes.string.isRequired,
     timeRange: PropTypes.shape({
       upper: PropTypes.string,
       lower: PropTypes.string,
@@ -32,11 +32,11 @@ const DataExplorer = React.createClass({
   },
 
   childContextTypes: {
-    dataNodes: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
+    proxyLink: PropTypes.string,
   },
 
   getChildContext() {
-    return {dataNodes: this.props.dataNodes};
+    return {proxyLink: this.props.proxyLink};
   },
 
   getInitialState() {
@@ -52,7 +52,7 @@ const DataExplorer = React.createClass({
   },
 
   render() {
-    const {timeRange, explorers, explorerID, clusterID, setTimeRange, createExplorer, chooseExplorer, deleteExplorer, editExplorer} = this.props;
+    const {timeRange, explorers, explorerID, setTimeRange, createExplorer, chooseExplorer, deleteExplorer, editExplorer} = this.props;
 
     if (explorers === FETCHING) {
       // TODO: page-wide spinner
@@ -71,11 +71,10 @@ const DataExplorer = React.createClass({
           explorers={explorers}
           timeRange={timeRange}
           explorerID={explorerID}
-          clusterID={clusterID}
         />
         <ResizeContainer>
           <PanelBuilder timeRange={timeRange} activePanelID={this.state.activePanelID} setActivePanel={this.handleSetActivePanel} />
-          <Visualizations clusterID={clusterID} timeRange={timeRange} activePanelID={this.state.activePanelID} />
+          <Visualizations timeRange={timeRange} activePanelID={this.state.activePanelID} />
         </ResizeContainer>
       </div>
     );