reuse of existing components

application/src/main/data/json/demo/dashboards/gateway_list.json

@@ -1907,7 +1907,7 @@
                 "dialogTitle": "Launch command",
                 "dialogHideDashboardToolbar": true,
                 "dialogWidth": null,
-                "dialogHeight": 35,
+                "dialogHeight": 40,
                 "openInSeparateDialog": true,
                 "openInPopover": false,
                 "id": "337c767b-3217-d3d3-b955-7b0bd0858a1d"
@@ -5087,14 +5087,14 @@
             "useMarkdownTextFunction": true,
             "markdownTextFunction": "return `<div class=\"action-container\">\n<tb-gateway-command deviceId=\"${data[0].entityId}\"></tb-gateway-command>\n </div>`;",
             "applyDefaultMarkdownStyle": false,
-            "markdownCss": ".action-container {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    flex-direction: row;\r\n    height: 100%;\r\n    width: 100%;\r\n    align-content: center;\r\n}\r\n\r\nbutton {\r\n    flex-grow: 1;\r\n    margin: 10px;\r\n    min-width: 150px;\r\n    height: auto;\r\n}"
+            "markdownCss": ".action-container {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    flex-direction: row;\r\n    height: 100%;\r\n    width: 100%;\r\n}\r\n\r\nbutton {\r\n    flex-grow: 1;\r\n    margin: 10px;\r\n    min-width: 150px;\r\n    height: auto;\r\n}"
           },
           "title": "New Markdown/HTML Card",
           "showTitleIcon": false,
           "iconColor": "rgba(0, 0, 0, 0.87)",
           "iconSize": "24px",
           "titleTooltip": "",
