[Update] 添加缓存机制

src/app/app.service.ts

@@ -14,7 +14,6 @@ import {DataStore, User, Browser, i18n} from './globals';
 import {environment} from '../environments/environment';
 import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
 import {NGXLogger} from 'ngx-logger';
-import {HostGroup, Node} from './pages/control/cleftbar/cleftbar.component';
 import * as UUID from 'uuid-js/lib/uuid.js';
 
 declare function unescape(s: string): string;
@@ -67,7 +66,11 @@ export class HttpService {
   }
 
   get_my_granted_nodes() {
-    return this.http.get<Array<Node>>('/api/perms/v1/user/nodes-assets/tree/');
+    return this.http.get<Array<Node>>('/api/perms/v1/user/nodes-assets/tree/?cache_policy=1');
+  }
+
+  refresh_my_granted_nodes() {
+    return this.http.get<Array<Node>>('/api/perms/v1/user/nodes-assets/tree/?cache_policy=2');
   }
 
   get_guacamole_token(user_id: string, authToken: string) {

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

+#ztree .fa {
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  background-size: 18px;
+  background-position: 3px 3px;
+  margin-left: -30px;
+  position: absolute;
+  margin-right: 10px;
+  text-align: center;
+  display: inline-block;
+  font: normal normal normal 14px/1 FontAwesome !important;
+}
 
 .ztree {
   height: 100%;
   background-color: inherit;
 }
 
-
 .basicContext {
     background: #000;
     border: none;
@@ -38,19 +50,6 @@
     margin: 0;
 }
 
