Merge remote-tracking branch 'origin/main'

Author: dmytro-landiak

ui-ngx/src/app/modules/home/components/authentication/configuration/jwt-provider-form/jwt-provider-form.component.html

@@ -176,7 +176,7 @@
                 <input matInput formControlName="secret"
                        autocomplete="new-password" name="new-password"
                        type="password">
-                <tb-toggle-password [disabled]="disabled" matSuffix></tb-toggle-password>
+                <tb-toggle-password matSuffix></tb-toggle-password>
                 <tb-copy-button matSuffix
                                 [class.!hidden]="!jwtConfigForm.get('jwtVerifierConfiguration.jwtSignAlgorithmConfiguration.secret')?.value?.length"
                                 [copyText]="jwtConfigForm.get('jwtVerifierConfiguration.jwtSignAlgorithmConfiguration.secret')?.value">

ui-ngx/src/app/modules/home/pages/blocked-clients/blocked-client.component.ts

@@ -192,6 +192,7 @@ export class BlockedClientComponent extends EntityComponent<BlockedClient> {
       this.entityForm.get('expirationTime').setValue(this.defaultExpirationDate(), {emitEvent: false});
       this.entityForm.get('expirationTime').setValidators([this.expirationTimeValidator]);
     }
+    this.entityForm.get('expirationTime').updateValueAndValidity();
   }
 
   private updateValidators() {

ui-ngx/src/app/modules/home/pages/ws-client/messages/messanger.component.html

@@ -45,32 +45,31 @@
 <div [formGroup]="messangerFormGroup" class="mat-padding flex flex-col" style="background: #fff; border-radius: 4px;">
   <section class="flex flex-row flex-nowrap items-center gap-4 lt-xl:flex-wrap"
     [class.wrap]="isLtLg | async">
-    <section class="flex flex-1 items-baseline justify-center gap-4">
-      <mat-form-field [class.topic-mat-form-field]="isLtLg | async"
-                      style="min-width: 200px !important; width: 100%" hideRequiredMarker>
-        <mat-label translate>mqtt-client-session.topic</mat-label>
-        <input matInput formControlName="topic" [matAutocomplete]="auto">
-        <mat-autocomplete #auto="matAutocomplete">
-          @for (option of filteredTopics | async; track option) {
-            <mat-option [value]="option">{{option}}</mat-option>
-          }
-        </mat-autocomplete>
-        @if (messangerFormGroup.get('topic').hasError('required')) {
-          <mat-error>
-            {{ 'mqtt-client-session.topic-name-required' | translate }}
-          </mat-error>
+    <mat-form-field class="flex flex-1" [class.topic-mat-form-field]="isLtLg | async"
+                    style="min-width: 200px !important; width: 100%" hideRequiredMarker>
+      <mat-label translate>mqtt-client-session.topic</mat-label>
+      <input matInput formControlName="topic" [matAutocomplete]="auto">
+      <mat-autocomplete #auto="matAutocomplete">
+        @for (option of filteredTopics | async; track option) {
+          <mat-option [value]="option">{{option}}</mat-option>
         }
-        @if (messangerFormGroup.get('topic').hasError('invalidTopic')) {
-          <mat-error>
-            {{ 'mqtt-client-session.topic-name-invalid' | translate }}
-          </mat-error>
-        }
-      </mat-form-field>
-      <tb-color-input formControlName="color" asBoxInput></tb-color-input>
-    </section>
+      </mat-autocomplete>
+      @if (messangerFormGroup.get('topic').hasError('required')) {
+        <mat-error>
+          {{ 'mqtt-client-session.topic-name-required' | translate }}
+        </mat-error>
+      }
+      @if (messangerFormGroup.get('topic').hasError('invalidTopic')) {
+        <mat-error>
+          {{ 'mqtt-client-session.topic-name-invalid' | translate }}
+        </mat-error>
+      }
+      <tb-color-input class="full-opacity mr-2" asBoxInput matSuffix formControlName="color">
+      </tb-color-input>
+    </mat-form-field>
     <tb-qos-select formControlName="qos" class="flex max-w-20% lt-xl:max-w-20%">
     </tb-qos-select>
-    <mat-form-field class="flex max-w-20% lt-xl:max-w-[100px]">
+    <mat-form-field class="flex max-w-20% lt-xl:max-w-[110px]">
       <mat-label translate>value.format</mat-label>
       <mat-select formControlName="payloadFormat">
         @for (valueType of payloadFormats; track valueType) {

ui-ngx/src/app/modules/home/pages/ws-client/messages/messanger.component.scss

@@ -85,5 +85,9 @@
       border: 1px solid rgba(0, 0, 0, 0.12);
       border-radius: 4px;
     }
+
+    .mat-mdc-form-field-icon-suffix {
+      opacity: 1 !important;
+    }
   }
 }

