UI: Alarms table widget advanced appearance config.

3 years ago · 76e201bd3b
5 changed files with 138 additions and 115 deletions
--- a/application/src/main/data/json/system/widget_bundles/alarm_widgets.json
+++ b/application/src/main/data/json/system/widget_bundles/alarm_widgets.json
@ -27,7 +27,7 @@
        "dataKeySettingsDirective": "tb-alarms-table-key-settings",
        "hasBasicMode": true,
        "basicModeDirective": "tb-alarms-table-basic-config",
-        "defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"enableSelection\":true,\"enableSearch\":true,\"displayDetails\":true,\"allowAcknowledgment\":true,\"allowClear\":true,\"allowAssign\":true,\"displayActivity\":true,\"displayPagination\":true,\"defaultPageSize\":10,\"defaultSortOrder\":\"-createdTime\",\"enableSelectColumnDisplay\":true,\"enableStickyAction\":false,\"enableFilter\":true,\"entitiesTitle\":null},\"title\":\"Alarms table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"alarmSource\":{\"type\":\"function\",\"dataKeys\":[{\"name\":\"createdTime\",\"type\":\"alarm\",\"label\":\"Created time\",\"color\":\"#2196f3\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.021092237451093787},{\"name\":\"originator\",\"type\":\"alarm\",\"label\":\"Originator\",\"color\":\"#4caf50\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.2780007688856758},{\"name\":\"type\",\"type\":\"alarm\",\"label\":\"Type\",\"color\":\"#f44336\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.7323586880398418},{\"name\":\"severity\",\"type\":\"alarm\",\"label\":\"Severity\",\"color\":\"#ffc107\",\"settings\":{\"useCellStyleFunction\":false,\"useCellContentFunction\":false},\"_hash\":0.09927019860088193},{\"name\":\"status\",\"type\":\"alarm\",\"label\":\"Status\",\"color\":\"#607d8b\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6588418951443418},{\"name\":\"assignee\",\"type\":\"alarm\",\"label\":\"Assignee\",\"color\":\"#9c27b0\",\"settings\":{},\"_hash\":0.5008441077416634}],\"entityAliasId\":null,\"name\":\"alarms\"},\"alarmSearchStatus\":\"ANY\",\"alarmsPollingInterval\":5,\"showTitleIcon\":false,\"titleIcon\":\"warning\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"displayTimewindow\":true,\"actions\":{},\"alarmStatusList\":[],\"alarmSeverityList\":[],\"alarmTypeList\":[],\"searchPropagatedAlarms\":false,\"configMode\":\"basic\",\"alarmFilterConfig\":null}"
+        "defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"enableSelection\":true,\"enableSearch\":true,\"displayDetails\":true,\"allowAcknowledgment\":true,\"allowClear\":true,\"allowAssign\":true,\"displayActivity\":true,\"displayPagination\":true,\"defaultPageSize\":10,\"defaultSortOrder\":\"-createdTime\",\"enableSelectColumnDisplay\":true,\"enableStickyAction\":false,\"enableFilter\":true,\"entitiesTitle\":null,\"alarmsTitle\":\"Alarms\"},\"title\":\"Alarms table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"alarmSource\":{\"type\":\"function\",\"dataKeys\":[{\"name\":\"createdTime\",\"type\":\"alarm\",\"label\":\"Created time\",\"color\":\"#2196f3\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.021092237451093787},{\"name\":\"originator\",\"type\":\"alarm\",\"label\":\"Originator\",\"color\":\"#4caf50\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.2780007688856758},{\"name\":\"type\",\"type\":\"alarm\",\"label\":\"Type\",\"color\":\"#f44336\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.7323586880398418},{\"name\":\"severity\",\"type\":\"alarm\",\"label\":\"Severity\",\"color\":\"#ffc107\",\"settings\":{\"useCellStyleFunction\":false,\"useCellContentFunction\":false},\"_hash\":0.09927019860088193},{\"name\":\"status\",\"type\":\"alarm\",\"label\":\"Status\",\"color\":\"#607d8b\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6588418951443418},{\"name\":\"assignee\",\"type\":\"alarm\",\"label\":\"Assignee\",\"color\":\"#9c27b0\",\"settings\":{},\"_hash\":0.5008441077416634}],\"entityAliasId\":null,\"name\":\"alarms\"},\"alarmSearchStatus\":\"ANY\",\"alarmsPollingInterval\":5,\"showTitleIcon\":false,\"titleIcon\":\"warning\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"displayTimewindow\":true,\"actions\":{},\"alarmStatusList\":[],\"alarmSeverityList\":[],\"alarmTypeList\":[],\"searchPropagatedAlarms\":false,\"configMode\":\"basic\",\"alarmFilterConfig\":null}"
      }
    }
  ]
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarms-table-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarms-table-basic-config.component.ts
@ -60,7 +60,7 @@ export class AlarmsTableBasicConfigComponent extends BasicWidgetConfigComponent
      datasources: [[configData.config.alarmSource], []],
      columns: [this.getColumns(configData.config.alarmSource), []],
      showTitle: [configData.config.showTitle, []],