-          "dropShadow": true,
+          "dropShadow": false,
           "enableFullscreen": false,
           "widgetStyle": {},
           "titleStyle": {

ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.html

@@ -17,39 +17,57 @@
 -->
 <div mat-dialog-content tb-toast fxLayout="column" toastTarget="dockerCommandDialogContent">
   <span style="padding-bottom: 15px;">{{ 'gateway.docker-label' | translate }}</span>
-  <div fxFlex fxLayout="row" style="justify-content: space-between; flex-grow: 0">
+  <div fxFlex fxLayout="row" style="justify-content: space-between; flex-grow: 0; align-items: center">
-    <mat-button-toggle-group [formControl]="selectedOSCControl" aria-label="Favorite Color" style="width: max-content; flex-grow: 0">
+    <tb-toggle-select [formControl]="selectedOSCControl" appearance="stroked" style="width: max-content; flex-grow: 0">
-      <mat-button-toggle [value]="osTypes.windows"><span translate>gateway.windows </span></mat-button-toggle>
+      <tb-toggle-option [value]="osTypes.windows"><span>Windows </span></tb-toggle-option>
-      <mat-button-toggle [value]="osTypes.linux"><span translate>gateway.linux-macos </span></mat-button-toggle>
+      <tb-toggle-option [value]="osTypes.linux"><span>Linux/MacOS </span></tb-toggle-option>
-    </mat-button-toggle-group>
+    </tb-toggle-select>
     <div class="tb-help" [tb-help]="helpLink"></div>
   </div>
-  <div class="mat-content" fxLayout="column" *ngIf="selectedOSCControl.value !== osTypes.windows">
+  <ng-container [ngSwitch]="selectedOSCControl.value">
-    <div fxLayout="row" fxLayoutAlign="start center">
+    <ng-template [ngSwitchCase]="osTypes.windows">
-      <pre class="tb-highlight" fxFlex><code style="white-space: pre-wrap;">{{ linuxCode }}</code></pre>
+      <tb-markdown usePlainMarkdown containerClass="start-code" data="
-      <button mat-icon-button
+                    ```bash
-              color="primary"
+                    {{windowsCode}}
-              ngxClipboard
+                    {:copy-code}
-              cbContent="{{ linuxCode }}"
+                    ```
-              (cbOnSuccess)="onDockerCodeCopied()"
+                "></tb-markdown>
-              matTooltip="{{ 'gateway.copy-command' | translate }}"
+    </ng-template>
-              matTooltipPosition="above">
+    <ng-template [ngSwitchCase]="osTypes.linux">
-        <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
+      <tb-markdown usePlainMarkdown containerClass="start-code" data="
-      </button>
+                    ```bash
-    </div>
+                    {{linuxCode}}
-  </div>
+                    {:copy-code}
-  <div class="mat-content" fxLayout="column" *ngIf="selectedOSCControl.value === osTypes.windows">
+                    ```
-    <div fxLayout="row" fxLayoutAlign="start center">
+                "></tb-markdown>
-      <pre class="tb-highlight" fxFlex><code style="white-space: pre-wrap;">{{ windowsCode }}</code></pre>
+    </ng-template>
-      <button mat-icon-button
+  </ng-container>
-              color="primary"
+<!--  <div class="mat-content" fxLayout="column" *ngIf="selectedOSCControl.value !== osTypes.windows">-->
-              ngxClipboard
+<!--    <div fxLayout="row" fxLayoutAlign="start center">-->
-              cbContent="{{ windowsCode }}"
+<!--      <pre class="tb-highlight" fxFlex><code style="white-space: pre-wrap;">{{ linuxCode }}</code></pre>-->
-              (cbOnSuccess)="onDockerCodeCopied()"
+<!--      <button mat-icon-button-->
-              matTooltip="{{ 'gateway.copy-command' | translate }}"
+<!--              color="primary"-->
-              matTooltipPosition="above">
+<!--              ngxClipboard-->
-        <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
+<!--              cbContent="{{ linuxCode }}"-->
-      </button>
+<!--              (cbOnSuccess)="onDockerCodeCopied()"-->
-    </div>
+<!--              matTooltip="{{ 'gateway.copy-command' | translate }}"-->
-  </div>
+<!--              matTooltipPosition="above">-->
+<!--        <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>-->
+<!--      </button>-->
+<!--    </div>-->
+<!--  </div>-->
+<!--  <div class="mat-content" fxLayout="column" *ngIf="selectedOSCControl.value === osTypes.windows">-->
+<!--    <div fxLayout="row" fxLayoutAlign="start center">-->
+<!--      <pre class="tb-highlight" fxFlex><code style="white-space: pre-wrap;">{{ windowsCode }}</code></pre>-->
+<!--      <button mat-icon-button-->
+<!--              color="primary"-->
+<!--              ngxClipboard-->
+<!--              cbContent="{{ windowsCode }}"-->
+<!--              (cbOnSuccess)="onDockerCodeCopied()"-->
+<!--              matTooltip="{{ 'gateway.copy-command' | translate }}"-->
+<!--              matTooltipPosition="above">-->
+<!--        <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>-->
+<!--      </button>-->
+<!--    </div>-->
+<!--  </div>-->
 </div>

ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.scss

@@ -0,0 +1,95 @@
+/**
+ * Copyright © 2016-2023 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 {
+  width: 100%;
+  height: 100%;
+  display: block;
+
+  ::ng-deep.tb-markdown-view {
+    .start-code {
+      .code-wrapper {
+        padding: 0;
+
+        pre[class*=language-] {
+          margin: 0;
+          padding: 9px 38px 9px 16px;
+          background: rgba(0, 0, 0, 0.03);
+          border-radius: 6px;
+          border: none;
+        }
+
+        code[class*="language-"], pre[class*="language-"] {
+          font-family: 'Roboto';
+          font-style: normal;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 16px;
+          letter-spacing: 0.25px;
+          color: rgba(0, 0, 0, 0.38);
+          overflow: hidden;
+          white-space: break-spaces;
+          word-break: break-all;
+
+          & * {
+            color: rgba(0, 0, 0, 0.38);
+            cursor: inherit;
+            background: transparent;
+          }
+        }
+
+        button.clipboard-btn {
+          right: 0;
+          height: 34px;
+
+          p, div {
+            background: transparent;
+          }
+
+          p {
+            margin: 0;
+            padding: 7px;
+            color: #305680;
+          }
+
+          div {
+            top: 0;
+            padding: 8px;
+            height: 34px;
+            width: 34px;
+
+            img {
+              display: none;
+            }
+
+            &:after {
+              content: "";
+              position: initial;
+              display: block;
+              width: 18px;
+              height: 18px;
+              background: #305680;
+              -webkit-mask-image: url(/assets/copy-code-icon.svg);
+              -webkit-mask-repeat: no-repeat;
+              mask-image: url(/assets/copy-code-icon.svg);
+              mask-repeat: no-repeat;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+

ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.ts

@@ -33,7 +33,7 @@ enum OsType {
 @Component({
   selector: 'tb-gateway-command',
   templateUrl: './device-gateway-command.component.html',
-  styleUrls: []
+  styleUrls: ['./device-gateway-command.component.scss']
 })
 
 export class DeviceGatewayCommandComponent implements OnInit {

ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.scss

@@ -22,6 +22,10 @@
     color: rgba(0, 0, 0, .12);
   }
 
+  .tb-form-panel {
+    margin-bottom: 20px;
+  }
+
   .mat-toolbar {
     background: transparent;
     color: rgba(0, 0, 0, .87) !important;
@@ -41,6 +45,11 @@
       margin-right: 15px;
     }
 
+    .slider-icon {
+      position: absolute;
+      transform: translateY(-3px);
+    }
+
     .block-title {
       font-size: 20px;
       font-weight: 400;
@@ -53,41 +62,11 @@
   }
 
   .security-toggle-group {
-    padding-bottom: 0;
-    background: transparent !important;
     margin-bottom: 15px;
-    border: none;
+    margin-right: auto;
-    overflow: auto;
-
-    .mat-button-toggle {
-      border-radius: 15px;
-      border: 1px solid rgba(0, 0, 0, 0);
-      background: rgba(0, 0, 0, .05);
-      margin: 5px;
-      color: rgba(0, 0, 0, .2);
-      font-weight: 500;
-    }
-
-    .mat-button-toggle-checked {
-      border-radius: 15px;
-      border: 1px solid #305680;
-      background: white;
-      color: #305680;
-    }
 
     ::ng-deep span {
-      text-transform: capitalize;
+      padding: 0 25px;
-      line-height: 20px;
-      font-size: 13px;
-      padding: 5px 25px;
-    }
-
-    ::ng-deep .mat-button-toggle-ripple {
-      border-radius: 15px;
-    }
-
-    ::ng-deep .mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
-      opacity: 0 !important;
     }
   }
 
@@ -96,41 +75,6 @@
     margin-bottom: 10px;
   }
 
-  .logs-toggle-group {
-    border: none;
-    border-radius: 15px;
-    background: rgba(0, 0, 0, .05);
-    color: rgba(0, 0, 0, .2);
-    font-weight: 500;
-
-    .mat-button-toggle {
-      border: none;
-      background: rgba(0, 0, 0, .0);
-      color: rgba(0, 0, 0, .2);
-      font-weight: 500;
-    }
-
-    .mat-button-toggle-checked {
-      border-radius: 15px;
-      color: white;
-      background: #305680;
-    }
-
-    ::ng-deep span {
-      line-height: 20px;
-      font-size: 13px;
-      padding: 5px 25px;
-    }
-
-    ::ng-deep .mat-button-toggle-ripple {
-      border-radius: 15px;
-    }
-
-    ::ng-deep .mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
-      opacity: 0 !important;
-    }
-  }
-
   .statistics-block {
     margin-bottom: 15px;
     padding-left: 15px;
@@ -167,10 +111,6 @@
     z-index: 100;
   }
 
-  .suffix-icon {
-    position: absolute;
-    transform: translateY(-3px);
-  }
 
   mat-panel-title {
     display: block;

ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.ts

@@ -133,6 +133,8 @@ export class GatewayConfigurationComponent implements OnInit {
 
   logSelector: FormControl;
 
+  securityType: SecurityTypes;
+
 
   constructor(protected router: Router,
               protected store: Store<AppState>,
@@ -259,6 +261,7 @@ export class GatewayConfigurationComponent implements OnInit {
     const securityGroup = this.gatewayConfigGroup.get('thingsboard.security') as FormGroup;
     securityGroup.get('type').valueChanges.subscribe(type => {
       this.removeAllSecurityValidators();
+      console.log(type);
       if (type === SecurityTypes.ACCESS_TOKEN) {
         securityGroup.get('accessToken').addValidators([Validators.required]);
         securityGroup.get('accessToken').updateValueAndValidity();
@@ -317,6 +320,18 @@ export class GatewayConfigurationComponent implements OnInit {
     this.fetchConfigAttribute(this.device);
   }
 
+  updateSecurityValidators(value: SecurityTypes) {
+    this.gatewayConfigGroup.get('thingsboard.security.type').setValue(value, {emitEvent: true});
+  }
+
+  updateLogType(value: LocalLogsConfigs) {
+    this.logSelector.setValue(value);
+  }
+
+  updateStorageType(value: StorageTypes) {
+    this.gatewayConfigGroup.get('storage.type').setValue(value, {emitEvent: true})
+  }
+
   fetchConfigAttribute(entityId: EntityId) {
     if (entityId.id === NULL_UUID) return;
     this.attributeService.getEntityAttributes(entityId, AttributeScope.CLIENT_SCOPE,