ui-ngx/src/app/shared/components/button/toggle-password.component.html

@@ -16,10 +16,7 @@
 
 -->
 @if (!hideToggle) {
-  <button mat-icon-button type="button"
-          [disabled]="disabled()"
-          (click)="togglePassword($event)"
-          [attr.aria-pressed]="showPassword">
-    <mat-icon>{{ showPassword ? 'visibility' : 'visibility_off' }}</mat-icon>
-  </button>
+  <mat-icon (click)="togglePassword($event)">
+    {{ showPassword ? 'visibility' : 'visibility_off' }}
+  </mat-icon>
 }

ui-ngx/src/app/shared/components/button/toggle-password.component.ts

@@ -14,19 +14,22 @@
 /// limitations under the License.
 ///
 
-import { AfterViewInit, Component, ElementRef, input } from '@angular/core';
-
-import { MatIconButton } from '@angular/material/button';
+import { AfterViewInit, Component, ElementRef } from '@angular/core';
 import { MatIcon } from '@angular/material/icon';
 
 @Component({
     selector: 'tb-toggle-password',
     templateUrl: 'toggle-password.component.html',
-    imports: [MatIconButton, MatIcon]
+    styles: [`
+      :host {
+        cursor: pointer;
+        padding: 12px;
+      }`
+    ],
+    imports: [MatIcon]
 })
 export class TogglePasswordComponent implements AfterViewInit {
 
-  disabled = input<boolean>(false);
   showPassword = false;
   hideToggle = false;
 

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -591,7 +591,13 @@
       "outdated-hint": "Updated over a week ago",
       "delete-resource": "Delete outdated service",
       "delete-resource-title": "Are you sure you want to delete the service '{{id}}'?",
-      "delete-resource-text": "Be careful, after the confirmation the service will be removed and all related data will become unrecoverable."
+      "delete-resource-text": "Be careful, after the confirmation the service will be removed and all related data will become unrecoverable.",
+      "cpu-warning-text": "Running high on CPU usage. To avoid system failure, optimize system performance.",
+      "cpu-critical-text": "Critically high CPU usage. To avoid system failure, optimize system performance.",
+      "ram-warning-text": "Running low on reserve of RAM. To avoid system failure, optimize system performance or increase the size of RAM.",
+      "ram-critical-text": "Critically low reserve of RAM. To avoid system failure, optimize system performance or increase the size of RAM.",
+      "disk-warning-text": "Running low on disk space. To avoid data loss, free up or expand the disk space.",
+      "disk-critical-text": "Critically low disk space. To avoid data loss, free up or expand the disk space."
     }
   },
   "mqtt-client": {

ui-ngx/src/styles.scss

@@ -1313,10 +1313,11 @@ pre.tb-highlight {
   }
 
   .mat-mdc-form-field-icon-suffix {
-    opacity: 0.54;
-
-    &:hover {
-      opacity: 1;
+    > *:not(.full-opacity) {
+      opacity: 0.54;
+      &:hover {
+        opacity: 1;
+      }
     }
   }