feat(container): add api services tree

archguard · Mar 30, 2022 · 5d87764 · 5d87764
1 parent 0b4de12
commit 5d87764
Showing 1 changed file with 18 additions and 40 deletions.
diff --git a/archguard/src/pages/system/systemSummary/Summary/components/ApiResourceTree.tsx b/archguard/src/pages/system/systemSummary/Summary/components/ApiResourceTree.tsx
@@ -7,40 +7,24 @@ interface ApiResourceTreeProps {
 }
 
 const ApiResourceTree = (props: ApiResourceTreeProps) => {
-  const [ dataSource ] = useState(props.dataSource);
-  const [data] = useState({
-    name: 'flare',
-    children: [
-      {
-        name: 'data',
-        children: [
-          {
-            name: 'converters',
-            children: [
-              { name: 'Converters', value: 721 },
-              { name: 'DelimitedTextConverter', value: 4294 }
-            ]
-          },
-          {
-            name: 'DataUtil',
-            value: 3322
-          }
-        ]
-      }]});
+  const [dataSource] = useState(props.dataSource);
   const [options, setOptions] = useState(null)
 
   useEffect(() => {
+    if (!dataSource) {
+      return
+    }
+
     let apiMap = {}
     for (let element of dataSource) {
       apiMap[element.sourceUrl] = {
         name: element.sourceUrl,
-        value: 0
+        value: element.className + "." + element.methodName
       }
     }
 
-    console.log(apiMap)
-    // let hierarchy = CodeSupport.hierarchy(apiMap);
-    // console.log(hierarchy)
+    let dataMap = Object.values(apiMap)
+    let hierarchy = CodeSupport.hierarchy(dataMap).children[0];
 
     setOptions({
       tooltip: {
@@ -50,25 +34,17 @@ const ApiResourceTree = (props: ApiResourceTreeProps) => {
       series: [
         {
           type: 'tree',
-          id: 0,
-          name: 'tree1',
-          data: [data],
-          top: '10%',
-          left: '8%',
-          bottom: '22%',
+          data: [hierarchy],
+          top: '1%',
+          left: '7%',
+          bottom: '1%',
           right: '20%',
           symbolSize: 7,
-          edgeShape: 'polyline',
-          edgeForkPosition: '63%',
-          initialTreeDepth: 3,
-          lineStyle: {
-            width: 2
-          },
           label: {
-            backgroundColor: '#fff',
             position: 'left',
             verticalAlign: 'middle',
-            align: 'right'
+            align: 'right',
+            fontSize: 12
           },
           leaves: {
             label: {
@@ -86,10 +62,12 @@ const ApiResourceTree = (props: ApiResourceTreeProps) => {
         }
       ]
     })
-  }, data, setOptions)
+  }, dataSource, setOptions)
 
   return (
-    options && <ReactECharts option={ options }/>
+    options && <ReactECharts
+      option={ options }
+      style={ { height: '960px', width: '100%' } }/>
   )
 }