UI extended provision new device with new fields (#533)

Author: kuby

http-gateway/web/src/containers/things/constants.js

@@ -70,6 +70,10 @@ export const MINIMAL_TTL_VALUE_MS = 100
 
 export const NO_DEVICE_NAME = '<no-name>'
 
+// Maximum amount of deviceIds filled into one delete request.
+// (if ther is more deviceIds then the provided number, it creates more chunks of a maximum of this number)
+export const DEVICE_DELETE_CHUNK_SIZE = 50
+
 // Websocket keys
 export const THINGS_WS_KEY = 'things'
 export const STATUS_WS_KEY = 'status'

http-gateway/web/src/containers/things/provision-new-device.js

@@ -130,21 +130,49 @@ class _ProvisionNewDevice extends PureComponent {
       )
     }
 
+    const {
+      coapGateway: deviceEndpoint,
+      id: hubId,
+      certificateAuthorities,
+    } = this.context?.wellKnownConfig || {}
     const providerName = this.context?.deviceOAuthClient?.providerName
 
     return (
       <>
+        <Label title={_(t.hubId)} inline>
+          <div id="auth-code-box">
+            <span>{hubId || '-'}</span>
+            {hubId && <CopyBox textToCopy={hubId} />}
+          </div>
+        </Label>
+
+        <Label title={_(t.deviceEndpoint)} inline>
+          <div id="auth-code-box">
+            <span>{deviceEndpoint || '-'}</span>
+            {deviceEndpoint && <CopyBox textToCopy={deviceEndpoint} />}
+          </div>
+        </Label>
+
+        <Label title={_(t.authorizationCode)} inline>
+          <div id="auth-code-box">
+            <span>{code}</span>
+            <CopyBox textToCopy={code} />
+          </div>
+        </Label>
+
         <Label title={_(t.authorizationProvider)} inline>
           <div id="auth-code-box">
             <span>{providerName || '-'}</span>
             {providerName && <CopyBox textToCopy={providerName} />}
           </div>
         </Label>
 
-        <Label title={_(t.authorizationCode)} inline className="m-b-10">
+        <Label title={_(t.certificateAuthorities)} inline className="m-b-10">
           <div id="auth-code-box">
-            <span>{code}</span>
-            <CopyBox textToCopy={code} />
+            <span>...</span>
+            {certificateAuthorities && (
+              <CopyBox textToCopy={certificateAuthorities} />
+            )}
           </div>
         </Label>
       </>
@@ -164,6 +192,11 @@ class _ProvisionNewDevice extends PureComponent {
     const {
       intl: { formatMessage: _ },
     } = this.props
+    const deviceOAuthClient = this.context?.deviceOAuthClient
+
+    if (!deviceOAuthClient?.providerName || !deviceOAuthClient?.clientID) {
+      return null
+    }
 
     return (
       <>

http-gateway/web/src/containers/things/rest.js

@@ -1,7 +1,9 @@
+import chunk from 'lodash/chunk'
+
 import { fetchApi, security } from '@/common/services'
 import { DEVICE_AUTH_CODE_SESSION_KEY } from '@/constants'
 
-import { thingsApiEndpoints } from './constants'
+import { thingsApiEndpoints, DEVICE_DELETE_CHUNK_SIZE } from './constants'
 import { interfaceGetParam } from './utils'
 
 /**
@@ -21,15 +23,23 @@ export const getThingApi = deviceId =>
  * @param {*} params deviceIds
  * @param {*} data
  */
-export const deleteThingsApi = deviceIds =>
-  fetchApi(
-    `${security.getGeneralConfig().httpGatewayAddress}${
-      thingsApiEndpoints.THINGS
-    }?${deviceIds.map(id => `deviceIdFilter=${id}`).join('&')}`,
-    {
-      method: 'DELETE',
-    }
+export const deleteThingsApi = deviceIds => {
+  // We split the fetch into multiple chunks due to the URL being too long for the browser to handle
+  const chunks = chunk(deviceIds, DEVICE_DELETE_CHUNK_SIZE)
+
+  return Promise.all(
+    chunks.map(ids =>
+      fetchApi(
+        `${security.getGeneralConfig().httpGatewayAddress}${
+          thingsApiEndpoints.THINGS
+        }?${ids.map(id => `deviceIdFilter=${id}`).join('&')}`,
+        {
+          method: 'DELETE',
+        }
+      )
+    )
   )
+}
 
 /**
  * Get things RESOURCES Rest Api endpoint
@@ -128,7 +138,7 @@ export const getDeviceAuthCode = deviceId => {
     if (!clientID) {
       return reject(
         new Error(
-          'clientID is missing from the deviceOauthClient configuration'
+          'clientID is missing from the deviceOAuthClient configuration'
         )
       )
     }

http-gateway/web/src/containers/things/things-i18n.js

@@ -372,12 +372,10 @@ export const messages = defineMessages({
   enterDeviceId: {
     id: 'things.enterDeviceId',
     defaultMessage: 'Enter the device ID',
-
   },
   getCode: {
     id: 'things.getCode',
     defaultMessage: 'Get the Code',
-
   },
   back: {
     id: 'things.back',
@@ -386,7 +384,6 @@ export const messages = defineMessages({
   provisionNewDevice: {
     id: 'things.provisionNewDevice',
     defaultMessage: 'Provision a new device',
-
   },
   deviceAuthCodeError: {
     id: 'things.deviceAuthCodeError',
@@ -400,4 +397,16 @@ export const messages = defineMessages({
     id: 'things.authorizationProvider',
     defaultMessage: 'Authorization Provider',
   },
+  deviceEndpoint: {
+    id: 'things.deviceEndpoint',
+    defaultMessage: 'Device Endpoint',
+  },
+  hubId: {
+    id: 'things.hubId',
+    defaultMessage: 'Hub ID',
+  },
+  certificateAuthorities: {
+    id: 'things.certificateAuthorities',
+    defaultMessage: 'Certificate Authorities',
+  },
 })

http-gateway/web/src/languages/languages.json

@@ -1 +1 @@
-{"en":{"confirm-modal.confirm":"","pendingCommands.confirm":"","confirm-modal.cancel":"","pendingCommands.cancel":"","things.cancel":"","copy-box.copyToClipboard":"","copy-box.copied":"","footer.API":"API","footer.docs":"Docs","footer.contribute":"Contribute","language-switcher.english":"","menu.dashboard":"Dashboard","menu.things":"Things","menu.pendingCommands":"","menu.resourceLinks":"","menu.services":"Services","menu.notifications":"Notifications","things.notifications":"Notifications","menu.configuration":"","menu.collapse":"Collapse","table-pagination.prev":"","table-pagination.next":"","user-widget.logOut":"Log Out","app.loading":"","app.authError":"","not-found-page.pageTitle":"","not-found-page.notFoundPageDefaultMessage":"","pendingCommands.type":"","pendingCommands.actions":"","things.actions":"","pendingCommands.resourceCreatePending":"","pendingCommands.resourceRetrievePending":"","pendingCommands.resourceUpdatePending":"","pendingCommands.resourceDeletePending":"","pendingCommands.deviceMetadataUpdatePending":"","pendingCommands.deviceId":"","things.deviceId":"","pendingCommands.resourceHref":"","pendingCommands.status":"","things.status":"","pendingCommands.validUntil":"","pendingCommands.details":"","things.details":"","pendingCommands.pending":"","pendingCommands.successful":"","pendingCommands.canceled":"","pendingCommands.error":"","pendingCommands.expired":"","pendingCommands.doYouWantToCancelThisCommand":"","pendingCommands.cancelPendingCommand":"","pendingCommands.commandContent":"","pendingCommands.yes":"","pendingCommands.no":"","pendingCommands.forever":"","pendingCommands.recentTasks":"","things.online":"","things.offline":"","things.device":"","things.name":"","things.types":"","things.supportedTypes":"","things.interfaces":"","things.deviceInterfaces":"","things.thingNotFound":"","things.thingNotFoundMessage":"","things.thingResourcesNotFound":"","things.thingResourcesNotFoundMessage":"","things.href":"","things.resources":"","things.update":"","things.updating":"","things.create":"","things.creating":"","things.retrieve":"","things.retrieving":"","things.delete":"","things.deleting":"","things.deleteResourceMessage":"","things.deleteDeviceMessage":"","things.deleteDevicesMessage":"","things.resourceWasUpdated":"","things.resourceWasUpdatedOffline":"","things.resourceWasDeletedOffline":"","things.resourceWasCreated":"","things.resourceWasCreatedOffline":"","things.invalidArgument":"","things.resourceUpdateSuccess":"","things.resourceUpdate":"","things.resourceCreate":"","things.resourceDelete":"","things.commandOnResourceExpired":"","things.resourceUpdateError":"","things.resourceCreateSuccess":"","things.resourceCreateError":"","things.resourceRetrieveError":"","things.resourceDeleteSuccess":"","things.resourceWasDeleted":"","things.resourceDeleteError":"","things.shadowSynchronizationError":"","things.shadowSynchronizationWasSetOffline":"","things.thingWentOnline":"","things.thingWentOffline":"","things.thingWasUnregistered":"","things.thingStatusChange":"","things.refresh":"","things.newResource":"","things.resourceDeleted":"","things.newResources":"","things.resourcesDeleted":"","things.resourceWithHrefWasDeleted":"","things.resourceAdded":"","things.resourcesAdded":"","things.resourcesWereDeleted":"","things.resourceUpdated":"","things.resourceUpdatedDesc":"","things.treeView":"","things.shadowSynchronization":"","things.save":"","things.saving":"","things.enterThingName":"","things.thingNameChangeFailed":"","things.enabled":"","things.disabled":"","things.commandTimeout":"","things.minimalValueIs":"","things.thingsDeleted":"","things.thingsDeletedMessage":"","things.thingDeleted":"","things.thingWasDeleted":"","things.thingsDeletion":"","things.thingDeletionError":"","things.default":"","things.close":"","things.enterDeviceId":"","things.getCode":"","things.back":"","things.provisionNewDevice":"","things.deviceAuthCodeError":"","things.authorizationCode":"","things.authorizationProvider":""}}
+{"en":{"confirm-modal.confirm":"","pendingCommands.confirm":"","confirm-modal.cancel":"","pendingCommands.cancel":"","things.cancel":"","copy-box.copyToClipboard":"","copy-box.copied":"","footer.API":"API","footer.docs":"Docs","footer.contribute":"Contribute","language-switcher.english":"","menu.dashboard":"Dashboard","menu.things":"Things","menu.pendingCommands":"","menu.resourceLinks":"","menu.services":"Services","menu.notifications":"Notifications","things.notifications":"Notifications","menu.configuration":"","menu.collapse":"Collapse","table-pagination.prev":"","table-pagination.next":"","user-widget.logOut":"Log Out","app.loading":"","app.authError":"","not-found-page.pageTitle":"","not-found-page.notFoundPageDefaultMessage":"","pendingCommands.type":"","pendingCommands.actions":"","things.actions":"","pendingCommands.resourceCreatePending":"","pendingCommands.resourceRetrievePending":"","pendingCommands.resourceUpdatePending":"","pendingCommands.resourceDeletePending":"","pendingCommands.deviceMetadataUpdatePending":"","pendingCommands.deviceId":"","things.deviceId":"","pendingCommands.resourceHref":"","pendingCommands.status":"","things.status":"","pendingCommands.validUntil":"","pendingCommands.created":"","pendingCommands.details":"","things.details":"","pendingCommands.pending":"","pendingCommands.successful":"","pendingCommands.canceled":"","pendingCommands.error":"","pendingCommands.expired":"","pendingCommands.doYouWantToCancelThisCommand":"","pendingCommands.cancelPendingCommand":"","pendingCommands.commandContent":"","pendingCommands.yes":"","pendingCommands.no":"","pendingCommands.forever":"","pendingCommands.recentTasks":"","things.online":"","things.offline":"","things.device":"","things.name":"","things.types":"","things.supportedTypes":"","things.interfaces":"","things.deviceInterfaces":"","things.thingNotFound":"","things.thingNotFoundMessage":"","things.thingResourcesNotFound":"","things.thingResourcesNotFoundMessage":"","things.href":"","things.resources":"","things.update":"","things.updating":"","things.create":"","things.creating":"","things.retrieve":"","things.retrieving":"","things.delete":"","things.deleting":"","things.deleteResourceMessage":"","things.deleteDeviceMessage":"","things.deleteDevicesMessage":"","things.resourceWasUpdated":"","things.resourceWasUpdatedOffline":"","things.resourceWasDeletedOffline":"","things.resourceWasCreated":"","things.resourceWasCreatedOffline":"","things.invalidArgument":"","things.resourceUpdateSuccess":"","things.resourceUpdate":"","things.resourceCreate":"","things.resourceDelete":"","things.commandOnResourceExpired":"","things.resourceUpdateError":"","things.resourceCreateSuccess":"","things.resourceCreateError":"","things.resourceRetrieveError":"","things.resourceDeleteSuccess":"","things.resourceWasDeleted":"","things.resourceDeleteError":"","things.shadowSynchronizationError":"","things.shadowSynchronizationWasSetOffline":"","things.thingWentOnline":"","things.thingWentOffline":"","things.thingWasUnregistered":"","things.thingStatusChange":"","things.refresh":"","things.newResource":"","things.resourceDeleted":"","things.newResources":"","things.resourcesDeleted":"","things.resourceWithHrefWasDeleted":"","things.resourceAdded":"","things.resourcesAdded":"","things.resourcesWereDeleted":"","things.resourceUpdated":"","things.resourceUpdatedDesc":"","things.treeView":"","things.shadowSynchronization":"","things.save":"","things.saving":"","things.enterThingName":"","things.thingNameChangeFailed":"","things.enabled":"","things.disabled":"","things.commandTimeout":"","things.minimalValueIs":"","things.thingsDeleted":"","things.thingsDeletedMessage":"","things.thingDeleted":"","things.thingWasDeleted":"","things.thingsDeletion":"","things.thingDeletionError":"","things.default":"","things.close":"","things.enterDeviceId":"","things.getCode":"","things.back":"","things.provisionNewDevice":"","things.deviceAuthCodeError":"","things.authorizationCode":"","things.authorizationProvider":"","things.deviceEndpoint":"","things.hubId":""}}