ui: Make app-layer params configurable.

api/proto/api/device_profile.proto

@@ -462,11 +462,20 @@ message AppLayerParams {
   // TS003 version (Application Layer Clock Sync).
   Ts003Version ts003_version = 1;
 
+  // TS003 fPort.
+  uint32 ts003_f_port = 2;
+
   // TS004 version (Fragmented Data Block Transport).
-  Ts004Version ts004_version = 2;
+  Ts004Version ts004_version = 3;
+
+  // TS004 fPort.
+  uint32 ts004_f_port = 4;
 
   // TS005 version (Remote Multicast Setup).
-  Ts005Version ts005_version = 3;
+  Ts005Version ts005_version = 5;
+
+  // TS005 fPort.
+  uint32 ts005_f_port = 6;
 }
 
 message DeviceProfileListItem {

api/rust/proto/chirpstack/api/device_profile.proto

@@ -462,11 +462,20 @@ message AppLayerParams {
   // TS003 version (Application Layer Clock Sync).
   Ts003Version ts003_version = 1;
 
+  // TS003 fPort.
+  uint32 ts003_f_port = 2;
+
   // TS004 version (Fragmented Data Block Transport).
-  Ts004Version ts004_version = 2;
+  Ts004Version ts004_version = 3;
+
+  // TS004 fPort.
+  uint32 ts004_f_port = 4;
 
   // TS005 version (Remote Multicast Setup).
-  Ts005Version ts005_version = 3;
+  Ts005Version ts005_version = 5;
+
+  // TS005 fPort.
+  uint32 ts005_f_port = 6;
 }
 
 message DeviceProfileListItem {

chirpstack/src/api/device_profile.rs

@@ -264,8 +264,11 @@ impl DeviceProfileService for DeviceProfile {
                 rx1_delay: dp.rx1_delay as u32,
                 app_layer_params: Some(api::AppLayerParams {
                     ts003_version: dp.app_layer_params.ts003_version.to_proto().into(),
+                    ts003_f_port: dp.app_layer_params.ts003_f_port as u32,
                     ts004_version: dp.app_layer_params.ts004_version.to_proto().into(),
+                    ts004_f_port: dp.app_layer_params.ts004_f_port as u32,
                     ts005_version: dp.app_layer_params.ts005_version.to_proto().into(),
+                    ts005_f_port: dp.app_layer_params.ts005_f_port as u32,
                 }),
             }),
             created_at: Some(helpers::datetime_to_prost_timestamp(&dp.created_at)),
@@ -398,8 +401,11 @@ impl DeviceProfileService for DeviceProfile {
 
                 fields::AppLayerParams {
                     ts003_version: app_layer_params.ts003_version().from_proto(),
+                    ts003_f_port: app_layer_params.ts003_f_port as u8,
                     ts004_version: app_layer_params.ts004_version().from_proto(),
+                    ts004_f_port: app_layer_params.ts004_f_port as u8,
                     ts005_version: app_layer_params.ts005_version().from_proto(),
+                    ts005_f_port: app_layer_params.ts005_f_port as u8,
                     ..Default::default()
                 }
             },

ui/src/views/device-profiles/CreateDeviceProfile.tsx

@@ -5,7 +5,7 @@ import { PageHeader } from "@ant-design/pro-layout";
 
 import { MacVersion, RegParamsRevision } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
 import type { CreateDeviceProfileResponse } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
-import { DeviceProfile, CreateDeviceProfileRequest } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
+import { DeviceProfile, CreateDeviceProfileRequest, AppLayerParams } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
 
 import type { Tenant } from "@chirpstack/chirpstack-api-grpc-web/api/tenant_pb";
 
@@ -77,6 +77,12 @@ function encodeDownlink(input) {
   deviceProfile.setFlushQueueOnActivate(true);
   deviceProfile.setAutoDetectMeasurements(true);
 
+  const appLayer = new AppLayerParams();
+  appLayer.setTs003FPort(202);
+  appLayer.setTs004FPort(201);
+  appLayer.setTs005FPort(200);
+  deviceProfile.setAppLayerParams(appLayer);
+
   return (
     <Space direction="vertical" style={{ width: "100%" }} size="large">
       <PageHeader

ui/src/views/device-profiles/DeviceProfileForm.tsx

@@ -5,12 +5,16 @@ import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
 
 import {
   DeviceProfile,
+  AppLayerParams,
   CodecRuntime,
   Measurement,
   MeasurementKind,
   CadPeriodicity,
   SecondChAckOffset,
   RelayModeActivation,
+  Ts003Version,
+  Ts004Version,
+  Ts005Version,
 } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
 import { Region, MacVersion, RegParamsRevision } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
 import type { ListRegionsResponse, RegionListItem } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
@@ -308,6 +312,19 @@ function DeviceProfileForm(props: IProps) {
     }
     dp.setAutoDetectMeasurements(v.autoDetectMeasurements);
 
+    // App layer
+    const appLayer = new AppLayerParams();
+    if (v.appLayerParams) {
+      appLayer.setTs003Version(v.appLayerParams.ts003Version);
+      appLayer.setTs004Version(v.appLayerParams.ts004Version);
+      appLayer.setTs005Version(v.appLayerParams.ts005Version);
+
+      appLayer.setTs003FPort(v.appLayerParams.ts003FPort);
+      appLayer.setTs004FPort(v.appLayerParams.ts004FPort);
+      appLayer.setTs005FPort(v.appLayerParams.ts005FPort);
+    }
+    dp.setAppLayerParams(appLayer);
+
     props.onFinish(dp);
   };
 
@@ -1049,7 +1066,75 @@ function DeviceProfileForm(props: IProps) {
             </Row>
           )}
         </Tabs.TabPane>
-        <Tabs.TabPane tab="Tags" key="7" forceRender>
+        <Tabs.TabPane tab="Application layer" key="7" forceRender>
+          <Row gutter={24}>
+            <Col span={12}>
+              <Form.Item
+                label="Clock sync version (TS003)"
+                name={["appLayerParams", "ts003Version"]}
+                tooltip="If an implemented version is selected, ChirpStack will handle payloads received on the matching fPort"
+              >
+                <Select disabled={props.disabled}>
+                  <Select.Option value={Ts003Version.TS003_NOT_IMPLEMENTED}>Not implemented</Select.Option>
+                  <Select.Option value={Ts003Version.TS003_V100}>v1.0.0</Select.Option>
+                </Select>
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="Clock sync fPort (TS003)"
+                name={["appLayerParams", "ts003FPort"]}
+              >
+                <InputNumber min={0} max={255} disabled={props.disabled} />
+              </Form.Item>
+            </Col>
+          </Row>
+          <Row gutter={24}>
+            <Col span={12}>
+              <Form.Item
+                label="Fragmented data block transport (TS004)"
+                name={["appLayerParams", "ts004Version"]}
+                tooltip="If an implemented version is selected, ChirpStack will handle payloads received on the matching fPort"
+              >
+                <Select disabled={props.disabled}>
+                  <Select.Option value={Ts004Version.TS004_NOT_IMPLEMENTED}>Not implemented</Select.Option>
+                  <Select.Option value={Ts004Version.TS004_V100}>v1.0.0</Select.Option>
+                </Select>
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="Fragmented data block transport fPort (TS004)"
+                name={["appLayerParams", "ts004FPort"]}
+              >
+                <InputNumber min={0} max={255} disabled={props.disabled} />
+              </Form.Item>
+            </Col>
+          </Row>
+          <Row gutter={24}>
+            <Col span={12}>
+              <Form.Item
+                label="Remote multicast setup version (TS005)"
+                name={["appLayerParams", "ts005Version"]}
+                tooltip="If an implemented version is selected, ChirpStack will handle payloads received on the matching fPort"
+              >
+                <Select disabled={props.disabled}>
+                  <Select.Option value={Ts005Version.TS005_NOT_IMPLEMENTED}>Not implemented</Select.Option>
+                  <Select.Option value={Ts005Version.TS005_V100}>v1.0.0</Select.Option>
+                </Select>
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="Remote multicast setup fPort (TS005)"
+                name={["appLayerParams", "ts005FPort"]}
+              >
+                <InputNumber min={0} max={255} disabled={props.disabled} />
+              </Form.Item>
+            </Col>
+          </Row>
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="Tags" key="8" forceRender>
           <Form.List name="tagsMap">
             {(fields, { add, remove }) => (
               <>
@@ -1089,7 +1174,7 @@ function DeviceProfileForm(props: IProps) {
             )}
           </Form.List>
         </Tabs.TabPane>
-        <Tabs.TabPane tab="Measurements" key="8" forceRender>
+        <Tabs.TabPane tab="Measurements" key="9" forceRender>
           <Card bordered={false}>
             <p>
               ChirpStack can aggregate and visualize decoded device measurements in the device dashboard. To setup the