Merge pull request #668 from jumpserver/dev

v2.25.0-rc2

angular.json

@@ -28,14 +28,13 @@
               "src/sass/style.scss",
               "src/styles.css",
               "src/theme.scss",
-              "src/assets/ztree/awesomeStyle/awesome.css",
               "node_modules/asciinema-player/resources/public/css/asciinema-player.css"
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",
               "node_modules/xterm/dist/xterm.js",
-              "src/assets/ztree/jquery.ztree.all.min.js",
-              "src/assets/ztree/jquery.ztree.exhide.min.js",
+              "node_modules/@ztree/ztree_v3/js/jquery.ztree.all.min.js",
+              "node_modules/@ztree/ztree_v3/js/jquery.ztree.exhide.min.js",
               "node_modules/asciinema-player/resources/public/js/asciinema-player.js"
             ]
           },
@@ -86,15 +85,14 @@
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",
               "node_modules/xterm/dist/xterm.js",
-              "src/assets/ztree/jquery.ztree.all.min.js",
-              "src/assets/ztree/jquery.ztree.exhide.min.js"
+              "node_modules/@ztree/ztree_v3/js/jquery.ztree.all.min.js",
+              "node_modules/@ztree/ztree_v3/js/jquery.ztree.exhide.min.js"
             ],
             "styles": [
               "node_modules/animate.css/animate.min.css",
               "node_modules/xterm/dist/xterm.css",
               "src/sass/style.scss",
-              "src/styles.css",
-              "src/assets/ztree/awesomeStyle/awesome.css"
+              "src/styles.css"
             ],
             "assets": [
               "src/assets",

package.json

@@ -55,10 +55,10 @@
     "@ngx-translate/http-loader": "~4.0.0",
     "@types/jquery": "^3.3.6",
     "@types/neffos.js": "^0.1.1",
+    "@ztree/ztree_v3": "^3.5.48",
     "ajv": "^6.12.3",
     "angular-split": "^4.0.0",
     "animate.css": "^3.6.1",
-    "bootstrap": "^4.3.1",
     "buffer": "^4.9.2",
     "codemirror": "^5.42.0",
     "core-js": "^2.5.4",

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

@@ -1,21 +1,18 @@
-<div>
-  <div class="tree-type">
-    <span
-      class="tree-type-banner"
-    >
+<div class="tree-container">
+  <div class="tree-type open-tree" [ngClass]="{'tree-type-asset': assetsTreeHidden}" >
+    <span class="tree-type-banner">
     <div
       class="tree-banner-left"
       (click)="foldTree('assets')"
     >
       <i
-        id="assetsFoldStatus"
         class="fa fa-caret-down tree-icon-rotate"
+        [ngClass]="{'rotate': assetsTreeHidden}"
       ></i>
       <span class="tree-type-banner-label">
         {{ "My assets"| translate }}
       </span>
     </div>
-
       <span
         class="tree-banner-icon-zone"
         [hidden]="assetsTreeHidden"
@@ -50,23 +47,24 @@
     </div>
   </div>
 
-  <div [hidden]="!applicationTreeHasNodes" class="tree-type tree-type-app">
-    <span
-      class="tree-type-banner"
-    >
+  <div
+    class="tree-type"
+    [hidden]="!applicationTreeHasNodes"
+    [ngClass]="{'open-tree': !applicationsTreeHidden}"
+  >
+    <span class="tree-type-banner">
     <div
       class="tree-banner-left"
       (click)="foldTree('applications')"
     >
       <i
-        id="applicationsFoldStatus"
         class="fa fa-caret-down tree-icon-rotate"
+        [ngClass]="{'rotate': applicationsTreeHidden}"
       ></i>
       <span class="tree-type-banner-label">
         {{ "My applications"| translate }}
       </span>
     </div>
-
       <span
         class="tree-banner-icon-zone"
         [hidden]="applicationsTreeHidden"

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

@@ -1,3 +1,9 @@
+.tree-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 .tree-refresh .fa {
   width: 24px;
   height: 24px;
@@ -150,6 +156,8 @@ tr:hover {
   position: relative;
   padding: 5px 10px;
   min-height: 40px;
+  overflow-x: auto;
+  height: calc(100% - 31px);
 }
 
 .tree-type-loading {
@@ -183,9 +191,17 @@ tr:hover {
   right: 6px;
 }
 
-.fold-tree {
-  display: none;
-  animation: all 1s;
+.open-tree {
+  flex: 1;
+}
+
+.tree-type {
+  transition: all .3s;
+}
+
+.tree-type-asset {
+  flex: none;
+  height: initial;
 }
 
 .tree-type .tree-search {

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

@@ -146,7 +146,6 @@ export class ElementAssetTreeComponent implements OnInit {
   applicationTreeHasNodes = false;
   currentOrgID = this._cookie.get('X-JMS-LUNA-ORG') || this._cookie.get('X-JMS-ORG');
 
-
   debouncedOnAssetsNodeClick = _.debounce(this.onAssetsNodeClick, 300, {
     'leading': true,
     'trailing': false
@@ -622,7 +621,5 @@ export class ElementAssetTreeComponent implements OnInit {
 
   foldTree(type: string) {
     this[`${type}TreeHidden`] = !this[`${type}TreeHidden`];
-    const foldStatus = document.getElementById(`${type}FoldStatus`);
-    foldStatus.classList.toggle('rotate');
   }
 }

src/app/elements/left-bar/left-bar.component.scss

@@ -27,7 +27,8 @@ label {
   font-size: 9pt;
   left: 0;
   width: 100%;
-  padding: 1px 20px 0 0;
+  line-height: 30px;
+  padding: 0 20px 0 0;
   border-top: 1px solid #948b8b;
   bottom: 0;
   height: 30px;
@@ -56,9 +57,9 @@ label {
   display: inline-block;
   height: 8px;
   font-size: 13px;
-  padding-top: 2px;
   padding-bottom: 2px;
   color: #d6cbcb;
+  margin: 0;
 }
 
 .ngx-scroll-overlay {

src/app/elements/nav/nav.component.css

@@ -40,6 +40,7 @@
 
 .dropdown {
   position: relative;
+  top: -6px;
   display: inline-block;
 }
 
@@ -73,6 +74,7 @@
 .nav .dropdown-content li {
   /*float: left;*/
   display: flex;
+  line-height: 30px;
 }
 
 .nav .dropdown-content a {
@@ -97,6 +99,10 @@
   width: 100%;
 }
 
+.disabled {
+  display: none;
+}
+
 .dropdown-content li.disabled:hover {
   background-color: black;
 }

src/app/elements/nav/nav.component.ts

@@ -2,7 +2,6 @@ import {Component, Inject, OnInit} from '@angular/core';
 import {HttpService, NavService, LogService, ViewService, SettingService} from '@app/services';
 import {DataStore} from '@app/globals';
 import {CookieService} from 'ngx-cookie-service';
-import {ElementLeftBarComponent} from '@app/elements/left-bar/left-bar.component';
 import {ElementSettingComponent} from '@app/elements/setting/setting.component';
 import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
 import {Nav, View} from '@app/model';
@@ -58,24 +57,6 @@ export class ElementNavComponent implements OnInit {
       id: 'View',
       name: 'View',
       children: [
-        {
-          id: 'HideLeftManager',
-          click: () => {
-            ElementLeftBarComponent.Hide();
-            this.refreshNav();
-          },
-          name: 'Hide left manager',
-          hide: !DataStore.showLeftBar
-        },
-        {
-          id: 'ShowLeftManager',
-          click: () => {
-            ElementLeftBarComponent.Show();
-            this.refreshNav();
-          },
-          name: 'Show left manager',
-          hide: DataStore.showLeftBar
-        },
         {
           id: 'SplitVertical',
           href: '',

src/app/elements/organization/organization.component.ts

@@ -1,36 +1,37 @@
-import {Component, OnInit, Output, EventEmitter} from '@angular/core';
+import {Component, OnInit, Output, EventEmitter, OnDestroy} from '@angular/core';
 import {CookieService} from 'ngx-cookie-service';
-import {HttpService, OrganizationService} from '@app/services';
+import {OrganizationService} from '@app/services';
 import {Organization} from '@app/model';
 
 @Component({
   selector: 'elements-organization',
   templateUrl: './organization.component.html',
   styleUrls: ['./organization.component.scss'],
 })
-export class ElementOrganizationComponent implements OnInit {
-  @Output() private outer = new EventEmitter();
-
+export class ElementOrganizationComponent implements OnInit, OnDestroy {
   currentOrg: Organization = {id: '', name: ''};
   organizations = [];
 
-  constructor(private _http: HttpService,
-              private _cookie: CookieService,
+  constructor(private _cookie: CookieService,
               private _orgSvc: OrganizationService
   ) {}
 
   ngOnInit() {
     const cookieOrgId = this._cookie.get('X-JMS-LUNA-ORG') || this._cookie.get('X-JMS-ORG');
-    this._orgSvc.orgListChange$.subscribe(() => {
-      this.organizations = this._orgSvc.workbenchOrgs;
-      const cookieOrg = this.organizations.find(i => i.id === cookieOrgId);
+    this._orgSvc.orgListChange$.subscribe(async(res) => {
+      this.organizations = res;
+      const cookieOrg = await this.organizations.find(i => i.id === cookieOrgId);
       this.currentOrg = cookieOrg || this.organizations[0] || {};
       if (!cookieOrg) {
         this._orgSvc.switchOrg(this.currentOrg);
       }
     });
   }
 
+  ngOnDestroy() {
+    this._orgSvc.orgListChange$.unsubscribe();
+  }
+
   changeOrg(event) {
     this.currentOrg = event.value;
     this._orgSvc.switchOrg(this.currentOrg);

src/app/services/organization.ts

@@ -4,7 +4,7 @@ import {Organization} from '@app/model';
 
 @Injectable()
 export class OrganizationService {
-  orgListChange$: EventEmitter<void> = new EventEmitter();
+  orgListChange$: EventEmitter<any> = new EventEmitter();
   currentOrgChange$: EventEmitter<void> = new EventEmitter();
   workbenchOrgs = [];
 
@@ -17,6 +17,6 @@ export class OrganizationService {
 
   setWorkbenchOrgs(orgs: Array<Organization>) {
     this.workbenchOrgs = orgs;
-    this.orgListChange$.emit();
+    this.orgListChange$.next(orgs);
   }
 }

src/app/utils/crypto.ts

@@ -5,17 +5,11 @@ import {JSEncrypt} from 'jsencrypt';
 
 
 export function fillKey(key: string): Buffer|string {
-  let keySize = 128;
-  // 如果超过 key 16 位, 最大取 32 位，需要更改填充
-  if (key.length > 16) {
-    key = key.slice(0, 32);
-    keySize = keySize * 2;
+  const KeyLength = 16;
+  if (key.length > KeyLength) {
+    key = key.slice(0, KeyLength);
   }
-  const filledKeyLength = keySize / 8;
-  if (key.length >= filledKeyLength) {
-    return key.slice(0, filledKeyLength);
-  }
-  const filledKey = Buffer.alloc(keySize / 8);
+  const filledKey = Buffer.alloc(KeyLength);
   const keys = Buffer.from(key);
   for (let i = 0; i < keys.length; i++) {
     filledKey[i] = keys[i];