Add setting for limit of displayed labels (#5477)

* Add backend

* Add frontend

* Use the value

* Fix review findings

* Fix review findings

* Fix review findings

* Fix review findings

src/app/backend/settings/api/types.go

@@ -93,6 +93,7 @@ func UnmarshalPinnedResources(data string) (*[]PinnedResource, error) {
 type Settings struct {
 	ClusterName                      string `json:"clusterName"`
 	ItemsPerPage                     int    `json:"itemsPerPage"`
+	LabelsLimit                      int    `json:"labelsLimit"`
 	LogsAutoRefreshTimeInterval      int    `json:"logsAutoRefreshTimeInterval"`
 	ResourceAutoRefreshTimeInterval  int    `json:"resourceAutoRefreshTimeInterval"`
 	DisableAccessDeniedNotifications bool   `json:"disableAccessDeniedNotifications"`
@@ -115,6 +116,7 @@ func Unmarshal(data string) (*Settings, error) {
 var defaultSettings = Settings{
 	ClusterName:                      "",
 	ItemsPerPage:                     10,
+	LabelsLimit:                      3,
 	LogsAutoRefreshTimeInterval:      5,
 	ResourceAutoRefreshTimeInterval:  5,
 	DisableAccessDeniedNotifications: false,

src/app/frontend/common/components/chips/component.ts

@@ -24,6 +24,8 @@ import {
 import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
 import {StringMap} from '@api/backendapi';
 
+import {GlobalSettingsService} from '../../services/global/globalsettings';
+
 import {ChipDialog} from './chipdialog/dialog';
 
 // @ts-ignore
@@ -57,13 +59,19 @@ const MAX_CHIP_VALUE_LENGTH = 63;
 })
 export class ChipsComponent implements OnInit, OnChanges {
   @Input() map: StringMap | string[];
-  @Input() minChipsVisible = 2;
+  @Input() displayAll = false;
   keys: string[];
   isShowingAll = false;
+  private _labelsLimit = 3;
 
-  constructor(private readonly dialog_: MatDialog, private readonly cdr_: ChangeDetectorRef) {}
+  constructor(
+    private readonly _globalSettingsService: GlobalSettingsService,
+    private readonly _matDialog: MatDialog,
+    private readonly _changeDetectorRef: ChangeDetectorRef,
+  ) {}
 
   ngOnInit(): void {
+    this._labelsLimit = this._globalSettingsService.getLabelsLimit();
     this.processMap();
   }
 
@@ -83,15 +91,15 @@ export class ChipsComponent implements OnInit, OnChanges {
     } else {
       this.keys = Object.keys(this.map);
     }
-    this.cdr_.markForCheck();
+    this._changeDetectorRef.markForCheck();
   }
 
   isVisible(index: number): boolean {
-    return this.isShowingAll || index < this.minChipsVisible;
+    return this.isShowingAll || index < this._labelsLimit || this.displayAll;
   }
 
   isAnythingHidden(): boolean {
-    return this.keys.length > this.minChipsVisible;
+    return this.keys.length > this._labelsLimit && !this.displayAll;
   }
 
   toggleView(): void {
@@ -118,6 +126,6 @@ export class ChipsComponent implements OnInit, OnChanges {
         value,
       },
     };
-    this.dialog_.open(ChipDialog, dialogConfig);
+    this._matDialog.open(ChipDialog, dialogConfig);
   }
 }

src/app/frontend/common/components/objectmeta/template.html

@@ -78,7 +78,7 @@ limitations under the License.
              i18n>Labels</div>
         <div value>
           <kd-chips [map]="objectMeta?.labels"
-                    minChipsVisible="4"></kd-chips>
+                    [displayAll]="true"></kd-chips>
         </div>
       </kd-property>
       <kd-property *ngIf="objectMeta?.annotations"
@@ -88,7 +88,7 @@ limitations under the License.
              i18n>Annotations</div>
         <div value>
           <kd-chips [map]="objectMeta?.annotations"
-                    minChipsVisible="4"></kd-chips>
+                    [displayAll]="true"></kd-chips>
         </div>
       </kd-property>
     </div>

src/app/frontend/common/services/global/globalsettings.ts

@@ -31,6 +31,7 @@ export class GlobalSettingsService {
   private settings_: GlobalSettings = {
     itemsPerPage: 10,
     clusterName: '',
+    labelsLimit: 3,
     logsAutoRefreshTimeInterval: 5,
     resourceAutoRefreshTimeInterval: 5,
     disableAccessDeniedNotifications: false,
@@ -98,6 +99,10 @@ export class GlobalSettingsService {
     return this.settings_.itemsPerPage;
   }
 
+  getLabelsLimit(): number {
+    return this.settings_.labelsLimit;
+  }
+
   getLogsAutoRefreshTimeInterval(): number {
     return this.isPageVisible_ ? this.settings_.logsAutoRefreshTimeInterval : 0;
   }

src/app/frontend/resource/cluster/networkpolicy/detail/template.html

@@ -27,7 +27,8 @@ limitations under the License.
       <div key
            i18n>Pod Selector</div>
       <div value>
-        <kd-chips [map]="networkPolicy?.podSelector.matchLabels"></kd-chips>
+        <kd-chips [map]="networkPolicy?.podSelector.matchLabels"
+                  [displayAll]="true"></kd-chips>
       </div>
     </kd-property>
 
@@ -35,7 +36,8 @@ limitations under the License.
       <div key
            i18n>Policy Types</div>
       <div value>
-        <kd-chips [map]="networkPolicy?.policyTypes"></kd-chips>
+        <kd-chips [map]="networkPolicy?.policyTypes"
+                  [displayAll]="true"></kd-chips>
       </div>
     </kd-property>
   </div>

src/app/frontend/resource/cluster/node/detail/template.html

@@ -50,7 +50,8 @@ limitations under the License.
       <div key
            i18n>Addresses</div>
       <div value>
-        <kd-chips [map]="getAddresses()"></kd-chips>
+        <kd-chips [map]="getAddresses()"
+                  [displayAll]="true"></kd-chips>
       </div>
     </kd-property>
     <kd-property *ngIf="node?.taints"
@@ -58,7 +59,8 @@ limitations under the License.
       <div key
            i18n>Taints</div>
       <div value>
-        <kd-chips [map]="getTaints()"></kd-chips>
+        <kd-chips [map]="getTaints()"
+                  [displayAll]="true"></kd-chips>
       </div>
     </kd-property>
   </div>

src/app/frontend/resource/cluster/persistentvolume/detail/source/template.html

@@ -109,7 +109,8 @@ limitations under the License.
         <div key
              i18n>Target World Wide Names</div>
         <div value>
-          <kd-chips [map]="source.fc.targetWWNs"></kd-chips>
+          <kd-chips [map]="source.fc.targetWWNs"
+                    [displayAll]="true"></kd-chips>
         </div>
       </kd-property>
     </ng-container>
@@ -293,7 +294,8 @@ limitations under the License.
         <div key
              i18n>Monitors</div>
         <div value>
-          <kd-chips [map]="source.rbd.monitors"></kd-chips>
+          <kd-chips [map]="source.rbd.monitors"
+                    [displayAll]="true"></kd-chips>
         </div>
       </kd-property>
 

src/app/frontend/resource/cluster/persistentvolume/detail/template.html

@@ -67,7 +67,8 @@ limitations under the License.
       <div key
            i18n>Access modes</div>
       <div value>
-        <kd-chips [map]="persistentVolume.accessModes"></kd-chips>
+        <kd-chips [map]="persistentVolume.accessModes"
+                  [displayAll]="true"></kd-chips>
       </div>
     </kd-property>
   </div>

src/app/frontend/resource/config/persistentvolumeclaim/detail/template.html

@@ -38,7 +38,8 @@ limitations under the License.
       <div key
            i18n>Capacity</div>
       <div value>
-        <kd-chips [map]="persistentVolumeClaim.capacity"></kd-chips>
+        <kd-chips [map]="persistentVolumeClaim.capacity"
+                  [displayAll]="true"></kd-chips>
       </div>
     </kd-property>
     <kd-property *ngIf="persistentVolumeClaim?.accessModes"

src/app/frontend/resource/discovery/service/detail/template.html

@@ -43,7 +43,8 @@ limitations under the License.
       <div key
            i18n>Selector</div>
       <div value>
-        <kd-chips [map]="service?.selector"></kd-chips>
+        <kd-chips [map]="service?.selector"
+                  [displayAll]="true"></kd-chips>
       </div>
     </kd-property>
   </div>

src/app/frontend/resource/workloads/daemonset/detail/template.html

@@ -29,7 +29,8 @@ limitations under the License.
       <div key
            i18n>Selector</div>
       <div value>
-        <kd-chips [map]="daemonSet.labelSelector.matchLabels"></kd-chips>
+        <kd-chips [map]="daemonSet.labelSelector.matchLabels"
+                  [displayAll]="true"></kd-chips>
       </div>
     </kd-property>
 
@@ -37,7 +38,8 @@ limitations under the License.
       <div key
            i18n>Images</div>
       <div value>
-        <kd-chips [map]="daemonSet.containerImages"></kd-chips>
+        <kd-chips [map]="daemonSet.containerImages"
+                  [displayAll]="true"></kd-chips>
       </div>
     </kd-property>
 
@@ -45,7 +47,8 @@ limitations under the License.
       <div key
            i18n>Init images</div>
       <div value>
-        <kd-chips [map]="daemonSet.initContainerImages"></kd-chips>
+        <kd-chips [map]="daemonSet.initContainerImages"
+                  [displayAll]="true"></kd-chips>
       </div>
     </kd-property>
   </div>

src/app/frontend/resource/workloads/deployment/detail/template.html

@@ -70,7 +70,8 @@ limitations under the License.
       <div key
            i18n>Selector</div>
       <div value>
-        <kd-chips [map]="deployment.selector"></kd-chips>
+        <kd-chips [map]="deployment.selector"
+                  [displayAll]="true"></kd-chips>
       </div>
     </kd-property>
   </div>
@@ -253,7 +254,8 @@ limitations under the License.
       <div key
            i18n>Labels</div>
       <div value>
-        <kd-chips [map]="newReplicaSet.objectMeta.labels"></kd-chips>
+        <kd-chips [map]="newReplicaSet.objectMeta.labels"
+                  [displayAll]="true"></kd-chips>
       </div>
     </kd-property>
 
@@ -261,7 +263,8 @@ limitations under the License.
       <div key
            i18n>Images</div>
       <div value>
-        <kd-chips [map]="newReplicaSet.containerImages"></kd-chips>
+        <kd-chips [map]="newReplicaSet.containerImages"
+                  [displayAll]="true"></kd-chips>
       </div>
     </kd-property>
 
@@ -269,7 +272,8 @@ limitations under the License.
       <div key
            i18n>Init images</div>
       <div value>
-        <kd-chips [map]="newReplicaSet.initContainerImages"></kd-chips>
+        <kd-chips [map]="newReplicaSet.initContainerImages"
+                  [displayAll]="true"></kd-chips>
       </div>
     </kd-property>
   </div>

src/app/frontend/resource/workloads/job/detail/template.html

@@ -57,7 +57,8 @@ limitations under the License.
       <div key
            i18n>Images</div>
       <div value>
-        <kd-chips [map]="job.containerImages"></kd-chips>
+        <kd-chips [map]="job.containerImages"
+                  [displayAll]="true"></kd-chips>
       </div>
     </kd-property>
 
@@ -65,7 +66,8 @@ limitations under the License.
       <div key
            i18n>Init images</div>
       <div value>
-        <kd-chips [map]="job.initContainerImages"></kd-chips>
+        <kd-chips [map]="job.initContainerImages"
+                  [displayAll]="true"></kd-chips>
       </div>
     </kd-property>
   </div>

src/app/frontend/settings/global/component.ts

@@ -69,6 +69,7 @@ export class GlobalSettingsComponent implements OnInit, OnDestroy {
 
   onLoad(): void {
     this.settings.itemsPerPage = this.settings_.getItemsPerPage();
+    this.settings.labelsLimit = this.settings_.getLabelsLimit();
     this.settings.clusterName = this.settings_.getClusterName();
     this.settings.logsAutoRefreshTimeInterval = this.settings_.getLogsAutoRefreshTimeInterval();
     this.settings.resourceAutoRefreshTimeInterval = this.settings_.getResourceAutoRefreshTimeInterval();

src/app/frontend/typings/backendapi.ts

@@ -1113,6 +1113,7 @@ export interface ScaleTargetRef {
 export interface GlobalSettings {
   clusterName: string;
   itemsPerPage: number;
+  labelsLimit: number;
   logsAutoRefreshTimeInterval: number;
   resourceAutoRefreshTimeInterval: number;
   disableAccessDeniedNotifications: boolean;