-      title: [configData.config.settings?.entitiesTitle, []],
+      title: [configData.config.settings?.alarmsTitle, []],
      showTitleIcon: [configData.config.showTitleIcon, []],
      titleIcon: [configData.config.titleIcon, []],
      iconColor: [configData.config.iconColor, []],
@ -81,7 +81,7 @@ export class AlarmsTableBasicConfigComponent extends BasicWidgetConfigComponent
    this.widgetConfig.config.actions = config.actions;
    this.widgetConfig.config.showTitle = config.showTitle;
    this.widgetConfig.config.settings = this.widgetConfig.config.settings || {};
-    this.widgetConfig.config.settings.entitiesTitle = config.title;
+    this.widgetConfig.config.settings.alarmsTitle = config.title;
    this.widgetConfig.config.showTitleIcon = config.showTitleIcon;
    this.widgetConfig.config.titleIcon = config.titleIcon;
    this.widgetConfig.config.iconColor = config.iconColor;
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html
@ -15,21 +15,56 @@
    limitations under the License.

 -->
-<section class="tb-widget-settings" [formGroup]="alarmsTableKeySettingsForm" fxLayout="column">
-  <mat-form-field fxFlex class="mat-block">
-    <mat-label translate>widgets.table.custom-title</mat-label>
-    <input matInput formControlName="customTitle">
-  </mat-form-field>
-  <mat-form-field fxFlex class="mat-block">
-    <mat-label translate>widgets.table.column-width</mat-label>
-    <input matInput formControlName="columnWidth">
-  </mat-form-field>
-  <fieldset class="fields-group fields-group-slider">
-    <legend class="group-title" translate>widgets.table.cell-style</legend>
+<ng-container [formGroup]="alarmsTableKeySettingsForm">
+  <div class="tb-widget-config-panel">
+    <div class="tb-widget-config-panel-title" translate>widgets.table.column-settings</div>
+    <div class="tb-widget-config-row">
+      <div class="fixed-title-width">{{ 'widgets.table.custom-title' | translate }}</div>
+      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="customTitle" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
+    <div class="tb-widget-config-row space-between">
+      <div>{{ 'widgets.table.column-width' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="columnWidth" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
+    <div class="tb-widget-config-row space-between">
+      <div>{{ 'widgets.table.default-column-visibility' | translate }}</div>
+      <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
+        <mat-select formControlName="defaultColumnVisibility">
+          <mat-option [value]="'visible'">
+            {{ 'widgets.table.column-visibility-visible' | translate }}
+          </mat-option>
+          <mat-option [value]="'hidden'">
+            {{ 'widgets.table.column-visibility-hidden' | translate }}
+          </mat-option>
+          <mat-option [value]="'hidden-mobile'">
+            {{ 'widgets.table.column-visibility-hidden-mobile' | translate }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <div class="tb-widget-config-row space-between">
+      <div>{{ 'widgets.table.column-selection-to-display' | translate }}</div>
+      <mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
+        <mat-select formControlName="columnSelectionToDisplay">
+          <mat-option [value]="'enabled'">
+            {{ 'widgets.table.column-selection-to-display-enabled' | translate }}
+          </mat-option>
+          <mat-option [value]="'disabled'">
+            {{ 'widgets.table.column-selection-to-display-disabled' | translate }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+  </div>
+  <div class="tb-widget-config-panel tb-slide-toggle">
    <mat-expansion-panel class="tb-settings" [expanded]="alarmsTableKeySettingsForm.get('useCellStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
        <mat-panel-title fxFlex="60">
-          <mat-slide-toggle formControlName="useCellStyleFunction" (click)="$event.stopPropagation()"
+          <mat-slide-toggle class="mat-slide" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()"
                            fxLayoutAlign="center">
            {{ 'widgets.table.use-cell-style-function' | translate }}
          </mat-slide-toggle>
@ -48,13 +83,12 @@
        </tb-js-func>
      </ng-template>
    </mat-expansion-panel>
-  </fieldset>
-  <fieldset class="fields-group fields-group-slider">
-    <legend class="group-title" translate>widgets.table.cell-content</legend>
+  </div>
+  <div class="tb-widget-config-panel tb-slide-toggle">
    <mat-expansion-panel class="tb-settings" [expanded]="alarmsTableKeySettingsForm.get('useCellContentFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
+      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
        <mat-panel-title fxFlex="60">
-          <mat-slide-toggle formControlName="useCellContentFunction" (click)="$event.stopPropagation()"
+          <mat-slide-toggle class="mat-slide" formControlName="useCellContentFunction" (click)="$event.stopPropagation()"
                            fxLayoutAlign="center">
            {{ 'widgets.table.use-cell-content-function' | translate }}
          </mat-slide-toggle>
@ -73,27 +107,5 @@
        </tb-js-func>
      </ng-template>
    </mat-expansion-panel>
-  </fieldset>
-  <mat-form-field fxFlex class="mat-block">
-    <mat-label translate>widgets.table.default-column-visibility</mat-label>
-    <mat-select formControlName="defaultColumnVisibility">
-      <mat-option [value]="'visible'">
-        {{ 'widgets.table.column-visibility-visible' | translate }}
-      </mat-option>
-      <mat-option [value]="'hidden'">
-        {{ 'widgets.table.column-visibility-hidden' | translate }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
-  <mat-form-field fxFlex class="mat-block">
-    <mat-label translate>widgets.table.column-selection-to-display</mat-label>
-    <mat-select formControlName="columnSelectionToDisplay">
-      <mat-option [value]="'enabled'">
-        {{ 'widgets.table.column-selection-to-display-enabled' | translate }}
-      </mat-option>
-      <mat-option [value]="'disabled'">
-        {{ 'widgets.table.column-selection-to-display-disabled' | translate }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
-</section>
+  </div>
+</ng-container>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html
@ -15,38 +15,62 @@
    limitations under the License.

 -->
-<section class="tb-widget-settings" [formGroup]="alarmsTableWidgetSettingsForm" fxLayout="column">
-  <fieldset class="fields-group">
-    <legend class="group-title" translate>widgets.table.common-table-settings</legend>
-    <mat-form-field fxFlex class="mat-block">
-      <mat-label translate>widgets.table.alarms-table-title</mat-label>
-      <input matInput formControlName="alarmsTitle">
-    </mat-form-field>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
-      <section fxLayout="column" fxFlex>
-        <mat-checkbox formControlName="enableSelection">
-          {{ 'widgets.table.enable-alarms-selection' | translate }}
-        </mat-checkbox>
-        <mat-checkbox formControlName="enableSearch">
-          {{ 'widgets.table.enable-alarms-search' | translate }}
-        </mat-checkbox>
-        <mat-checkbox formControlName="enableSelectColumnDisplay">
-          {{ 'widgets.table.enable-select-column-display' | translate }}
-        </mat-checkbox>
-        <mat-checkbox formControlName="enableFilter">
-          {{ 'widgets.table.enable-alarm-filter' | translate }}
-        </mat-checkbox>
-      </section>
-      <section fxLayout="column" fxFlex>
-        <mat-checkbox formControlName="enableStickyHeader">
-          {{ 'widgets.table.enable-sticky-header' | translate }}
-        </mat-checkbox>
-        <mat-checkbox formControlName="enableStickyAction">
-          {{ 'widgets.table.enable-sticky-action' | translate }}
-        </mat-checkbox>
-      </section>
-    </section>
-    <mat-form-field fxFlex class="mat-block">
+<ng-container [formGroup]="alarmsTableWidgetSettingsForm">
+  <div class="tb-widget-config-panel">
+    <div class="tb-widget-config-panel-title" translate>widgets.table.table-header</div>
+    <div class="tb-widget-config-row">
+      <div class="fixed-title-width">{{ 'widgets.table.alarms-table-title' | translate }}</div>
+      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="alarmsTitle" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
+    <div class="tb-widget-config-row">
+      <mat-slide-toggle class="mat-slide"  formControlName="enableStickyHeader">
+        {{ 'widgets.table.enable-sticky-header' | translate }}
+      </mat-slide-toggle>
+    </div>
+    <div class="tb-widget-config-panel stroked">
+      <div class="tb-widget-config-panel-title" translate>widgets.table.header-buttons</div>
+      <mat-slide-toggle class="mat-slide"  formControlName="enableSearch">
+        {{ 'widgets.table.enable-alarms-search' | translate }}
+      </mat-slide-toggle>
+      <mat-slide-toggle class="mat-slide"  formControlName="enableSelectColumnDisplay">
+        {{ 'widgets.table.enable-select-column-display' | translate }}
+      </mat-slide-toggle>
+      <mat-slide-toggle class="mat-slide"  formControlName="enableFilter">
+        {{ 'widgets.table.enable-alarm-filter' | translate }}
+      </mat-slide-toggle>
+    </div>
+  </div>
+  <div class="tb-widget-config-panel">
+    <div class="tb-widget-config-panel-title" translate>widgets.table.columns</div>
+    <mat-slide-toggle class="mat-slide"  formControlName="enableSelection">
+      {{ 'widgets.table.enable-alarms-selection' | translate }}
+    </mat-slide-toggle>
+    <div class="tb-widget-config-row">
+      <mat-slide-toggle class="mat-slide"  formControlName="enableStickyAction">
+        {{ 'widgets.table.enable-sticky-action' | translate }}
+      </mat-slide-toggle>
+    </div>
+    <div class="tb-widget-config-panel stroked">
+      <div class="tb-widget-config-panel-title" translate>widgets.table.table-buttons</div>
+      <mat-slide-toggle class="mat-slide" formControlName="displayActivity">
+        {{ 'widgets.table.display-alarm-activity' | translate }}
+      </mat-slide-toggle>
+      <mat-slide-toggle class="mat-slide" formControlName="displayDetails">
+        {{ 'widgets.table.display-alarm-details' | translate }}
+      </mat-slide-toggle>
+      <mat-slide-toggle class="mat-slide" formControlName="allowAssign">
+        {{ 'widgets.table.allow-alarms-assign' | translate }}
+      </mat-slide-toggle>
+      <mat-slide-toggle class="mat-slide" formControlName="allowAcknowledgment">
+        {{ 'widgets.table.allow-alarms-ack' | translate }}
+      </mat-slide-toggle>
+      <mat-slide-toggle class="mat-slide" formControlName="allowClear">
+        {{ 'widgets.table.allow-alarms-clear' | translate }}
+      </mat-slide-toggle>
+    </div>
+    <mat-form-field fxFlex subscriptSizing="dynamic">
      <mat-label translate>widgets.table.hidden-cell-button-display-mode</mat-label>
      <mat-select formControlName="reserveSpaceForHiddenAction">
        <mat-option [value]="'true'">
@ -57,48 +81,34 @@
        </mat-option>
      </mat-select>
    </mat-form-field>
-    <section fxLayout="column" fxLayoutGap="8px">
-      <mat-slide-toggle formControlName="displayActivity">
-        {{ 'widgets.table.display-alarm-activity' | translate }}
-      </mat-slide-toggle>
-      <mat-slide-toggle fxFlex formControlName="displayDetails">
-        {{ 'widgets.table.display-alarm-details' | translate }}
-      </mat-slide-toggle>
-      <mat-slide-toggle formControlName="allowAcknowledgment">
-        {{ 'widgets.table.allow-alarms-ack' | translate }}
-      </mat-slide-toggle>
-      <mat-slide-toggle formControlName="allowClear">
-        {{ 'widgets.table.allow-alarms-clear' | translate }}
-      </mat-slide-toggle>
-      <mat-slide-toggle formControlName="allowAssign">
-        {{ 'widgets.table.allow-alarms-assign' | translate }}
-      </mat-slide-toggle>
-      <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
-        <mat-slide-toggle fxFlex formControlName="displayPagination">
-          {{ 'widgets.table.display-pagination' | translate }}
-        </mat-slide-toggle>
-        <mat-form-field fxFlex class="mat-block">
-          <mat-label translate>widgets.table.default-page-size</mat-label>
-          <input matInput type="number" min="1" step="1" formControlName="defaultPageSize">
-        </mat-form-field>
-      </section>
-      <mat-form-field fxFlex class="mat-block">
-        <mat-label translate>widgets.table.default-sort-order</mat-label>
-        <input matInput formControlName="defaultSortOrder">
+    <mat-form-field fxFlex subscriptSizing="dynamic">
+      <mat-label translate>widgets.table.default-sort-order</mat-label>
+      <input matInput formControlName="defaultSortOrder">
+    </mat-form-field>
+  </div>
+  <div class="tb-widget-config-panel">
+    <div class="tb-widget-config-panel-title" translate>widgets.table.pagination</div>
+    <mat-slide-toggle class="mat-slide" formControlName="displayPagination">
+      {{ 'widgets.table.display-pagination' | translate }}
+    </mat-slide-toggle>
+    <div class="tb-widget-config-row space-between">
+      <div translate>widgets.table.default-page-size</div>
+      <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+        <input matInput formControlName="defaultPageSize" type="number" min="1" step="1" placeholder="{{ 'widget-config.set' | translate }}">
      </mat-form-field>
-    </section>
-  </fieldset>
-  <fieldset class="fields-group fields-group-slider">
-    <legend class="group-title" translate>widgets.table.row-style</legend>
+    </div>
+  </div>
+  <div class="tb-widget-config-panel tb-slide-toggle">
+    <div class="tb-widget-config-panel-title" translate>widgets.table.rows</div>
    <mat-expansion-panel class="tb-settings" [expanded]="alarmsTableWidgetSettingsForm.get('useRowStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
-        <mat-panel-title>
-          <mat-slide-toggle formControlName="useRowStyleFunction" (click)="$event.stopPropagation()"
+      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+        <mat-panel-title fxFlex="60">
+          <mat-slide-toggle class="mat-slide" formControlName="useRowStyleFunction" (click)="$event.stopPropagation()"
                            fxLayoutAlign="center">
            {{ 'widgets.table.use-row-style-function' | translate }}
          </mat-slide-toggle>
        </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
          widget-config.advanced-settings
        </mat-panel-description>
      </mat-expansion-panel-header>
@ -112,5 +122,5 @@
        </tb-js-func>
      </ng-template>
    </mat-expansion-panel>
-  </fieldset>
-</section>
+  </div>
+</ng-container>
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@ -5270,6 +5270,7 @@
            "columns-to-display": "Columns to display",
            "table-header": "Table header",
            "header-buttons": "Header buttons",
+            "table-buttons": "Table buttons",
            "pagination": "Pagination",
            "rows": "Rows",
            "timeseries-column-error": "At least one timeseries column should be specified",