Merge pull request #12672 from maxunbearable/feature/calculated-fields-responsive

Added calculated field responsive styles

ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.html

@@ -18,19 +18,19 @@
 <div class="flex flex-col gap-3">
     <div class="tb-form-table">
         <div class="tb-form-table-header">
-            <div class="tb-form-table-header-cell w-1/6">{{ 'calculated-fields.argument-name' | translate }}</div>
+            <div class="argument-name-field tb-form-table-header-cell w-1/6 xs:w-1/3 sm:w-1/4" tbTruncateWithTooltip>{{ 'calculated-fields.argument-name' | translate }}</div>
-            <div class="tb-form-table-header-cell w-1/3">{{ 'calculated-fields.datasource' | translate }}</div>
+            <div class="tb-form-table-header-cell w-1/3 xs:hidden">{{ 'calculated-fields.datasource' | translate }}</div>
-            <div class="tb-form-table-header-cell w-1/6">{{ 'common.type' | translate }}</div>
+            <div class="tb-form-table-header-cell w-1/6 lt-md:hidden">{{ 'common.type' | translate }}</div>
-            <div class="tb-form-table-header-cell w-1/6">{{ 'entity.key' | translate }}</div>
+            <div class="tb-form-table-header-cell w-1/6 xs:w-1/3">{{ 'entity.key' | translate }}</div>
-            <div class="tb-form-table-header-cell w-24 min-w-24"></div>
+            <div class="tb-form-table-header-cell w-20 min-w-20"></div>
         </div>
         <div class="tb-form-table-body">
             @for (group of argumentsFormArray.controls; track group) {
                 <div [formGroup]="group" class="tb-form-table-row">
-                    <mat-form-field appearance="outline" class="tb-inline-field w-1/6" subscriptSizing="dynamic">
+                    <mat-form-field appearance="outline" class="argument-name-field tb-inline-field w-1/6 xs:w-1/3 sm:w-1/4" subscriptSizing="dynamic">
                         <input matInput formControlName="argumentName" placeholder="{{ 'action.set' | translate }}">
                     </mat-form-field>
-                    <section class="flex w-1/3 gap-2">
+                    <section class="datasource-field flex w-1/3 gap-2 xs:hidden">
                         @if (group.get('refEntityId')?.get('id')?.value) {
                             <ng-container [formGroup]="group.get('refEntityId')">
                                 <mat-form-field appearance="outline" class="tb-inline-field flex-1" subscriptSizing="dynamic">
@@ -63,7 +63,7 @@
                         }
                     </section>
                     <ng-container [formGroup]="group.get('refEntityKey')">
-                        <mat-form-field appearance="outline" class="tb-inline-field w-1/6" subscriptSizing="dynamic">
+                        <mat-form-field appearance="outline" class="tb-inline-field w-1/6 lt-md:hidden" subscriptSizing="dynamic">
                             @if (group.get('refEntityKey').get('type').value; as type) {
                                 <mat-select [value]="type" formControlName="type">
                                     <mat-option [value]="type">
@@ -72,15 +72,15 @@
                                 </mat-select>
                             }
                         </mat-form-field>
-                        <mat-chip-listbox formControlName="key" class="tb-inline-field w-1/6">
+                        <mat-chip-listbox formControlName="key" class="tb-inline-field w-1/6 xs:w-1/3">
                             <mat-chip>
-                                <div tbTruncateWithTooltip class="max-w-25">
+                                <div tbTruncateWithTooltip>
                                     {{ group.get('refEntityKey').get('key').value }}
                                 </div>
                             </mat-chip>
                         </mat-chip-listbox>
                     </ng-container>
-                    <div class="tb-form-table-row-cell-buttons flex">
+                    <div class="tb-form-table-row-cell-buttons flex w-20 min-w-20">
                         <button type="button"
                                 mat-icon-button
                                 #button

ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.scss

@@ -13,12 +13,30 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@use '../../../../../../../scss/constants' as constants;
+
 :host {
   .tb-form-table-row-cell-buttons {
     --mat-badge-legacy-small-size-container-size: 8px;
     --mat-badge-small-size-container-overlap-offset: -5px;
     --mat-badge-small-size-text-size: 0;
   }
+
+  .argument-name-field {
+    @media #{constants.$mat-sm} {
+      min-width: 25%;
+      max-width: 25%;
+    }
+    @media #{constants.$mat-xs} {
+      min-width: 33%;
+      max-width: 33%;
+    }
+  }
+
+  .datasource-field {
+    min-width: 33%;
+    max-width: 33%;
+  }
 }
 
 :host ::ng-deep {
@@ -27,4 +45,10 @@
       font-size: 14px;
     }
   }
