dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Flex layout replacements. Switch to tailwind.css.

Browse Source
This commit is contained in:
Igor Kulikov 2024-10-11 19:23:41 +03:00
parent 116611393c
commit ae8cf7d2e5
5 changed files with 110 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.html
View File

@ -15,18 +15,18 @@
limitations under the License.
-->
<div fxLayout="column">
<div class="flex flex-col">
<div class="tb-tenant-profile-queues"
*ngFor="let queuesControl of queuesFormArray.controls; trackBy: trackByQueue;
let $index = index; last as isLast;"
[ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
<mat-expansion-panel fxFlex [expanded]="true">
[class.pb-2]="!isLast">
<mat-expansion-panel class="flex-1" [expanded]="true">
<mat-expansion-panel-header>
<div fxFlex fxLayout="row" fxLayoutAlign="start center">
<div class="flex-1 flex flex-row justify-start items-center">
<mat-panel-title>
{{ getTitle(queuesControl.value.name) }}
</mat-panel-title>
<span fxFlex></span>
<span class="flex-1"></span>
<button *ngIf="!($index === 0) && !disabled" mat-icon-button style="min-width: 40px;"
type="button"
(click)="removeQueue($index)"
@ -42,8 +42,8 @@
</mat-expansion-panel>
</div>
<div *ngIf="!queuesFormArray.controls.length">
<span translate fxLayoutAlign="center center"
class="tb-prompt">tenant-profile.no-queue</span>
<span translate
class="tb-prompt flex justify-center items-center">tenant-profile.no-queue</span>
</div>
<div *ngIf="!disabled" style="padding-top: 16px;">
<button mat-raised-button color="primary"

188
ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
View File

@ -15,13 +15,13 @@
limitations under the License.
-->
<section [formGroup]="defaultTenantProfileConfigurationFormGroup" fxLayout="column">
<section [formGroup]="defaultTenantProfileConfigurationFormGroup" class="flex flex-col">
<fieldset class="fields-group">
<legend class="group-title">
{{ 'tenant-profile.entities' | translate }} <span translate>tenant-profile.unlimited</span>
</legend>
<div class="fields-element" fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
<div class="fields-element flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
<mat-label translate>tenant-profile.maximum-devices</mat-label>
<input matInput required min="0" step="1"
formControlName="maxDevices"
@ -34,7 +34,7 @@
</mat-error>
<mat-hint></mat-hint>
</mat-form-field>
<mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
<mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
<mat-label translate>tenant-profile.maximum-dashboards</mat-label>
<input matInput required min="0" step="1"
formControlName="maxDashboards"
@ -48,8 +48,8 @@
<mat-hint></mat-hint>
</mat-form-field>
</div>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
<div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
<mat-label translate>tenant-profile.maximum-assets</mat-label>
<input matInput required min="0" step="1"
formControlName="maxAssets"
@ -62,7 +62,7 @@
</mat-error>
<mat-hint></mat-hint>
</mat-form-field>
<mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
<mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
<mat-label translate>tenant-profile.maximum-users</mat-label>
<input matInput required min="0" step="1"
formControlName="maxUsers"
@ -78,13 +78,13 @@
</div>
<mat-expansion-panel class="configuration-panel">
<mat-expansion-panel-header>
<mat-panel-description fxLayoutAlign="end" translate>
<mat-panel-description class="flex justify-end items-stretch" translate>
tenant-profile.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
<div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
<mat-label translate>tenant-profile.maximum-customers</mat-label>
<input matInput required min="0" step="1"
formControlName="maxCustomers"
@ -97,7 +97,7 @@
</mat-error>
<mat-hint></mat-hint>
</mat-form-field>
<mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
<mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
<mat-label translate>tenant-profile.maximum-rule-chains</mat-label>
<input matInput required min="0" step="1"
formControlName="maxRuleChains"
@ -119,8 +119,8 @@
<legend class="group-title">
{{ 'tenant-profile.rule-engine' | translate }} <span translate>tenant-profile.unlimited</span>
</legend>
<div class="fields-element" fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
<div class="fields-element flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
<mat-label translate>tenant-profile.max-r-e-executions</mat-label>
<input matInput required min="0" step="1"
formControlName="maxREExecutions"
@ -133,7 +133,7 @@
</mat-error>
<mat-hint></mat-hint>
</mat-form-field>
<mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
<mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
<mat-label translate>tenant-profile.max-transport-messages</mat-label>
<input matInput required min="0" step="1"
formControlName="maxTransportMessages"
@ -149,13 +149,13 @@
</div>
<mat-expansion-panel class="configuration-panel">
<mat-expansion-panel-header>
<mat-panel-description fxLayoutAlign="end" translate>
<mat-panel-description class="flex justify-end items-stretch" translate>
tenant-profile.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
<div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
<mat-label translate>tenant-profile.max-j-s-executions</mat-label>
<input matInput required min="0" step="1"
formControlName="maxJSExecutions"
@ -168,7 +168,7 @@
</mat-error>
<mat-hint></mat-hint>
</mat-form-field>
<mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
<mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
<mat-label translate>tenant-profile.max-tbel-executions</mat-label>
<input matInput required min="0" step="1"
formControlName="maxTbelExecutions"
@ -182,8 +182,8 @@
<mat-hint></mat-hint>
</mat-form-field>
</div>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
<div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
<mat-label translate>tenant-profile.max-rule-node-executions-per-message</mat-label>
<input matInput required min="0" step="1"
formControlName="maxRuleNodeExecutionsPerMessage"
@ -196,7 +196,7 @@
</mat-error>
<mat-hint></mat-hint>
</mat-form-field>
<mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
<mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
<mat-label translate>tenant-profile.max-transport-data-points</mat-label>
<input matInput required min="0" step="1"
formControlName="maxTransportDataPoints"
@ -218,8 +218,8 @@
<legend class="group-title">
{{ 'tenant-profile.time-to-live' | translate }} <span translate>tenant-profile.unlimited</span>
</legend>
<div class="fields-element" fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
<div class="fields-element flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
<mat-label translate>tenant-profile.max-d-p-storage-days</mat-label>
<input matInput required min="0" step="1"
formControlName="maxDPStorageDays"
@ -232,7 +232,7 @@
</mat-error>
<mat-hint></mat-hint>
</mat-form-field>
<mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
<mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
<mat-label translate>tenant-profile.alarms-ttl-days</mat-label>
<input matInput required min="0" step="1"
formControlName="alarmsTtlDays"
@ -246,8 +246,8 @@
<mat-hint></mat-hint>
</mat-form-field>
</div>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
<div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
<mat-label translate>tenant-profile.default-storage-ttl-days</mat-label>
<input matInput required min="0" step="1"
formControlName="defaultStorageTtlDays"
@ -260,7 +260,7 @@
</mat-error>
<mat-hint></mat-hint>
</mat-form-field>
<mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
<mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
<mat-label translate>tenant-profile.rpc-ttl-days</mat-label>
<input matInput required min="0" step="1"
formControlName="rpcTtlDays"
@ -274,8 +274,8 @@
<mat-hint></mat-hint>
</mat-form-field>
</div>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
<div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
<mat-label translate>tenant-profile.queue-stats-ttl-days</mat-label>
<input matInput required min="0" step="1"
formControlName="queueStatsTtlDays"
@ -288,7 +288,7 @@
</mat-error>
<mat-hint></mat-hint>
</mat-form-field>
<mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
<mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
<mat-label translate>tenant-profile.rule-engine-exceptions-ttl-days</mat-label>
<input matInput required min="0" step="1"
formControlName="ruleEngineExceptionsTtlDays"
@ -308,10 +308,10 @@
<legend class="group-title">
{{ 'tenant-profile.alarms-and-notifications' | translate }} <span translate>tenant-profile.unlimited</span>
</legend>
<mat-slide-toggle class="slide-toggle-element" fxFlex formControlName="smsEnabled">
<mat-slide-toggle class="slide-toggle-element flex-1" formControlName="smsEnabled">
{{ 'tenant-profile.sms-enabled' | translate }}
</mat-slide-toggle>
<mat-form-field *ngIf="defaultTenantProfileConfigurationFormGroup.get('smsEnabled').value" fxFlex class="mat-block"
<mat-form-field *ngIf="defaultTenantProfileConfigurationFormGroup.get('smsEnabled').value" class="mat-block flex-1"
appearance="fill" subscriptSizing="dynamic">
<mat-label translate>tenant-profile.max-sms</mat-label>
<input matInput required min="0" step="1"
@ -324,8 +324,8 @@
{{ 'tenant-profile.max-sms-range' | translate}}
</mat-error>
</mat-form-field>
<div class="fields-element" fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
<div class="fields-element flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
<mat-label translate>tenant-profile.max-emails</mat-label>
<input matInput required min="0" step="1"
formControlName="maxEmails"
@ -338,7 +338,7 @@
</mat-error>
<mat-hint></mat-hint>
</mat-form-field>
<mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
<mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
<mat-label translate>tenant-profile.max-created-alarms</mat-label>
<input matInput required min="0" step="1"
formControlName="maxCreatedAlarms"
@ -358,8 +358,8 @@
<legend class="group-title">
{{ 'tenant-profile.ota-files-in-bytes' | translate }} <span translate>tenant-profile.unlimited</span>
</legend>
<div class="fields-element" fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
<div class="fields-element flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
<mat-label translate>tenant-profile.maximum-resources-sum-data-size</mat-label>
<input matInput required min="0" step="1"
formControlName="maxResourcesInBytes"
@ -372,7 +372,7 @@
</mat-error>
<mat-hint></mat-hint>
</mat-form-field>
<mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
<mat-form-field class="mat-block flex-1" appearance="fill" subscriptSizing="dynamic">
<mat-label translate>tenant-profile.maximum-ota-packages-sum-data-size</mat-label>
<input matInput required min="0" step="1"
formControlName="maxOtaPackagesInBytes"
@ -386,8 +386,8 @@
<mat-hint></mat-hint>
</mat-form-field>
</div>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<mat-form-field fxFlex class="mat-block" appearance="fill">
<div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<mat-form-field class="mat-block flex-1" appearance="fill">
<mat-label translate>tenant-profile.maximum-resource-size</mat-label>
<input matInput required min="0" step="1"
formControlName="maxResourceSize"
@ -400,7 +400,7 @@
</mat-error>
<mat-hint></mat-hint>
</mat-form-field>
<div fxFlex></div>
<div class="flex-1"></div>
</div>
</fieldset>
@ -408,15 +408,15 @@
<legend class="group-title">
{{ 'tenant-profile.ws-title' | translate }} <span translate>tenant-profile.unlimited</span>
</legend>
<div class="fields-element" fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<mat-form-field fxFlex class="mat-block" appearance="fill">
<div class="fields-element flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<mat-form-field class="mat-block flex-1" appearance="fill">
<mat-label translate>tenant-profile.ws-limit-max-sessions-per-tenant</mat-label>
<input matInput type="number" formControlName="maxWsSessionsPerTenant">
<mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSessionsPerTenant').hasError('min')">
{{ 'tenant-profile.too-small-value-zero' | translate}}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block" appearance="fill">
<mat-form-field class="mat-block flex-1" appearance="fill">
<mat-label translate>tenant-profile.ws-limit-max-subscriptions-per-tenant</mat-label>
<input matInput type="number" formControlName="maxWsSubscriptionsPerTenant">
<mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSubscriptionsPerTenant').hasError('min')">
@ -424,15 +424,15 @@
</mat-error>
</mat-form-field>
</div>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<mat-form-field fxFlex class="mat-block" appearance="fill">
<div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<mat-form-field class="mat-block flex-1" appearance="fill">
<mat-label translate>tenant-profile.ws-limit-max-sessions-per-customer</mat-label>
<input matInput type="number" formControlName="maxWsSessionsPerCustomer">
<mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSessionsPerCustomer').hasError('min')">
{{ 'tenant-profile.too-small-value-zero' | translate}}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block" appearance="fill">
<mat-form-field class="mat-block flex-1" appearance="fill">
<mat-label translate>tenant-profile.ws-limit-max-subscriptions-per-customer</mat-label>
<input matInput type="number" formControlName="maxWsSubscriptionsPerCustomer">
<mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSubscriptionsPerCustomer').hasError('min')">
@ -442,20 +442,20 @@
</div>
<mat-expansion-panel class="configuration-panel">
<mat-expansion-panel-header>
<mat-panel-description fxLayoutAlign="end" translate>
<mat-panel-description class="flex justify-end items-stretch" translate>
tenant-profile.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<mat-form-field fxFlex class="mat-block" appearance="fill">
<div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<mat-form-field class="mat-block flex-1" appearance="fill">
<mat-label translate>tenant-profile.ws-limit-max-sessions-per-public-user</mat-label>
<input matInput type="number" formControlName="maxWsSessionsPerPublicUser">
<mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSessionsPerPublicUser').hasError('min')">
{{ 'tenant-profile.too-small-value-zero' | translate}}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block" appearance="fill">
<mat-form-field class="mat-block flex-1" appearance="fill">
<mat-label translate>tenant-profile.ws-limit-max-subscriptions-per-public-user</mat-label>
<input matInput type="number" formControlName="maxWsSubscriptionsPerPublicUser">
<mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSubscriptionsPerPublicUser').hasError('min')">
@ -463,15 +463,15 @@
</mat-error>
</mat-form-field>
</div>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<mat-form-field fxFlex class="mat-block" appearance="fill">
<div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<mat-form-field class="mat-block flex-1" appearance="fill">
<mat-label translate>tenant-profile.ws-limit-max-sessions-per-regular-user</mat-label>
<input matInput type="number" formControlName="maxWsSessionsPerRegularUser">
<mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSessionsPerRegularUser').hasError('min')">
{{ 'tenant-profile.too-small-value-zero' | translate}}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block" appearance="fill">
<mat-form-field class="mat-block flex-1" appearance="fill">
<mat-label translate>tenant-profile.ws-limit-max-subscriptions-per-regular-user</mat-label>
<input matInput type="number" formControlName="maxWsSubscriptionsPerRegularUser">
<mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxWsSubscriptionsPerRegularUser').hasError('min')">
@ -479,8 +479,8 @@
</mat-error>
</mat-form-field>
</div>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<mat-form-field fxFlex class="mat-block" appearance="fill">
<div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<mat-form-field class="mat-block flex-1" appearance="fill">
<mat-label translate>tenant-profile.ws-limit-queue-per-session</mat-label>
<input matInput type="number" formControlName="wsMsgQueueLimitPerSession">
<mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('wsMsgQueueLimitPerSession').hasError('min')">
@ -490,7 +490,7 @@
{{ 'tenant-profile.queue-size-is-limited-by-system-configuration' | translate}}
</mat-hint>
</mat-form-field>
<div fxFlex></div>
<div class="flex-1"></div>
</div>
</ng-template>
</mat-expansion-panel>
@ -500,106 +500,106 @@
<legend class="group-title">
{{ 'tenant-profile.rate-limits.rate-limits' | translate }}
</legend>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<tb-rate-limits fxFlex formControlName="transportTenantMsgRateLimit"
<div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<tb-rate-limits class="flex-1" formControlName="transportTenantMsgRateLimit"
[type]="rateLimitsType.TENANT_MESSAGES">
</tb-rate-limits>
<tb-rate-limits fxFlex formControlName="transportDeviceMsgRateLimit"
<tb-rate-limits class="flex-1" formControlName="transportDeviceMsgRateLimit"
[type]="rateLimitsType.DEVICE_MESSAGES">
</tb-rate-limits>
</div>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<tb-rate-limits fxFlex formControlName="transportTenantTelemetryMsgRateLimit"
<div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<tb-rate-limits class="flex-1" formControlName="transportTenantTelemetryMsgRateLimit"
[type]="rateLimitsType.TENANT_TELEMETRY_MESSAGES">
</tb-rate-limits>
<tb-rate-limits fxFlex formControlName="transportDeviceTelemetryMsgRateLimit"
<tb-rate-limits class="flex-1" formControlName="transportDeviceTelemetryMsgRateLimit"
[type]="rateLimitsType.DEVICE_TELEMETRY_MESSAGES">
</tb-rate-limits>
</div>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<tb-rate-limits fxFlex formControlName="transportGatewayMsgRateLimit"
<div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<tb-rate-limits class="flex-1" formControlName="transportGatewayMsgRateLimit"
[type]="rateLimitsType.GATEWAY_MESSAGES">
</tb-rate-limits>
<tb-rate-limits fxFlex formControlName="transportGatewayDeviceMsgRateLimit"
<tb-rate-limits class="flex-1" formControlName="transportGatewayDeviceMsgRateLimit"
[type]="rateLimitsType.GATEWAY_DEVICE_MESSAGES">
</tb-rate-limits>
</div>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<tb-rate-limits fxFlex formControlName="transportGatewayTelemetryMsgRateLimit"
<div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<tb-rate-limits class="flex-1" formControlName="transportGatewayTelemetryMsgRateLimit"
[type]="rateLimitsType.GATEWAY_TELEMETRY_MESSAGES">
</tb-rate-limits>
<tb-rate-limits fxFlex formControlName="transportGatewayDeviceTelemetryMsgRateLimit"
<tb-rate-limits class="flex-1" formControlName="transportGatewayDeviceTelemetryMsgRateLimit"
[type]="rateLimitsType.GATEWAY_DEVICE_TELEMETRY_MESSAGES">
</tb-rate-limits>
</div>
<mat-expansion-panel class="configuration-panel">
<mat-expansion-panel-header>
<mat-panel-description fxLayoutAlign="end" translate>
<mat-panel-description class="flex justify-end items-stretch" translate>
tenant-profile.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<tb-rate-limits fxFlex formControlName="transportTenantTelemetryDataPointsRateLimit"
<div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<tb-rate-limits class="flex-1" formControlName="transportTenantTelemetryDataPointsRateLimit"
[type]="rateLimitsType.TENANT_TELEMETRY_DATA_POINTS">
</tb-rate-limits>
<tb-rate-limits fxFlex formControlName="transportDeviceTelemetryDataPointsRateLimit"
<tb-rate-limits class="flex-1" formControlName="transportDeviceTelemetryDataPointsRateLimit"
[type]="rateLimitsType.DEVICE_TELEMETRY_DATA_POINTS">
</tb-rate-limits>
</div>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<tb-rate-limits fxFlex formControlName="transportGatewayTelemetryDataPointsRateLimit"
<div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<tb-rate-limits class="flex-1" formControlName="transportGatewayTelemetryDataPointsRateLimit"
[type]="rateLimitsType.GATEWAY_TELEMETRY_DATA_POINTS">
</tb-rate-limits>
<tb-rate-limits fxFlex formControlName="transportGatewayDeviceTelemetryDataPointsRateLimit"
<tb-rate-limits class="flex-1" formControlName="transportGatewayDeviceTelemetryDataPointsRateLimit"
[type]="rateLimitsType.GATEWAY_DEVICE_TELEMETRY_DATA_POINTS">
</tb-rate-limits>
</div>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<tb-rate-limits fxFlex formControlName="tenantServerRestLimitsConfiguration"
<div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<tb-rate-limits class="flex-1" formControlName="tenantServerRestLimitsConfiguration"
[type]="rateLimitsType.TENANT_SERVER_REST_LIMITS_CONFIGURATION">
</tb-rate-limits>
<tb-rate-limits fxFlex formControlName="customerServerRestLimitsConfiguration"
<tb-rate-limits class="flex-1" formControlName="customerServerRestLimitsConfiguration"
[type]="rateLimitsType.CUSTOMER_SERVER_REST_LIMITS_CONFIGURATION">
</tb-rate-limits>
</div>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<tb-rate-limits fxFlex formControlName="tenantEntityExportRateLimit"
<div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<tb-rate-limits class="flex-1" formControlName="tenantEntityExportRateLimit"
[type]="rateLimitsType.TENANT_ENTITY_EXPORT_RATE_LIMIT">
</tb-rate-limits>
<tb-rate-limits fxFlex formControlName="tenantEntityImportRateLimit"
<tb-rate-limits class="flex-1" formControlName="tenantEntityImportRateLimit"
[type]="rateLimitsType.TENANT_ENTITY_IMPORT_RATE_LIMIT">
</tb-rate-limits>
</div>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<tb-rate-limits fxFlex formControlName="wsUpdatesPerSessionRateLimit"
<div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<tb-rate-limits class="flex-1" formControlName="wsUpdatesPerSessionRateLimit"
[type]="rateLimitsType.WS_UPDATE_PER_SESSION_RATE_LIMIT">
</tb-rate-limits>
<tb-rate-limits fxFlex formControlName="cassandraQueryTenantRateLimitsConfiguration"
<tb-rate-limits class="flex-1" formControlName="cassandraQueryTenantRateLimitsConfiguration"
[type]="rateLimitsType.CASSANDRA_QUERY_TENANT_RATE_LIMITS_CONFIGURATION">
</tb-rate-limits>
</div>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<tb-rate-limits fxFlex="50" formControlName="tenantNotificationRequestsRateLimit"
<div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<tb-rate-limits class="flex-1" formControlName="tenantNotificationRequestsRateLimit"
[type]="rateLimitsType.TENANT_NOTIFICATION_REQUEST_RATE_LIMIT">
</tb-rate-limits>
<tb-rate-limits fxFlex="50" formControlName="tenantNotificationRequestsPerRuleRateLimit"
<tb-rate-limits class="flex-1" formControlName="tenantNotificationRequestsPerRuleRateLimit"
[type]="rateLimitsType.TENANT_NOTIFICATION_REQUESTS_PER_RULE_RATE_LIMIT">
</tb-rate-limits>
</div>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<tb-rate-limits fxFlex="50" formControlName="edgeEventRateLimits"
<div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<tb-rate-limits class="flex-1" formControlName="edgeEventRateLimits"
[type]="rateLimitsType.EDGE_EVENTS_RATE_LIMIT">
</tb-rate-limits>
<tb-rate-limits fxFlex="50" formControlName="edgeEventRateLimitsPerEdge"
<tb-rate-limits class="flex-1" formControlName="edgeEventRateLimitsPerEdge"
[type]="rateLimitsType.EDGE_EVENTS_PER_EDGE_RATE_LIMIT">
</tb-rate-limits>
</div>
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
<tb-rate-limits fxFlex="50" formControlName="edgeUplinkMessagesRateLimits"
<div class="flex-1 flex flex-row xs:flex-col gt-xs:gap-4">
<tb-rate-limits class="flex-1" formControlName="edgeUplinkMessagesRateLimits"
[type]="rateLimitsType.EDGE_UPLINK_MESSAGES_RATE_LIMIT">
</tb-rate-limits>
<tb-rate-limits fxFlex="50" formControlName="edgeUplinkMessagesRateLimitsPerEdge"
<tb-rate-limits class="flex-1" formControlName="edgeUplinkMessagesRateLimitsPerEdge"
[type]="rateLimitsType.EDGE_UPLINK_MESSAGES_PER_EDGE_RATE_LIMIT">
</tb-rate-limits>
</div>

4
ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component.html
View File

@ -18,7 +18,7 @@
<form [formGroup]="editDetailsFormGroup">
<mat-toolbar color="primary">
<h2>{{ title | translate }}</h2>
<span fxFlex></span>
<span class="flex-1"></span>
<button mat-icon-button
[matDialogClose]="undefined"
type="button">
@ -28,7 +28,7 @@
<div mat-dialog-content>
<tb-rate-limits-list formControlName="rateLimits"></tb-rate-limits-list>
</div>
<div mat-dialog-actions fxLayoutAlign="end center">
<div mat-dialog-actions class="flex justify-end items-center">
<button mat-button color="primary"
type="button"
[matDialogClose]="undefined"

10
ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html
View File

@ -16,12 +16,12 @@
-->
<section class="tb-rate-limits-form" [formGroup]="rateLimitsListFormGroup">
<div fxFlex [formGroup]="rateLimit" *ngFor="let rateLimit of rateLimitsFormArray.controls; let $index = index">
<div class="flex-1" [formGroup]="rateLimit" *ngFor="let rateLimit of rateLimitsFormArray.controls; let $index = index">
<div class="tb-rate-limits-operation" *ngIf="$index > 0 && rateLimitsFormArray.controls.length > 1" translate>
tenant-profile.rate-limits.but-less-than
</div>
<div fxFlex fxLayout="row" fxLayoutGap="8px">
<mat-form-field fxFlex hideRequiredMarker appearance="fill" class="mat-block">
<div class="flex-1 flex flex-row gap-2">
<mat-form-field hideRequiredMarker appearance="fill" class="mat-block flex-1">
<mat-label translate>tenant-profile.rate-limits.number-of-messages</mat-label>
<input matInput placeholder="{{ 'tenant-profile.rate-limits.number-of-messages' | translate }}"
type="number" min="1" step="1" formControlName="value" required>
@ -32,7 +32,7 @@
{{ 'tenant-profile.rate-limits.number-of-messages-min' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex hideRequiredMarker appearance="fill" class="mat-block">
<mat-form-field hideRequiredMarker appearance="fill" class="mat-block flex-1">
<mat-label translate>tenant-profile.rate-limits.per-seconds</mat-label>
<input matInput placeholder="{{ 'tenant-profile.rate-limits.per-seconds' | translate }}"
type="number" min="1" step="1" formControlName="time" required>
@ -59,7 +59,7 @@
[matTooltip]="'tenant-profile.rate-limits.add-limit' | translate" matTooltipPosition="above">
<span translate>tenant-profile.rate-limits.add-limit</span>
</button>
<div fxFlex fxLayoutGap="8px" fxLayout="column" class="tb-rate-limits-preview" [ngClass]="{'tb-rate-limits-preview-short': !disabled}">
<div class="tb-rate-limits-preview flex-1 flex flex-col gap-2" [class.tb-rate-limits-preview-short]="!disabled">
<span translate>tenant-profile.rate-limits.preview</span>
<tb-rate-limits-text [rateLimitsArray]="rateLimitsArray" [disabled]="disabled"></tb-rate-limits-text>
</div>

4
ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.html
View File

@ -15,10 +15,10 @@
limitations under the License.
-->
<div fxFlex fxLayout="row" fxLayoutGap="8px">
<div class="flex-1 flex flex-row gap-2">
<fieldset class="fieldset-element">
<legend class="legend-element">{{ label | translate }}</legend>
<div [formGroup]="rateLimitsFormGroup" fxFlex fxLayout="row" fxLayoutGap="8px"
<div [formGroup]="rateLimitsFormGroup" class="flex-1 flex flex-row gap-2"
(click)="onClick($event)"
[matTooltip]="'tenant-profile.rate-limits.edit-limit' | translate" matTooltipPosition="above">
<tb-rate-limits-text [rateLimitsArray]="rateLimitsArray" [disabled]="disabled"></tb-rate-limits-text>