UI: Implement delete attributes and telemetry with multi-value Query Param

ui-ngx/src/app/core/http/attribute.service.ts

@@ -15,7 +15,7 @@
 ///
 
 import { Injectable } from '@angular/core';
-import {createDefaultHttpOptions, defaultHttpOptionsFromConfig, RequestConfig} from './http-utils';
+import { defaultHttpOptionsFromConfig, defaultHttpOptionsFromParams, RequestConfig } from './http-utils';
 import { forkJoin, Observable, of } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { EntityId } from '@shared/models/id/entity-id';
@@ -35,47 +35,37 @@ export class AttributeService {
   public getEntityAttributes(entityId: EntityId, attributeScope?: AttributeScope,
                              keys?: Array<string>, config?: RequestConfig): Observable<Array<AttributeData>> {
     let url = `/api/plugins/telemetry/${entityId.entityType}/${entityId.id}/values/attributes`;
-
+    let queryParams: object = null;
     if (attributeScope) {
       url += `/${attributeScope}`;
     }
 
     if (keys && keys.length) {
-      url += `?keys=${keys.join(',')}`;
+      queryParams = {key: keys};
     }
 
-    return this.http.get<Array<AttributeData>>(url, defaultHttpOptionsFromConfig(config));
+    return this.http.get<Array<AttributeData>>(url, defaultHttpOptionsFromParams(queryParams, config));
   }
 
   public deleteEntityAttributes(entityId: EntityId, attributeScope: AttributeScope, attributes: Array<AttributeData>,
                                 config?: RequestConfig): Observable<any> {
-    const keys = attributes.map(attribute => encodeURIComponent(attribute.key)).join(',');
+    return this.http.delete(`/api/plugins/telemetry/${entityId.entityType}/${entityId.id}/${attributeScope}`,
-    return this.http.delete(`/api/plugins/telemetry/${entityId.entityType}/${entityId.id}/${attributeScope}` +
+      defaultHttpOptionsFromParams({key: attributes.map(attribute => attribute.key)}, config));
-      `?keys=${keys}`,
-      defaultHttpOptionsFromConfig(config));
   }
 
   public deleteEntityTimeseries(entityId: EntityId, timeseries: Array<AttributeData>, deleteAllDataForKeys = false,
                                 startTs?: number, endTs?: number, rewriteLatestIfDeleted = false, deleteLatest = true,
                                 config?: RequestConfig): Observable<any> {
-    const keys = timeseries.map(attribute => encodeURIComponent(attribute.key)).join(',');
+    const queryParams = {
-    let url = `/api/plugins/telemetry/${entityId.entityType}/${entityId.id}/timeseries/delete?keys=${keys}`;
+      key: timeseries.map(key => key.key),
-    if (isDefinedAndNotNull(deleteAllDataForKeys)) {
+      deleteAllDataForKeys: deleteAllDataForKeys,
-      url += `&deleteAllDataForKeys=${deleteAllDataForKeys}`;
+      rewriteLatestIfDeleted: rewriteLatestIfDeleted,
-    }
+      deleteLatest: deleteLatest,
-    if (isDefinedAndNotNull(rewriteLatestIfDeleted)) {
+      startTs: startTs,
-      url += `&rewriteLatestIfDeleted=${rewriteLatestIfDeleted}`;
+      endTs: endTs
-    }
+    };
-    if (isDefinedAndNotNull(deleteLatest)) {
+    return this.http.delete(`/api/plugins/telemetry/${entityId.entityType}/${entityId.id}/timeseries/delete`,
-      url += `&deleteLatest=${deleteLatest}`;
+      defaultHttpOptionsFromParams(queryParams, config));
-    }
-    if (isDefinedAndNotNull(startTs)) {
-      url += `&startTs=${startTs}`;
-    }
-    if (isDefinedAndNotNull(endTs)) {
-      url += `&endTs=${endTs}`;
-    }
-    return this.http.delete(url, createDefaultHttpOptions( {key: timeseries.map(key => key.key)}, config));
   }
 
   public saveEntityAttributes(entityId: EntityId, attributeScope: AttributeScope, attributes: Array<AttributeData>,
@@ -138,32 +128,29 @@ export class AttributeService {
                              limit: number = 100, agg: AggregationType = AggregationType.NONE, interval?: number,
                              orderBy: DataSortOrder = DataSortOrder.DESC, useStrictDataTypes: boolean = false,
                              config?: RequestConfig): Observable<TimeseriesData> {
-    let url = `/api/plugins/telemetry/${entityId.entityType}/${entityId.id}/values/timeseries?keys=${keys.join(',')}&startTs=${startTs}&endTs=${endTs}`;
+    const queryParams = {
-    if (isDefinedAndNotNull(limit)) {
+      key: keys,
-      url += `&limit=${limit}`;
+      startTs: startTs,
-    }
+      endTs: endTs,
-    if (isDefinedAndNotNull(agg)) {
+      limit: limit,
-      url += `&agg=${agg}`;
+      agg: agg,
-    }
+      interval: interval,
-    if (isDefinedAndNotNull(interval)) {
+      orderBy: orderBy,
-      url += `&interval=${interval}`;
+      useStrictDataTypes: useStrictDataTypes
-    }
+    }
-    if (isDefinedAndNotNull(orderBy)) {
+    return this.http.get<TimeseriesData>(`/api/plugins/telemetry/${entityId.entityType}/${entityId.id}/values/timeseries`,
-      url += `&orderBy=${orderBy}`;
+      defaultHttpOptionsFromParams(queryParams, config));
-    }
-    if (isDefinedAndNotNull(useStrictDataTypes)) {
-      url += `&useStrictDataTypes=${useStrictDataTypes}`;
-    }
-
-    return this.http.get<TimeseriesData>(url, defaultHttpOptionsFromConfig(config));
   }
 
   public getEntityTimeseriesLatest(entityId: EntityId, keys?: Array<string>,
                                    useStrictDataTypes = false, config?: RequestConfig): Observable<TimeseriesData> {
-    let url = `/api/plugins/telemetry/${entityId.entityType}/${entityId.id}/values/timeseries?useStrictDataTypes=${useStrictDataTypes}`;
+    const queryParams: Record<string, any> = {
+      useStrictDataTypes: useStrictDataTypes
+    }
     if (isDefinedAndNotNull(keys) && keys.length) {
-      url += `&keys=${keys.join(',')}`;
+      queryParams.key = keys;
     }
-    return this.http.get<TimeseriesData>(url, defaultHttpOptionsFromConfig(config));
+    return this.http.get<TimeseriesData>(`/api/plugins/telemetry/${entityId.entityType}/${entityId.id}/values/timeseries`,
+      defaultHttpOptionsFromParams(queryParams, config));
   }
 }

ui-ngx/src/app/core/http/http-utils.ts

@@ -38,7 +38,10 @@ export function createDefaultHttpOptions(queryParamsOrConfig?: QueryParams | Req
   if (hasRequestConfig(queryParamsOrConfig)) {
     return defaultHttpOptionsFromConfig(queryParamsOrConfig as RequestConfig);
   }
-  const queryParams = queryParamsOrConfig as QueryParams;
+  return defaultHttpOptionsFromParams(queryParamsOrConfig as QueryParams, config);
+}
+
+export function defaultHttpOptionsFromParams(queryParams?: QueryParams, config?: RequestConfig) {
   const finalConfig = {
     ...config,
     ...(queryParams && { queryParams }),
@@ -57,9 +60,11 @@ export function defaultHttpOptions(ignoreLoading: boolean = false,
                                    ignoreErrors: boolean = false,
                                    resendRequest: boolean = false,
                                    queryParams?: QueryParams) {
+  const cleanedParams = cleanQueryParams(queryParams);
+
   return {
     headers: new HttpHeaders({'Content-Type': 'application/json'}),
-    params: new InterceptorHttpParams(new InterceptorConfig(ignoreLoading, ignoreErrors, resendRequest), queryParams)
+    params: new InterceptorHttpParams(new InterceptorConfig(ignoreLoading, ignoreErrors, resendRequest), cleanedParams)
   };
 }
 
@@ -67,7 +72,27 @@ export function defaultHttpUploadOptions(ignoreLoading: boolean = false,
                                          ignoreErrors: boolean = false,
                                          resendRequest: boolean = false,
                                          queryParams?: QueryParams) {
+  const cleanedParams = cleanQueryParams(queryParams);
+
   return {
-    params: new InterceptorHttpParams(new InterceptorConfig(ignoreLoading, ignoreErrors, resendRequest), queryParams)
+    params: new InterceptorHttpParams(new InterceptorConfig(ignoreLoading, ignoreErrors, resendRequest), cleanedParams)
   };
 }
+
+function cleanQueryParams(params?: QueryParams): QueryParams | undefined {
+  if (!params) {
+    return undefined;
+  }
+
+  const entries = Object.entries(params);
+
+  const cleanedEntries = entries.filter(
+    ([_, value]) => value !== null && value !== undefined
+  );
+
+  if (!cleanedEntries.length) {
+    return undefined;
+  }
+
+  return Object.fromEntries(cleanedEntries);
+}