+
+  .mat-mdc-standard-chip {
+    .mdc-evolution-chip__cell--primary, .mdc-evolution-chip__action--primary, .mdc-evolution-chip__text-label {
+      overflow: hidden;
+    }
+  }
 }

ui-ngx/src/app/modules/home/components/calculated-fields/components/debug-dialog/calculated-field-debug-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="w-screen max-w-5xl">
+<div class="debug-dialog-container flex flex-col xs:h-full">
   <mat-toolbar color="primary">
     <h2>{{ 'calculated-fields.debugging' | translate}}</h2>
     <span class="flex-1"></span>
@@ -25,7 +25,7 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <div mat-dialog-content class="tb-form-panel stroked debug-dialog-content">
+  <div mat-dialog-content class="tb-form-panel stroked debug-dialog-content xs:flex-1">
     <tb-event-table
       [tenantId]="data.tenantId"
       [debugEventTypes]="[debugEventTypes.DEBUG_CALCULATED_FIELD]"

ui-ngx/src/app/modules/home/components/calculated-fields/components/debug-dialog/calculated-field-debug-dialog.component.scss

@@ -14,8 +14,13 @@
  * limitations under the License.
  */
 :host {
-  .debug-dialog-content {
+  .debug-dialog-container {
-    height: 65vh;
+    width: 1080px;
-    border-radius: 0;
+    max-width: 100%;
+
+    .debug-dialog-content {
+      height: 65vh;
+      border-radius: 0;
+    }
   }
 }

ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div [formGroup]="fieldFormGroup" class="h-full w-screen min-w-80 max-w-4xl">
+<div [formGroup]="fieldFormGroup" class="dialog-container flex size-full max-w-4xl flex-col">
   <mat-toolbar color="primary">
     <h2>{{ 'entity.type-calculated-field' | translate}}</h2>
     <span class="flex-1"></span>
@@ -26,7 +26,7 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <div mat-dialog-content>
+  <div mat-dialog-content class="flex-1">
     <div class="tb-form-panel no-border no-padding">
       <div class="tb-form-panel">
         <div class="tb-form-panel-title">{{ 'common.general' | translate }}</div>

ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.scss

@@ -0,0 +1,22 @@
+/**
+ * Copyright © 2016-2024 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+  .dialog-container {
+    width: 869px;
+    max-width: 100%;
+  }
+}

ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.ts

@@ -40,6 +40,7 @@ import { ScriptLanguage } from '@shared/models/rule-node.models';
 @Component({
   selector: 'tb-calculated-field-dialog',
   templateUrl: './calculated-field-dialog.component.html',
+  styleUrls: ['./calculated-field-dialog.component.scss'],
 })
 export class CalculatedFieldDialogComponent extends DialogComponent<CalculatedFieldDialogComponent, CalculatedField> implements AfterViewInit {
 

ui-ngx/src/app/modules/home/components/calculated-fields/components/panel/calculated-field-argument-panel.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="w-screen max-w-xl" [formGroup]="argumentFormGroup">
+<div class="w-full max-w-xl" [formGroup]="argumentFormGroup">
   <div class="tb-form-panel no-border no-padding mb-2">
     <div class="tb-form-panel-title">{{ 'calculated-fields.argument-settings' | translate }}</div>
     <div class="tb-form-panel no-border no-padding">

ui-ngx/src/app/modules/home/components/calculated-fields/components/panel/calculated-field-argument-panel.component.scss

@@ -0,0 +1,28 @@
+/**
+ * Copyright © 2016-2024 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@use '../../../../../../../scss/constants' as constants;
+
+:host {
+  display: flex;
+  width: 520px;
+  max-width: 100%;
+
+  .fixed-title-width {
+    @media #{constants.$mat-lt-sm} {
+      min-width: 120px;
+    }
+  }
+}

ui-ngx/src/app/modules/home/components/calculated-fields/components/panel/calculated-field-argument-panel.component.ts

@@ -42,6 +42,7 @@ import { MINUTE } from '@shared/models/time/time.models';
 @Component({
   selector: 'tb-calculated-field-argument-panel',
   templateUrl: './calculated-field-argument-panel.component.html',
+  styleUrls: ['./calculated-field-argument-panel.component.scss']
 })
 export class CalculatedFieldArgumentPanelComponent implements OnInit {
 

ui-ngx/src/app/modules/home/components/calculated-fields/components/test-arguments/calculated-field-test-arguments.component.html

@@ -19,7 +19,7 @@
   <div>{{ 'calculated-fields.arguments' | translate }}</div>
   <div class="tb-form-table">
     <div class="tb-form-table-header">
-      <div class="tb-form-table-header-cell w-1/4">{{ 'calculated-fields.argument-name' | translate }}</div>
+      <div class="tb-form-table-header-cell w-1/4" tbTruncateWithTooltip>{{ 'calculated-fields.argument-name' | translate }}</div>
       <div class="tb-form-table-header-cell flex-1">{{ 'common.value' | translate }}</div>
     </div>
     <div class="tb-form-table-body">
@@ -28,7 +28,7 @@
           <mat-form-field appearance="outline" class="tb-inline-field w-1/4" subscriptSizing="dynamic">
             <input matInput formControlName="argumentName" placeholder="{{ 'action.set' | translate }}">
           </mat-form-field>
-          <tb-value-input class="flex-1" [required]="false" formControlName="value"/>
+          <tb-value-input class="argument-value flex-1" [required]="false" [shortBooleanField]="true" formControlName="value"/>
         </div>
       }
     </div>

ui-ngx/src/app/modules/home/components/calculated-fields/components/test-arguments/calculated-field-test-arguments.component.scss

@@ -0,0 +1,29 @@
+/**
+ * Copyright © 2016-2024 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@use '../../../../../../../scss/constants' as constants;
+
+:host::ng-deep {
+  .tb-form-table-row {
+    .argument-value {
+      .tb-value-type.row {
+        @media #{constants.$mat-lt-sm} {
+          width: 100px;
+          min-width: 100px;
+        }
+      }
+    }
+  }
+}

ui-ngx/src/app/modules/home/components/calculated-fields/components/test-arguments/calculated-field-test-arguments.component.ts

@@ -30,6 +30,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 @Component({
   selector: 'tb-calculated-field-test-arguments',
   templateUrl: './calculated-field-test-arguments.component.html',
+  styleUrls: ['./calculated-field-test-arguments.component.scss'],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,

ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form class="test-dialog-container size-full" [formGroup]="calculatedFieldScriptTestFormGroup">
+<form #testScriptContainer class="test-dialog-container size-full" [formGroup]="calculatedFieldScriptTestFormGroup">
   <mat-toolbar class="flex justify-between" color="primary">
     <h2>{{ 'calculated-fields.test-script-function' | translate }} ({{ 'api-usage.tbel' | translate }})</h2>
     <button mat-icon-button
@@ -26,7 +26,7 @@
   </mat-toolbar>
   <div mat-dialog-content class="relative">
     <div class="tb-absolute-fill">
-      <div class="tb-fullscreen-panel flex size-full flex-row">
+      <div class="tb-fullscreen-panel flex size-full flex-row lt-md:flex-col">
         <div #leftPanel class="test-block-content overflow-hidden">
           <div class="relative size-full min-w-64">
             <div class="block-label-container left">
@@ -47,7 +47,7 @@
         </div>
         <div #rightPanel>
           <div #topRightPanel class="test-block-content">
-            <div class="relative flex size-full min-w-96 gap-2">
+            <div class="relative flex size-full min-w-80 gap-2">
               <div class="block-label-container right-top">
                 <span class="block-label">{{ 'calculated-fields.arguments' | translate }}</span>
               </div>

ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.scss

@@ -26,6 +26,7 @@
       padding-top: 5px;
       padding-left: 5px;
       border: 1px solid #c0c0c0;
+      overflow: scroll;
     }
 
     .block-label-container {

ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.ts

@@ -20,6 +20,7 @@ import {
   DestroyRef,
   ElementRef,
   Inject,
+  OnDestroy,
   ViewChild,
 } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
@@ -45,12 +46,13 @@ import { CalculatedFieldTestScriptDialogData } from '@shared/models/calculated-f
   styleUrls: ['./calculated-field-script-test-dialog.component.scss'],
 })
 export class CalculatedFieldScriptTestDialogComponent extends DialogComponent<CalculatedFieldScriptTestDialogComponent,
-  string> implements AfterViewInit {
+  string> implements AfterViewInit, OnDestroy {
 
   @ViewChild('leftPanel', {static: true}) leftPanelElmRef: ElementRef<HTMLElement>;
   @ViewChild('rightPanel', {static: true}) rightPanelElmRef: ElementRef<HTMLElement>;
   @ViewChild('topRightPanel', {static: true}) topRightPanelElmRef: ElementRef<HTMLElement>;
   @ViewChild('bottomRightPanel', {static: true}) bottomRightPanelElmRef: ElementRef<HTMLElement>;
+  @ViewChild('testScriptContainer', {static: true}) testScriptContainer: ElementRef<HTMLElement>;
 
   @ViewChild('expressionContent', {static: true}) expressionContent: JsonContentComponent;
 
@@ -64,6 +66,9 @@ export class CalculatedFieldScriptTestDialogComponent extends DialogComponent<Ca
   readonly ScriptLanguage = ScriptLanguage;
   readonly functionArgs = Object.keys(this.data.arguments);
 
+  private testScriptResize: ResizeObserver;
+  private splitObjects: SplitObject[] = [];
+
   constructor(protected store: Store<AppState>,
               protected router: Router,
               @Inject(MAT_DIALOG_DATA) public data: CalculatedFieldTestScriptDialogData,
@@ -80,12 +85,12 @@ export class CalculatedFieldScriptTestDialogComponent extends DialogComponent<Ca
   }
 
   ngAfterViewInit(): void {
-    this.initSplitLayout(
+    this.observeResize();
-      this.leftPanelElmRef.nativeElement,
+  }
-      this.rightPanelElmRef.nativeElement,
+
-      this.topRightPanelElmRef.nativeElement,
+  ngOnDestroy(): void {
-      this.bottomRightPanelElmRef.nativeElement
+    super.ngOnDestroy();
-    );
+    this.testScriptResize.disconnect();
   }
 
   cancel(): void {
@@ -140,18 +145,58 @@ export class CalculatedFieldScriptTestDialogComponent extends DialogComponent<Ca
     return !this.calculatedFieldScriptTestFormGroup.get('expression').invalid;
   }
 
-  private initSplitLayout(leftPanel, rightPanel, topRightPanel, bottomRightPanel): void {
+  private observeResize(): void {
-    Split([leftPanel, rightPanel], {
+    this.testScriptResize = new ResizeObserver(() => {
-      sizes: [50, 50],
+      this.updateSizes();
-      gutterSize: 8,
-      cursor: 'col-resize'
     });
 
-    Split([topRightPanel, bottomRightPanel], {
+    this.testScriptResize.observe(this.testScriptContainer.nativeElement);
-      sizes: [50, 50],
+  }
-      gutterSize: 8,
+
-      cursor: 'row-resize',
+  private updateSizes(): void {
-      direction: 'vertical'
+    this.initSplitLayout(this.testScriptContainer.nativeElement.clientWidth <= 960);
-    });
+  }
+
+  private initSplitLayout(smallMode = false): void {
+    const [leftPanel, rightPanel, topRightPanel, bottomRightPanel] = [
+      this.leftPanelElmRef.nativeElement,
+      this.rightPanelElmRef.nativeElement,
+      this.topRightPanelElmRef.nativeElement,
+      this.bottomRightPanelElmRef.nativeElement
+    ] as unknown as string[];
+
+    this.splitObjects.forEach(obj => obj.destroy());
+    this.splitObjects = [];
+
+    if (smallMode) {
+      this.splitObjects.push(
+        Split([leftPanel, rightPanel], {
+          sizes: [33, 67],
+          gutterSize: 8,
+          cursor: 'row-resize',
+          direction: 'vertical'
+        }),
+        Split([topRightPanel, bottomRightPanel], {
+          sizes: [50, 50],
+          gutterSize: 8,
+          cursor: 'row-resize',
+          direction: 'vertical'
+        }),
+      );
+    } else {
+      this.splitObjects.push(
+        Split([leftPanel, rightPanel], {
+          sizes: [50, 50],
+          gutterSize: 8,
+          cursor: 'col-resize'
+        }),
+        Split([topRightPanel, bottomRightPanel], {
+          sizes: [50, 50],
+          gutterSize: 8,
+          cursor: 'row-resize',
+          direction: 'vertical'
+        })
+      );
+    }
   }
 }

ui-ngx/src/app/modules/home/components/event/event-table-config.ts

@@ -359,7 +359,7 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
         this.columns[0].width = '80px';
         this.columns[1].width = '100px';
         this.columns.push(
-          new EntityTableColumn<Event>('entityId', 'event.entity-id', '85px',
+          new EntityTableColumn<Event>('entityId', 'event.entity-id', '100px',
             (entity) => `<span style="display: inline-block; width: 9ch">${entity.body.entityId.substring(0, 8)}…</span>`,
             () => ({padding: '0 12px 0 0'}),
             false,
@@ -379,8 +379,8 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
               type: CellActionDescriptorType.COPY_BUTTON
             }
           ),
-          new EntityTableColumn<Event>('messageId', 'event.message-id', '85px',
+          new EntityTableColumn<Event>('messageId', 'event.message-id', '100px',
-            (entity) => `<span style="display: inline-block; width: 9ch">${entity.body.msgId?.substring(0, 8)}…</span>`,
+            (entity) => entity.body.msgId ? `<span style="display: inline-block; width: 9ch">${entity.body.msgId?.substring(0, 8)}…</span>` : '-',
             () => ({padding: '0 12px 0 0'}),
             false,
             () => ({padding: '0 12px 0 0'}),
@@ -394,13 +394,13 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
                 'font-size': '16px',
                 color: 'rgba(0,0,0,.87)'
               },
-              isEnabled: () => true,
+              isEnabled: (entity) => !!entity.body.msgId,
-              onAction: ($event, entity) => entity.body.msgId,
+              onAction: (_, entity) => entity.body.msgId,
               type: CellActionDescriptorType.COPY_BUTTON
             }
           ),
           new EntityTableColumn<Event>('messageType', 'event.message-type', '100px',
-            (entity) => entity.body.msgType,
+            (entity) => entity.body.msgType ?? '-',
             () => ({padding: '0 12px 0 0'}),
             false
           ),
@@ -540,6 +540,8 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
           {key: 'entityId', title: 'event.entity-id'},
           {key: 'messageId', title: 'event.message-id'},
           {key: 'messageType', title: 'event.message-type'},
+          {key: 'arguments', title: 'event.arguments'},
+          {key: 'result', title: 'event.result'},
           {key: 'isError', title: 'event.error'},
           {key: 'errorStr', title: 'event.error'}
         );