fix: fix the long long name

mock.py

@@ -125,7 +125,7 @@ def asset_groups_assets():
     },
     {
       "id": 1,
-      "name": "Default",
+      "name": "Default long name long name long name",
       "comment": "Default asset group",
       "assets_granted": [
         {
@@ -157,7 +157,7 @@ def asset_groups_assets():
         },
         {
           "id": 44,
-          "hostname": "192.168.1.6",
+          "hostname": "192.168.1.6 long name long name long name long name long name",
           "ip": "192.168.2.6",
           "port": 22,
           "platform": "Linux",

src/app/ControlPage/cleftbar/cleftbar.component.css

@@ -42,6 +42,9 @@ label {
   list-style: none;
   cursor: pointer;
   color: #ffffff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .filetree label {

src/app/ControlPage/cleftbar/cleftbar.component.html

@@ -7,9 +7,10 @@
   <ul class="filetree">
     <li *ngFor="let hostGroup of HostGroups | SearchFilter: q; let i = index ">
       <input type="checkbox" id="hostgroup-{{i}}">
-      <label for="hostgroup-{{i}}">{{hostGroup.name}}</label>
+      <label for="hostgroup-{{i}}" matTooltip="{{hostGroup.name}}" [matTooltipPosition]="TooltipPosition">{{hostGroup.name}}</label>
       <ul [ngClass]="{'insearch': q }">
-        <li *ngFor="let host of hostGroup.assets_granted | SearchFilter: q" (click)="Connect(host)" (contextmenu)="onRightClick($event)">
+        <li *ngFor="let host of hostGroup.assets_granted | SearchFilter: q" (click)="Connect(host)"
+            (contextmenu)="onRightClick($event)" matTooltip="{{host.hostname}}" [matTooltipPosition]="TooltipPosition">
           <i class="fa" [ngClass]="'fa-'+(host.platform||'undefined').toLowerCase()" id="fa-{{i}}"></i>
           {{host.hostname}}
         </li>

src/app/ControlPage/cleftbar/cleftbar.component.ts

@@ -47,6 +47,7 @@ export class CleftbarComponent implements OnInit {
   event: MouseEvent;
   clientX = 0;
   clientY = 0;
+  TooltipPosition = 'above';
 
   static Reload() {
   }