Skip to content

Commit 24bf149

Browse files
authored
UI extended provision new device with new fields (#533)
1 parent 8b7e442 commit 24bf149

5 files changed

Lines changed: 73 additions & 17 deletions

File tree

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,10 @@ export const MINIMAL_TTL_VALUE_MS = 100
7070

7171
export const NO_DEVICE_NAME = '<no-name>'
7272

73+
// Maximum amount of deviceIds filled into one delete request.
74+
// (if ther is more deviceIds then the provided number, it creates more chunks of a maximum of this number)
75+
export const DEVICE_DELETE_CHUNK_SIZE = 50
76+
7377
// Websocket keys
7478
export const THINGS_WS_KEY = 'things'
7579
export const STATUS_WS_KEY = 'status'

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

Lines changed: 36 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -130,21 +130,49 @@ class _ProvisionNewDevice extends PureComponent {
130130
)
131131
}
132132

133+
const {
134+
coapGateway: deviceEndpoint,
135+
id: hubId,
136+
certificateAuthorities,
137+
} = this.context?.wellKnownConfig || {}
133138
const providerName = this.context?.deviceOAuthClient?.providerName
134139

135140
return (
136141
<>
142+
<Label title={_(t.hubId)} inline>
143+
<div id="auth-code-box">
144+
<span>{hubId || '-'}</span>
145+
{hubId && <CopyBox textToCopy={hubId} />}
146+
</div>
147+
</Label>
148+
149+
<Label title={_(t.deviceEndpoint)} inline>
150+
<div id="auth-code-box">
151+
<span>{deviceEndpoint || '-'}</span>
152+
{deviceEndpoint && <CopyBox textToCopy={deviceEndpoint} />}
153+
</div>
154+
</Label>
155+
156+
<Label title={_(t.authorizationCode)} inline>
157+
<div id="auth-code-box">
158+
<span>{code}</span>
159+
<CopyBox textToCopy={code} />
160+
</div>
161+
</Label>
162+
137163
<Label title={_(t.authorizationProvider)} inline>
138164
<div id="auth-code-box">
139165
<span>{providerName || '-'}</span>
140166
{providerName && <CopyBox textToCopy={providerName} />}
141167
</div>
142168
</Label>
143169

144-
<Label title={_(t.authorizationCode)} inline className="m-b-10">
170+
<Label title={_(t.certificateAuthorities)} inline className="m-b-10">
145171
<div id="auth-code-box">
146-
<span>{code}</span>
147-
<CopyBox textToCopy={code} />
172+
<span>...</span>
173+
{certificateAuthorities && (
174+
<CopyBox textToCopy={certificateAuthorities} />
175+
)}
148176
</div>
149177
</Label>
150178
</>
@@ -164,6 +192,11 @@ class _ProvisionNewDevice extends PureComponent {
164192
const {
165193
intl: { formatMessage: _ },
166194
} = this.props
195+
const deviceOAuthClient = this.context?.deviceOAuthClient
196+
197+
if (!deviceOAuthClient?.providerName || !deviceOAuthClient?.clientID) {
198+
return null
199+
}
167200

168201
return (
169202
<>

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

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
import chunk from 'lodash/chunk'
2+
13
import { fetchApi, security } from '@/common/services'
24
import { DEVICE_AUTH_CODE_SESSION_KEY } from '@/constants'
35

4-
import { thingsApiEndpoints } from './constants'
6+
import { thingsApiEndpoints, DEVICE_DELETE_CHUNK_SIZE } from './constants'
57
import { interfaceGetParam } from './utils'
68

79
/**
@@ -21,15 +23,23 @@ export const getThingApi = deviceId =>
2123
* @param {*} params deviceIds
2224
* @param {*} data
2325
*/
24-
export const deleteThingsApi = deviceIds =>
25-
fetchApi(
26-
`${security.getGeneralConfig().httpGatewayAddress}${
27-
thingsApiEndpoints.THINGS
28-
}?${deviceIds.map(id => `deviceIdFilter=${id}`).join('&')}`,
29-
{
30-
method: 'DELETE',
31-
}
26+
export const deleteThingsApi = deviceIds => {
27+
// We split the fetch into multiple chunks due to the URL being too long for the browser to handle
28+
const chunks = chunk(deviceIds, DEVICE_DELETE_CHUNK_SIZE)
29+
30+
return Promise.all(
31+
chunks.map(ids =>
32+
fetchApi(
33+
`${security.getGeneralConfig().httpGatewayAddress}${
34+
thingsApiEndpoints.THINGS
35+
}?${ids.map(id => `deviceIdFilter=${id}`).join('&')}`,
36+
{
37+
method: 'DELETE',
38+
}
39+
)
40+
)
3241
)
42+
}
3343

3444
/**
3545
* Get things RESOURCES Rest Api endpoint
@@ -128,7 +138,7 @@ export const getDeviceAuthCode = deviceId => {
128138
if (!clientID) {
129139
return reject(
130140
new Error(
131-
'clientID is missing from the deviceOauthClient configuration'
141+
'clientID is missing from the deviceOAuthClient configuration'
132142
)
133143
)
134144
}

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

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -372,12 +372,10 @@ export const messages = defineMessages({
372372
enterDeviceId: {
373373
id: 'things.enterDeviceId',
374374
defaultMessage: 'Enter the device ID',
375-
376375
},
377376
getCode: {
378377
id: 'things.getCode',
379378
defaultMessage: 'Get the Code',
380-
381379
},
382380
back: {
383381
id: 'things.back',
@@ -386,7 +384,6 @@ export const messages = defineMessages({
386384
provisionNewDevice: {
387385
id: 'things.provisionNewDevice',
388386
defaultMessage: 'Provision a new device',
389-
390387
},
391388
deviceAuthCodeError: {
392389
id: 'things.deviceAuthCodeError',
@@ -400,4 +397,16 @@ export const messages = defineMessages({
400397
id: 'things.authorizationProvider',
401398
defaultMessage: 'Authorization Provider',
402399
},
400+
deviceEndpoint: {
401+
id: 'things.deviceEndpoint',
402+
defaultMessage: 'Device Endpoint',
403+
},
404+
hubId: {
405+
id: 'things.hubId',
406+
defaultMessage: 'Hub ID',
407+
},
408+
certificateAuthorities: {
409+
id: 'things.certificateAuthorities',
410+
defaultMessage: 'Certificate Authorities',
411+
},
403412
})
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +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":""}}
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.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":""}}

0 commit comments

Comments
 (0)