-.fa {
-    width: 24px;
-    height: 24px;
-    line-height: 24px;
-    background-size: 18px;
-    background-position: 3px 3px;
-    margin-left: -30px;
-    position: absolute;
-    margin-right: 10px;
-    text-align: center;
-    display: inline-block;
-}
-
 .basicContext__item {
   cursor: pointer;
   padding: 0 6px;
@@ -61,7 +60,7 @@
     padding: 0 35px;
     text-decoration: none;
     width: auto;
-  opacity: 1;
+    opacity: 1;
     white-space: nowrap;
     line-height: 24px;
     text-shadow: none;
@@ -103,3 +102,4 @@ tr:hover {
 .basicContext__data {
   padding: 0 6px;
 }
+

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

-import {Component, Input, OnInit, Inject, SimpleChanges, OnChanges, ElementRef, ViewChild} from '@angular/core';
+import {Component, Input, Output, OnInit, Inject, SimpleChanges, OnChanges, ElementRef, ViewChild, EventEmitter} from '@angular/core';
 import {NavList, View} from '../../pages/control/control/control.component';
 import {AppService, LogService} from '../../app.service';
 import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
 import {FormControl, Validators} from '@angular/forms';
 import {BehaviorSubject} from 'rxjs/BehaviorSubject';
-import {Router, ActivatedRoute, Params} from '@angular/router';
+import {ActivatedRoute} from '@angular/router';
 
 declare var $: any;
 
@@ -17,6 +17,7 @@ export class ElementAssetTreeComponent implements OnInit, OnChanges {
   @Input() Data: any;
   @Input() query: string;
   @Input() searchEvt$: BehaviorSubject<string>;
+  @Output() treeRefresh = new EventEmitter<boolean>();
   @ViewChild('rMenu') rMenu: ElementRef;
   nodes = [];
   setting = {
@@ -87,6 +88,10 @@ export class ElementAssetTreeComponent implements OnInit, OnChanges {
   draw() {
     $.fn.zTree.init($('#ztree'), this.setting, this.Data);
     this.zTree = $.fn.zTree.getZTreeObj('ztree');
+    this.rootNodeAddDom(this.zTree, () => {
+      this.zTree.destroy();
+      this.treeRefresh.emit(true);
+    });
 
     this.activatedRoute.queryParams.subscribe(params => {
         const login_to = params['login_to'];
@@ -101,6 +106,17 @@ export class ElementAssetTreeComponent implements OnInit, OnChanges {
     });
   }
 
+  rootNodeAddDom(ztree, callback) {
+    const refreshIcon = '<a id="tree-refresh"><i class="fa fa-refresh"></i></a>';
+    const rootNode = ztree.getNodes()[0];
+    const $rootNodeRef = $('#' + rootNode.tId + '_a');
+    $rootNodeRef.after(refreshIcon);
+    const refreshIconRef = $('#tree-refresh');
+    refreshIconRef.bind('click', function () {
+        callback();
+    });
+  }
+
   showRMenu(left, top) {
     this.pos.left = left + 'px';
     this.pos.top = top + 'px';

src/app/pages/control/cleftbar/cleftbar.component.html

 <div class="sidebar" fxLayout="column" ngxSplit="column">
   <div fxflex="0 0 30px" class="search">
-    <input #keyword id="keyword" class="left-search" placeholder=" {{'Search'| trans }} ..." maxlength="2048" name="q"
+    <input #keyword id="keyword" class="left-search"
+           placeholder=" {{'Search'| trans }} ..."
+           maxlength="2048"
+           name="q"
            autocomplete="off"
            title="Search"
            type="text" tabindex="1" spellcheck="false" [(ngModel)]="q">
   </div>
   <div class="overflow ngx-scroll-overlay" fxflex="1 1 90%">
-    <elements-asset-tree [Data]="zNodes" [query]="q"></elements-asset-tree>
+    <elements-asset-tree [Data]="zNodes" [query]="q" (treeRefresh)="refreshGrantNodes()"></elements-asset-tree>
   </div>
 
   <div class="footer-version" fxflex="0 0 26px">

src/app/pages/control/cleftbar/cleftbar.component.ts

@@ -14,16 +14,9 @@ import {DataStore} from '../../../globals';
 import {version} from '../../../../environments/environment';
 import {NavList, View} from '../control/control.component';
 import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
-import {FormControl, Validators} from '@angular/forms';
 import {ElementServerMenuComponent} from '../../../elements/server-menu/server-menu.component';
 import {DialogService} from '../../../elements/dialog/dialog.service';
-import {Observable} from '../../../../../node_modules/rxjs';
 
-export interface HostGroup {
-  name: string;
-  id: string;
-  children: Array<Host>;
-}
 
 export interface Node {
   id: string;
@@ -51,7 +44,6 @@ export class Host {
 })
 export class CleftbarComponent implements OnInit {
   DataStore = DataStore;
-  HostGroups: Array<HostGroup>;
   zNodes: any;
   version = version;
   q: string;
@@ -103,17 +95,12 @@ export class CleftbarComponent implements OnInit {
               public _dialog: MatDialog,
               private _layer: DialogService) {
     this._logger.log('nav.ts:NavComponent');
-    // this._appService.getnav()
   }
 
   ngOnInit() {
     this._http.get_my_granted_nodes()
       .subscribe(response => {
         this.zNodes = response;
-        // this.HostGroups = response;
-        // if (!DataStore.autologin) {
-        //   this.autologin();
-        // }
       });
   }
 
@@ -121,10 +108,15 @@ export class CleftbarComponent implements OnInit {
     this._search.Search(q);
   }
 
+  refreshGrantNodes() {
+    this._http.refresh_my_granted_nodes()
+      .subscribe(response => {
+        this.zNodes = response;
+      });
+  }
+
   onRightClick(event: MouseEvent): void {
     this.clientX = event.clientX;
     this.clientY = event.clientY;
-    // console.log(this.clientX, this.clientY);
-    // this._menu.contextmenu(this.clientY, this.clientX);
   }
 }

src/styles.css

@@ -117,3 +117,9 @@ body ::-webkit-scrollbar-thumb {
   font-weight: bolder;
 
 }
+
+#ztree .fa {
+  text-align: center;
+  display: inline-block;
+  font: normal normal normal 14px/1 FontAwesome !important;
+}