Improvements for colorblindness and fix external cluster list flicker…

…ing (#4142)

* Add new icons

* Update cluster health statuses

* Update node health statuses

* Update machine deployment health statuses

* Further updates

* Rename file

* Update warning icon

* Adjust running and pending icons

* Adjust other icons

* Fix external clusters sort

* Remove duplicated class

* Renames

* Format files

* Fix e2e tests

cypress/integration/providers/alibaba.spec.ts

@@ -82,7 +82,7 @@ describe('Alibaba Provider', () => {
 
   it('should wait for the cluster to be ready', () => {
     ClustersPage.getClusterName().should(Condition.Contain, clusterName);
-    ClustersPage.getClusterStatus().should(Condition.HaveClass, 'km-success-bg');
+    ClustersPage.getClusterStatus().should(Condition.HaveClass, 'km-icon-running');
   });
 
   it('should delete created cluster', () => {

cypress/integration/providers/anexia.spec.ts

@@ -82,7 +82,7 @@ describe('Anexia Provider', () => {
 
   it('should wait for the cluster to be ready', () => {
     ClustersPage.getClusterName().should(Condition.Contain, clusterName);
-    ClustersPage.getClusterStatus().should(Condition.HaveClass, 'km-success-bg');
+    ClustersPage.getClusterStatus().should(Condition.HaveClass, 'km-icon-running');
   });
 
   it('should delete created cluster', () => {

cypress/integration/providers/aws.spec.ts

@@ -82,7 +82,7 @@ describe('AWS Provider', () => {
 
   it('should wait for the cluster to be ready', () => {
     ClustersPage.getClusterName().should(Condition.Contain, clusterName);
-    ClustersPage.getClusterStatus().should(Condition.HaveClass, 'km-success-bg');
+    ClustersPage.getClusterStatus().should(Condition.HaveClass, 'km-icon-running');
   });
 
   it('should delete created cluster', () => {

cypress/integration/providers/azure.spec.ts

@@ -82,7 +82,7 @@ describe('Azure Provider', () => {
 
   it('should wait for the cluster to be ready', () => {
     ClustersPage.getClusterName().should(Condition.Contain, clusterName);
-    ClustersPage.getClusterStatus().should(Condition.HaveClass, 'km-success-bg');
+    ClustersPage.getClusterStatus().should(Condition.HaveClass, 'km-icon-running');
   });
 
   it('should delete created cluster', () => {

cypress/integration/providers/equinix.spec.ts

@@ -82,7 +82,7 @@ describe('Equinix Metal Provider', () => {
 
   it('should wait for the cluster to be ready', () => {
     ClustersPage.getClusterName().should(Condition.Contain, clusterName);
-    ClustersPage.getClusterStatus().should(Condition.HaveClass, 'km-success-bg');
+    ClustersPage.getClusterStatus().should(Condition.HaveClass, 'km-icon-running');
   });
 
   it('should delete created cluster', () => {

cypress/integration/providers/gcp.spec.ts

@@ -82,7 +82,7 @@ describe('Google Cloud Platform Provider', () => {
 
   it('should wait for the cluster to be ready', () => {
     ClustersPage.getClusterName().should(Condition.Contain, clusterName);
-    ClustersPage.getClusterStatus().should(Condition.HaveClass, 'km-success-bg');
+    ClustersPage.getClusterStatus().should(Condition.HaveClass, 'km-icon-running');
   });
 
   it('should delete created cluster', () => {

cypress/integration/providers/hetzner.spec.ts

@@ -82,7 +82,7 @@ describe('Hetzner Provider', () => {
 
   it('should wait for the cluster to be ready', () => {
     ClustersPage.getClusterName().should(Condition.Contain, clusterName);
-    ClustersPage.getClusterStatus().should(Condition.HaveClass, 'km-success-bg');
+    ClustersPage.getClusterStatus().should(Condition.HaveClass, 'km-icon-running');
   });
 
   it('should delete created cluster', () => {

cypress/integration/providers/kubeadm.spec.ts

@@ -71,7 +71,7 @@ describe('kubeAdm Provider', () => {
 
   it('should wait for the cluster to be ready', () => {
     ClustersPage.getClusterName().should(Condition.Contain, clusterName);
-    ClustersPage.getClusterStatus().should(Condition.HaveClass, 'km-success-bg');
+    ClustersPage.getClusterStatus().should(Condition.HaveClass, 'km-icon-running');
   });
 
   it('should delete created cluster', () => {

cypress/integration/providers/kubevirt.spec.ts

@@ -86,7 +86,7 @@ describe('KubeVirt Provider', () => {
 
   it('should wait for the cluster to be ready', () => {
     ClustersPage.getClusterName().should(Condition.Contain, clusterName);
-    ClustersPage.getClusterStatus().should(Condition.HaveClass, 'km-success-bg');
+    ClustersPage.getClusterStatus().should(Condition.HaveClass, 'km-icon-running');
   });
 
   it('should delete created cluster', () => {

cypress/integration/providers/openstack.spec.ts

@@ -82,7 +82,7 @@ describe('OpenStack Provider', () => {
 
   it('should wait for the cluster to be ready', () => {
     ClustersPage.getClusterName().should(Condition.Contain, clusterName);
-    ClustersPage.getClusterStatus().should(Condition.HaveClass, 'km-success-bg');
+    ClustersPage.getClusterStatus().should(Condition.HaveClass, 'km-icon-running');
   });
 
   it('should delete created cluster', () => {

cypress/integration/providers/vsphere.spec.ts

@@ -82,7 +82,7 @@ describe('vSphere Provider', () => {
 
   it('should wait for the cluster to be ready', () => {
     ClustersPage.getClusterName().should(Condition.Contain, clusterName);
-    ClustersPage.getClusterStatus().should(Condition.HaveClass, 'km-success-bg');
+    ClustersPage.getClusterStatus().should(Condition.HaveClass, 'km-icon-running');
   });
 
   it('should delete created cluster', () => {

cypress/integration/stories/opa.spec.ts

@@ -125,7 +125,7 @@ describe('OPA Story', () => {
   });
 
   it('should verify that opa is enabled', () => {
-    ClustersPage.getOPAInfoElement().find('i').should(Condition.HaveClass, 'km-icon-running');
+    ClustersPage.getOPAInfoElement().find('i').should(Condition.HaveClass, 'km-icon-check');
   });
 
   it('should verify that the opa constraints tab is visible', () => {
@@ -138,7 +138,7 @@ describe('OPA Story', () => {
 
   it('should wait for initial machine deployment to be created', () => {
     ClustersPage.getMachineDeploymentList().should(Condition.Contain, initialMachineDeploymentName);
-    ClustersPage.getMachineDeploymentList().find('i').should(Condition.HaveClass, 'km-success-bg');
+    ClustersPage.getMachineDeploymentList().find('i').should(Condition.HaveClass, 'km-icon-running');
   });
 
   it('should switch to opa constraint tab', () => {

src/app/backup/details/automatic-backup/backups/component.ts

@@ -27,7 +27,7 @@ import {BackupStatus, BackupStatusPhaseCompleted} from '@shared/entity/backup';
 import {View} from '@shared/entity/common';
 import {Member} from '@shared/entity/member';
 import {GroupConfig} from '@shared/model/Config';
-import {MemberUtils, Permission} from '@shared/utils/member-utils/member-utils';
+import {MemberUtils, Permission} from '@shared/utils/member';
 import _ from 'lodash';
 import {Subject} from 'rxjs';
 import {filter, switchMap, take, takeUntil} from 'rxjs/operators';

src/app/backup/details/automatic-backup/component.ts

@@ -29,9 +29,7 @@ import {View} from '@shared/entity/common';
 import {Member} from '@shared/entity/member';
 import {Project} from '@shared/entity/project';
 import {GroupConfig} from '@shared/model/Config';
-import {BackupHealthStatus} from '@shared/utils/health-status/backup-health-status';
-import {HealthStatus} from '@shared/utils/health-status/health-status';
-import {MemberUtils, Permission} from '@shared/utils/member-utils/member-utils';
+import {MemberUtils, Permission} from '@shared/utils/member';
 import {Subject} from 'rxjs';
 import {filter, map, switchMap, take, takeUntil} from 'rxjs/operators';
 
@@ -101,15 +99,6 @@ export class AutomaticBackupDetailsComponent implements OnInit, OnDestroy {
     this._unsubscribe.complete();
   }
 
-  getStatus(backup: EtcdBackupConfig): HealthStatus {
-    const condition =
-      backup.status?.conditions?.find(
-        condition => condition.type === EtcdBackupConfigConditionType.EtcdBackupConfigConditionSchedulingActive
-      ) || ({} as EtcdBackupConfigCondition);
-
-    return BackupHealthStatus.getHealthStatus(backup, condition);
-  }
-
   delete(backup: EtcdBackupConfig): void {
     const config: MatDialogConfig = {
       data: {

src/app/backup/details/snapshot/component.ts

@@ -32,11 +32,10 @@ import {View} from '@shared/entity/common';
 import {Member} from '@shared/entity/member';
 import {Project} from '@shared/entity/project';
 import {GroupConfig} from '@shared/model/Config';
-import {BackupHealthStatus} from '@shared/utils/health-status/backup-health-status';
-import {HealthStatus} from '@shared/utils/health-status/health-status';
-import {MemberUtils, Permission} from '@shared/utils/member-utils/member-utils';
+import {MemberUtils, Permission} from '@shared/utils/member';
 import {Subject} from 'rxjs';
 import {filter, map, switchMap, take, takeUntil} from 'rxjs/operators';
+import {getBackupHealthStatus, HealthStatus} from '@shared/utils/health-status';
 
 @Component({
   selector: 'km-snapshot-details',
@@ -110,7 +109,7 @@ export class SnapshotDetailsComponent implements OnInit, OnDestroy {
         condition => condition.type === EtcdBackupConfigConditionType.EtcdBackupConfigConditionSchedulingActive
       ) || ({} as EtcdBackupConfigCondition);
 
-    return BackupHealthStatus.getHealthStatus(backup, condition);
+    return getBackupHealthStatus(backup, condition);
   }
 
   delete(backup: EtcdBackupConfig): void {

src/app/backup/list/automatic-backup/component.ts

@@ -31,11 +31,10 @@ import {View} from '@shared/entity/common';
 import {Member} from '@shared/entity/member';
 import {Project} from '@shared/entity/project';
 import {GroupConfig} from '@shared/model/Config';
-import {BackupHealthStatus} from '@shared/utils/health-status/backup-health-status';
-import {HealthStatus} from '@shared/utils/health-status/health-status';
-import {MemberUtils, Permission} from '@shared/utils/member-utils/member-utils';
+import {MemberUtils, Permission} from '@shared/utils/member';
 import {Subject} from 'rxjs';
 import {filter, switchMap, take, takeUntil} from 'rxjs/operators';
+import {getBackupHealthStatus, HealthStatus} from '@shared/utils/health-status';
 
 @Component({
   selector: 'km-automatic-backup-list',
@@ -133,7 +132,7 @@ export class AutomaticBackupListComponent implements OnInit, OnDestroy {
         condition => condition.type === EtcdBackupConfigConditionType.EtcdBackupConfigConditionSchedulingActive
       ) || ({} as EtcdBackupConfigCondition);
 
-    return BackupHealthStatus.getHealthStatus(backup, condition);
+    return getBackupHealthStatus(backup, condition);
   }
 
   delete(backup: EtcdBackupConfig): void {

src/app/backup/list/automatic-backup/template.html

@@ -40,7 +40,7 @@
         <td mat-cell
             *matCellDef="let element">
           <i [matTooltip]="getStatus(element).message"
-             [ngClass]="getStatus(element).color"
+             [ngClass]="getStatus(element).icon"
              class="km-vertical-center"></i>
         </td>
       </ng-container>

src/app/backup/list/restore/component.ts

@@ -26,7 +26,7 @@ import {View} from '@shared/entity/common';
 import {Member} from '@shared/entity/member';
 import {Project} from '@shared/entity/project';
 import {GroupConfig} from '@shared/model/Config';
-import {MemberUtils, Permission} from '@shared/utils/member-utils/member-utils';
+import {MemberUtils, Permission} from '@shared/utils/member';
 import {Subject} from 'rxjs';
 import {filter, switchMap, take, takeUntil} from 'rxjs/operators';
 

src/app/backup/list/snapshot/component.ts

@@ -30,11 +30,10 @@ import {View} from '@shared/entity/common';
 import {Member} from '@shared/entity/member';
 import {Project} from '@shared/entity/project';
 import {GroupConfig} from '@shared/model/Config';
-import {BackupHealthStatus} from '@shared/utils/health-status/backup-health-status';
-import {HealthStatus} from '@shared/utils/health-status/health-status';
-import {MemberUtils, Permission} from '@shared/utils/member-utils/member-utils';
+import {MemberUtils, Permission} from '@shared/utils/member';
 import {Subject} from 'rxjs';
 import {filter, switchMap, take, takeUntil} from 'rxjs/operators';
+import {getBackupHealthStatus, HealthStatus} from '@shared/utils/health-status';
 
 @Component({
   selector: 'km-snapshot-list',
@@ -127,7 +126,7 @@ export class SnapshotListComponent implements OnInit, OnDestroy {
       condition = backup.status.conditions[0];
     }
 
-    return BackupHealthStatus.getHealthStatus(backup, condition);
+    return getBackupHealthStatus(backup, condition);
   }
 
   delete(backup: EtcdBackupConfig): void {

src/app/cluster-template/component.ts

@@ -25,7 +25,7 @@ import {View} from '@shared/entity/common';
 import {Member} from '@shared/entity/member';
 import {Project} from '@shared/entity/project';
 import {GroupConfig} from '@shared/model/Config';
-import {MemberUtils, Permission} from '@shared/utils/member-utils/member-utils';
+import {MemberUtils, Permission} from '@shared/utils/member';
 import _ from 'lodash';
 import {Subject} from 'rxjs';
 import {distinctUntilChanged, filter, switchMap, take, takeUntil} from 'rxjs/operators';

src/app/cluster/details/cluster/cluster-delete-confirmation/style.scss

@@ -20,6 +20,6 @@
   margin-top: 8px;
 }
 
-.km-icon-error {
+.km-icon-warning {
   margin: 0 14.4px 0 0;
 }

src/app/cluster/details/cluster/cluster-delete-confirmation/template.html

@@ -54,7 +54,7 @@
     <div class="km-dialog-warning"
          *ngIf="showWarning()"
          fxLayoutAlign=" center">
-      <i class="km-icon-error"></i>
+      <i class="km-icon-warning"></i>
       <div>Deactivating clean up may result in leftover resources at your provider</div>
     </div>
   </form>

src/app/cluster/details/cluster/component.ts

@@ -51,9 +51,8 @@ import {Node} from '@shared/entity/node';
 import {Constraint, GatekeeperConfig} from '@shared/entity/opa';
 import {SSHKey} from '@shared/entity/ssh-key';
 import {Config, GroupConfig} from '@shared/model/Config';
-import {AdmissionPlugin, AdmissionPluginUtils} from '@shared/utils/admission-plugin-utils/admission-plugin-utils';
-import {ClusterHealthStatus} from '@shared/utils/health-status/cluster-health-status';
-import {MemberUtils, Permission} from '@shared/utils/member-utils/member-utils';
+import {AdmissionPlugin, AdmissionPluginUtils} from '@shared/utils/admission-plugin';
+import {MemberUtils, Permission} from '@shared/utils/member';
 import _ from 'lodash';
 import {combineLatest, iif, Observable, of, Subject} from 'rxjs';
 import {filter, map, switchMap, take, takeUntil} from 'rxjs/operators';
@@ -63,6 +62,13 @@ import {EditClusterComponent} from './edit-cluster/component';
 import {EditSSHKeysComponent} from './edit-sshkeys/component';
 import {RevokeTokenComponent} from './revoke-token/component';
 import {ShareKubeconfigComponent} from './share-kubeconfig/component';
+import {
+  getClusterHealthStatus,
+  HealthStatus,
+  isClusterAPIRunning,
+  isClusterRunning,
+  isOPARunning,
+} from '@shared/utils/health-status';
 
 @Component({
   selector: 'km-cluster-details',
@@ -88,7 +94,7 @@ export class ClusterDetailsComponent implements OnInit, OnDestroy {
   isClusterRunning = false;
   isClusterAPIRunning = false;
   isOPARunning = false;
-  healthStatus: ClusterHealthStatus;
+  healthStatus: HealthStatus;
   health: Health;
   config: Config = {share_kubeconfig: false};
   projectID: string;
@@ -163,10 +169,10 @@ export class ClusterDetailsComponent implements OnInit, OnDestroy {
           this.health = health;
           this.events = events;
           this._seedSettings = seedSettings;
-          this.isClusterAPIRunning = ClusterHealthStatus.isClusterAPIRunning(this.cluster, health);
-          this.isClusterRunning = ClusterHealthStatus.isClusterRunning(this.cluster, health);
-          this.healthStatus = ClusterHealthStatus.getHealthStatus(this.cluster, health);
-          this.isOPARunning = ClusterHealthStatus.isOPARunning(this.cluster, health);
+          this.isClusterAPIRunning = isClusterAPIRunning(this.cluster, health);
+          this.isClusterRunning = isClusterRunning(this.cluster, health);
+          this.healthStatus = getClusterHealthStatus(this.cluster, health);
+          this.isOPARunning = isOPARunning(this.cluster, health);
           this.onExpandChange$.next(!this.isClusterRunning);
 
           // Conditionally create an array of observables to use for 'combineLatest' operator.

src/app/cluster/details/cluster/constraints/constraint-dialog/component.ts

@@ -19,7 +19,7 @@ import {OPAService} from '@core/services/opa';
 import {NotificationService} from '@core/services/notification';
 import {Cluster} from '@shared/entity/cluster';
 import {Constraint, ConstraintTemplate, ConstraintSpec} from '@shared/entity/opa';
-import {getIconClassForButton} from '@shared/utils/common-utils';
+import {getIconClassForButton} from '@shared/utils/common';
 import * as y from 'js-yaml';
 import _ from 'lodash';
 import {Subject} from 'rxjs';

src/app/cluster/details/cluster/edit-cluster/component.ts

@@ -31,7 +31,7 @@ import {
 import {ResourceType} from '@shared/entity/common';
 import {Datacenter, SeedSettings} from '@shared/entity/datacenter';
 import {AdminSettings} from '@shared/entity/settings';
-import {AdmissionPlugin, AdmissionPluginUtils} from '@shared/utils/admission-plugin-utils/admission-plugin-utils';
+import {AdmissionPlugin, AdmissionPluginUtils} from '@shared/utils/admission-plugin';
 import {AsyncValidators} from '@shared/validators/async-label-form.validator';
 import _ from 'lodash';
 import {Subject} from 'rxjs';

src/app/cluster/details/cluster/edit-cluster/template.html

@@ -80,7 +80,7 @@
              fxLayout="row"
              fxLayoutAlign=" center"
              fxLayoutGap="16px">
-          <i class="km-icon-error km-warning km-pointer"></i>
+          <i class="km-icon-warning km-warning km-pointer"></i>
           <p fxFlex="95">An active Pod Security Policy means that a lot of Pod specifications, Operators and Helm
             charts will not work out of the box.</p>
         </div>

src/app/cluster/details/cluster/edit-sshkeys/component.ts

@@ -27,7 +27,7 @@ import {View} from '@shared/entity/common';
 import {Member} from '@shared/entity/member';
 import {SSHKey} from '@shared/entity/ssh-key';
 import {GroupConfig} from '@shared/model/Config';
-import {MemberUtils, Permission} from '@shared/utils/member-utils/member-utils';
+import {MemberUtils, Permission} from '@shared/utils/member';
 import _ from 'lodash';
 import {EMPTY, merge, Observer, Subject, timer} from 'rxjs';
 import {filter, switchMap, take, takeUntil, tap} from 'rxjs/operators';

src/app/cluster/details/cluster/gatekeeper-config/gatekeeper-config-dialog/component.ts

@@ -18,7 +18,7 @@ import {OPAService} from '@core/services/opa';
 import {NotificationService} from '@core/services/notification';
 import {Cluster} from '@shared/entity/cluster';
 import {GatekeeperConfig, GatekeeperConfigSpec} from '@shared/entity/opa';
-import {getIconClassForButton} from '@shared/utils/common-utils';
+import {getIconClassForButton} from '@shared/utils/common';
 import * as y from 'js-yaml';
 import _ from 'lodash';
 import {Subject} from 'rxjs';

src/app/cluster/details/cluster/machine-deployment-details/component.spec.ts

@@ -41,11 +41,11 @@ import {ProjectService} from '@core/services/project';
 import {SettingsService} from '@core/services/settings';
 import {UserService} from '@core/services/user';
 import {SharedModule} from '@shared/module';
-import {MachineDeploymentHealthStatus} from '@shared/utils/health-status/machine-deployment-health-status';
 import {NodeListComponent} from '../node-list/component';
 import {ClusterPanelComponent} from './cluster-panel/component';
 import {MachineDeploymentDetailsComponent} from './component';
 import {MachineDeploymentService} from '@core/services/machine-deployment';
+import {getMachineDeploymentHealthStatus} from '@shared/utils/health-status';
 
 describe('MachineDeploymentDetailsComponent', () => {
   let fixture: ComponentFixture<MachineDeploymentDetailsComponent>;
@@ -85,9 +85,7 @@ describe('MachineDeploymentDetailsComponent', () => {
     component = fixture.componentInstance;
 
     component.machineDeployment = machineDeploymentsFake()[0];
-    component.machineDeploymentHealthStatus = MachineDeploymentHealthStatus.getHealthStatus(
-      component.machineDeployment
-    );
+    component.machineDeploymentHealthStatus = getMachineDeploymentHealthStatus(component.machineDeployment);
     component.nodes = nodesFake();
     component.cluster = fakeDigitaloceanCluster();
     component.datacenter = fakeDigitaloceanDatacenter();