Merge pull request #122 from jumpserver/dev

Dev

src/app/elements/asset-tree/asset-tree.component.ts

@@ -4,6 +4,7 @@ import {BehaviorSubject, Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 import {ActivatedRoute} from '@angular/router';
 
+import {groupBy} from '@app/utils/common';
 import {AppService, HttpService, LogService, NavService, SettingService, TreeFilterService} from '@app/services';
 import {connectEvt, translate} from '@app/globals';
 import {TreeNode, ConnectEvt} from '@app/model';
@@ -323,7 +324,7 @@ export class ElementAssetTreeComponent implements OnInit, OnDestroy {
     if (!this.assetsTree) {
       return;
     }
-    const searchNode = this.assetsTree.getNodesByFilter((node) => node.id === 'search');
+    let searchNode = this.assetsTree.getNodesByFilter((node) => node.id === 'search');
     if (searchNode) {
       this.assetsTree.removeChildNodes(searchNode[0]);
       this.assetsTree.removeNode(searchNode[0]);
@@ -331,13 +332,13 @@ export class ElementAssetTreeComponent implements OnInit, OnDestroy {
     const treeNodes = this.assetsTree.getNodes();
     if (!keyword) {
       if (treeNodes.length !== 0) {
-        this.assetsTree.showNode(treeNodes[0]);
+        this.assetsTree.showNodes(treeNodes);
       }
       return;
     }
     this.filterAssetCancel$.next(true);
     if (treeNodes.length !== 0) {
-      this.assetsTree.hideNode(treeNodes[0]);
+      this.assetsTree.hideNodes(treeNodes);
     }
     this.loading = true;
     this._http.getMyGrantedAssets(keyword)
@@ -348,10 +349,19 @@ export class ElementAssetTreeComponent implements OnInit, OnDestroy {
         const assetsAmount = nodes.length;
         name = `${name} (${assetsAmount})`;
         const newNode = {id: 'search', name: name, isParent: true, open: true, zAsync: true};
-        const parentNode = this.assetsTree.addNodes(null, newNode)[0];
-        parentNode.zAsync = true;
-        this.assetsTree.addNodes(parentNode, nodes);
-        parentNode.open = true;
+        searchNode = this.assetsTree.addNodes(null, newNode)[0];
+        searchNode.zAsync = true;
+        const nodesGroupByOrg = groupBy(nodes, (node) => {
+          return node.meta.asset.org_name;
+        });
+        nodesGroupByOrg.forEach((item) => {
+          const orgName = item[0].meta.asset.org_name;
+          const orgNodeData = {id: orgName, name: orgName, isParent: true, open: true, zAsync: true};
+          const orgNode = this.assetsTree.addNodes(searchNode, orgNodeData)[0];
+          orgNode.zAsync = true;
+          this.assetsTree.addNodes(orgNode, item);
+        });
+        searchNode.open = true;
       });
     return;
   }

src/app/utils/common.ts

+export function groupBy(array, f) {
+    const groups = {};
+    array.forEach( function( o ) {
+        const group = JSON.stringify( f(o) );
+        groups[group] = groups[group] || [];
+        groups[group].push( o );
+    });
+    return Object.keys(groups).map( function( group ) {
+        return groups[group];
+    });
+}

src/index.html

@@ -7,9 +7,113 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <style>
+    .lds-spinner {
+      display: inline-block;
+      position: relative;
+      width: 64px;
+      height: 64px;
+    }
+
+    .lds-spinner div {
+      transform-origin: 32px 32px;
+      animation: lds-spinner 1.2s linear infinite;
+    }
+
+    .lds-spinner div:after {
+      content: " ";
+      display: block;
+      position: absolute;
+      top: 3px;
+      left: 29px;
+      width: 5px;
+      height: 14px;
+      border-radius: 20%;
+      background: #000;
+    }
+
+    .lds-spinner div:nth-child(1) {
+      transform: rotate(0deg);
+      animation-delay: -1.1s;
+    }
+
+    .lds-spinner div:nth-child(2) {
+      transform: rotate(30deg);
+      animation-delay: -1s;
+    }
+
+    .lds-spinner div:nth-child(3) {
+      transform: rotate(60deg);
+      animation-delay: -0.9s;
+    }
+
+    .lds-spinner div:nth-child(4) {
+      transform: rotate(90deg);
+      animation-delay: -0.8s;
+    }
+
+    .lds-spinner div:nth-child(5) {
+      transform: rotate(120deg);
+      animation-delay: -0.7s;
+    }
+
+    .lds-spinner div:nth-child(6) {
+      transform: rotate(150deg);
+      animation-delay: -0.6s;
+    }
+
+    .lds-spinner div:nth-child(7) {
+      transform: rotate(180deg);
+      animation-delay: -0.5s;
+    }
+
+    .lds-spinner div:nth-child(8) {
+      transform: rotate(210deg);
+      animation-delay: -0.4s;
+    }
+
+    .lds-spinner div:nth-child(9) {
+      transform: rotate(240deg);
+      animation-delay: -0.3s;
+    }
+
+    .lds-spinner div:nth-child(10) {
+      transform: rotate(270deg);
+      animation-delay: -0.2s;
+    }
+
+    .lds-spinner div:nth-child(11) {
+      transform: rotate(300deg);
+      animation-delay: -0.1s;
+    }
+
+    .lds-spinner div:nth-child(12) {
+      transform: rotate(330deg);
+      animation-delay: 0s;
+    }
+
+    @keyframes lds-spinner {
+      0% {
+        opacity: 1;
+      }
+      100% {
+        opacity: 0;
+      }
+    }
+
+    #loading {
+      position: fixed;
+      top: calc(50% - 32px);
+      left: calc(50% - 32px);
+    }
+  </style>
 </head>
 <body>
-<app-root>加载中...</app-root>
+<app-root>
+  <div id="loading">
+    <div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+  </div>
+</app-root>
 <span id="marker" style="display: none;font-size: 14px">marker</span>
 </body>
 <script>