@riil-frontend/component-topology 0.2.2 → 0.2.3

package/demo/2/346/213/223/346/211/221/344/270/255/345/277/203/js/TopoCenterViewer.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import request from './request';
+import {MenuButton} from '@alifd/next';
+// import {TopologyViewer, TitleBar, TitleWidget} from '@riil-frontend/component-topology/es/topoCenter/viewer';
+import {TitleBar, TitleWidget, TopologyViewer} from '../../../src/topoCenter/viewer';
+
+const {Item} = MenuButton;
+
+function NetworkTopologyViewer(props) {
+
+    const titleBar = (topo) => {
+        return (
+            <TitleBar
+                topo={topo}
+            >
+                <TopoTreeSelect topo={topo}/>
+            </TitleBar>
+        )
+    };
+
+    return (
+        <div style={{width: '100%', height: '400px'}}>
+            <TopologyViewer
+                request={request}
+                titleBar={titleBar}
+            />
+        </div>
+    );
+}
+
+function TopoTreeSelect(props) {
+    const {topo} = props;
+
+    const topoState = topo.store.useModelState('topoMod');
+    const topoTreeState = topo.store.useModelState('topoTreeMod');
+
+    const {
+        loading,
+        currentTopo: { id: topoId, name } = {},
+    } = topoState;
+    const {
+        treeData,
+    } = topoTreeState;
+
+    const onSelect = (selectedKeys, item, extra) => {
+        // 避免取消选择
+        if (!selectedKeys.length) {
+            return;
+        }
+
+        topo.openTopo({
+            id: extra.key,
+            name: extra.label,
+        })
+    };
+
+    const menu = (treeData.length ? treeData[0].children : [])
+        .map(item => <Item key={item.id}>{item.name}</Item>);
+
+    return (
+        <div>
+            <MenuButton
+                selectedKeys={[`${topoId}`]}
+                selectMode="single"
+                text
+                label={<TitleWidget topo={topo} />}
+                onSelect={onSelect}
+            >
+                {menu}
+            </MenuButton>
+        </div>
+    )
+}
+
+export default NetworkTopologyViewer;

package/demo/2/346/213/223/346/211/221/344/270/255/345/277/203/js/createMockRequest.js

@@ -0,0 +1,38 @@
+import axios from 'axios';
+
+
+export default function (options) {
+    const request = axios.create({
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        ...options,
+    });
+
+    // request.defaults.baseURL = location.href.replace('/build/index.html','/')+`demo`;
+    // request.defaults.baseURL = '/demo/2拓扑中心/js/mock';
+    request.interceptors.request.use(function (config) {
+        // 在发送请求之前做些什么
+        //console.log(config)
+        location.href.replace()
+        // config.url = config.url + '.json'
+        //console.log(config)
+        config.method = 'get'
+        return config;
+    }, function (error) {
+        // 对请求错误做些什么
+        return Promise.reject(error);
+    });
+
+// 添加响应拦截器
+    request.interceptors.response.use(function (response) {
+        // 对响应数据做点什么
+
+        return response.data;
+    }, function (error) {
+        // 对响应错误做点什么
+        return Promise.reject(error);
+    });
+
+    return request;
+}