3 * Copyright 2016 RIFT.IO Inc
5 * Licensed under the Apache License, Version 2.0 (the "License");
6 * you may not use this file except in compliance with the License.
7 * You may obtain a copy of the License at
9 * http://www.apache.org/licenses/LICENSE-2.0
11 * Unless required by applicable law or agreed to in writing, software
12 * distributed under the License is distributed on an "AS IS" BASIS,
13 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 * See the License for the specific language governing permissions and
15 * limitations under the License.
18 import React from 'react';
19 import './admin.scss';
20 import SkyquakeComponent from 'widgets/skyquake_container/skyquakeComponent.jsx';
21 import AppHeader from 'widgets/header/header.jsx';
22 import AdminStore from './AdminStore'
23 import ModelStore from './store/ModelStore'
24 import ModelExplorer from './components/ModelExplorer'
26 import 'style/layout.scss';
29 constructor(explorerModel) {
30 this.explorerModel = explorerModel;
31 this.node = explorerModel.dataModel.path.split('/').pop().split(':').pop();
32 this.dataModel = explorerModel.dataModel;
33 if (this.dataModel.data && this.dataModel.schema[this.node].type === 'list' && !Array.isArray(this.dataModel.data)) {
34 this.dataModel.data = [this.dataModel.data];
37 get name() { return this.dataModel.path.split(':').pop() }
38 get type() { return this.dataModel.schema[this.node].type }
39 get value() { return this.dataModel.data }
40 get schema() { return this.dataModel.schema[this.node] }
42 return ModelExplorer.getItemInfo(this.dataModel.schema[this.node].key, item);
44 // explore model methods
45 getElement = path => path.length > 1 ? this.explorerModel.getElement(path.slice(1)) : this;
49 class Admin extends React.Component {
52 this.adminStore = props.flux.stores['AdminStore'] || props.flux.createStore(AdminStore, 'AdminStore');
53 this.adminStore.listen(this.updateAdminState);
54 this.state = { explorerModels: {}, ...this.adminStore.getState() };
58 const storeList = this.state.modelList ? this.state.modelList.map((path, index) => {
59 const store = this.props.flux.stores[path] || this.props.flux.createStore(ModelStore, path, path);
60 store.listen(this.updateModelState);
64 this.setState({ storeList });
67 componentWillUnmount() {
68 this.adminStore.unlisten(this.updateSchema);
69 this.state.storeList.forEach((store) => store.unlisten(this.updateModelState));
72 updateModelState = model => {
73 const explorerModels = Object.assign({}, this.state.explorerModels);
74 explorerModels[model.path] = new Element(ModelExplorer.getExplorerModel(model));
75 this.setState({ explorerModels });
78 updateAdminState = admin => {
79 // if storeList has changed then handle that
82 updateModel = (path, operation, data) => {
83 const store = this.props.flux.stores[path[1]] || this.props.flux.createStore(ModelStore, path[1]);
84 store[operation](path.slice(2), data);
85 return operation === 'delete'; // close column?
88 adminExplorerModel = new class {
94 if (path.length > 2) {
95 return this.admin.state.explorerModels[path[1]].getElement(path.slice(1))
96 } else if (path.length > 1) {
97 return this.admin.state.explorerModels[path[1]]
99 const data = Object.values(this.admin.state.explorerModels);
100 const properties = data.length ?
102 name: e.dataModel.path,
103 type: ((e.dataModel.schema && e.dataModel.schema[e.node].type) || 'loading')
107 name: "Configuration",
122 const { flux } = this.props;
123 const { storeList } = this.state;
124 const modelList = storeList && storeList.map(store => store.getState())
126 <div className="admin-container">
127 <ModelExplorer model={this.adminExplorerModel} onUpdate={this.updateModel} />
132 export default SkyquakeComponent(Admin);