Skip to content

Commit a306443

Browse files
johanstokkingjohanstokking
committed
console: Conditionally show WiFi and ethernet config and connections
1 parent c955223 commit a306443

File tree

8 files changed

+502
-366
lines changed

8 files changed

+502
-366
lines changed

‎cypress/e2e/console/gateways/managed/connection-settings.spec.js

Lines changed: 353 additions & 283 deletions
Large diffs are not rendered by default.

‎pkg/webui/console/containers/gateway-managed-gateway/connection-settings/connections/index.js

Lines changed: 34 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,12 @@ import { CONNECTION_TYPES } from '@console/containers/gateway-managed-gateway/sh
4242
import sharedMessages from '@ttn-lw/lib/shared-messages'
4343
import PropTypes from '@ttn-lw/lib/prop-types'
4444

45-
import { selectSelectedManagedGateway } from '@console/store/selectors/gateways'
45+
import {
46+
selectSelectedManagedGateway,
47+
selectSelectedManagedGatewayHasCellular,
48+
selectSelectedManagedGatewayHasWifi,
49+
selectSelectedManagedGatewayHasEthernet,
50+
} from '@console/store/selectors/gateways'
4651

4752
import m from './messages'
4853

@@ -119,6 +124,9 @@ ConnectionByType.defaultProps = {
119124

120125
const ManagedGatewayConnections = ({ connectionsData }) => {
121126
const selectedManagedGateway = useSelector(selectSelectedManagedGateway)
127+
const hasCellular = useSelector(selectSelectedManagedGatewayHasCellular)
128+
const hasWifi = useSelector(selectSelectedManagedGatewayHasWifi)
129+
const hasEthernet = useSelector(selectSelectedManagedGatewayHasEthernet)
122130
const {
123131
systemStatus,
124132
controllerConnection,
@@ -253,25 +261,31 @@ const ManagedGatewayConnections = ({ connectionsData }) => {
253261
</div>
254262

255263
<div className="d-flex flex-column gap-ls-xs">
256-
<ConnectionByType
257-
isConnected={isCellularConnected}
258-
type={CONNECTION_TYPES.CELLULAR}
259-
details={isCellularConnected && getCellularDetails(cellularBackhaul)}
260-
connectedVia={cellularBackhaul?.operator}
261-
/>
262-
<ConnectionByType
263-
isConnected={isWifiConnected}
264-
type={CONNECTION_TYPES.WIFI}
265-
details={isWifiConnected && getWifiDetails(wifiBackhaul)}
266-
connectedVia={wifiBackhaul?.ssid}
267-
macAddress={managedGateway.wifi_mac_address}
268-
/>
269-
<ConnectionByType
270-
isConnected={isEthernetConnected}
271-
type={CONNECTION_TYPES.ETHERNET}
272-
details={isEthernetConnected && getEthernetDetails(ethernetBackhaul)}
273-
macAddress={managedGateway.ethernet_mac_address}
274-
/>
264+
{hasCellular && (
265+
<ConnectionByType
266+
isConnected={isCellularConnected}
267+
type={CONNECTION_TYPES.CELLULAR}
268+
details={isCellularConnected && getCellularDetails(cellularBackhaul)}
269+
connectedVia={cellularBackhaul?.operator}
270+
/>
271+
)}
272+
{hasWifi && (
273+
<ConnectionByType
274+
isConnected={isWifiConnected}
275+
type={CONNECTION_TYPES.WIFI}
276+
details={isWifiConnected && getWifiDetails(wifiBackhaul)}
277+
connectedVia={wifiBackhaul?.ssid}
278+
macAddress={managedGateway.wifi_mac_address}
279+
/>
280+
)}
281+
{hasEthernet && (
282+
<ConnectionByType
283+
isConnected={isEthernetConnected}
284+
type={CONNECTION_TYPES.ETHERNET}
285+
details={isEthernetConnected && getEthernetDetails(ethernetBackhaul)}
286+
macAddress={managedGateway.ethernet_mac_address}
287+
/>
288+
)}
275289
</div>
276290
</div>
277291
)

‎pkg/webui/console/containers/gateway-managed-gateway/connection-settings/index.js

Lines changed: 98 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -63,12 +63,15 @@ import { updateManagedGateway } from '@console/store/actions/gateways'
6363
import {
6464
selectSelectedGateway,
6565
selectSelectedManagedGateway,
66+
selectSelectedManagedGatewayHasWifi,
67+
selectSelectedManagedGatewayHasEthernet,
6668
} from '@console/store/selectors/gateways'
6769
import { selectUserId } from '@account/store/selectors/user'
6870

6971
const m = defineMessages({
7072
firstNotification:
71-
'You have just claimed a managed gateway. To connect it to WiFi or ethernet you can configure those connections here. The preprovisioned cellular backhaul typically connects automatically.',
73+
'You have just claimed a managed gateway. You can configure its connection settings here.',
74+
noConnectionSettings: 'This gateway does not have any connection settings to configure.',
7275
updateSuccess: 'Connection settings updated',
7376
updateFailure: 'There was an error updating these connection settings',
7477
})
@@ -91,14 +94,16 @@ const GatewayConnectionSettings = () => {
9194

9295
const connectionsData = useConnectionsData()
9396

97+
const hasWifi = useSelector(selectSelectedManagedGatewayHasWifi)
98+
const hasWifiProfileSet = hasWifi && Boolean(selectedManagedGateway.wifi_profile_id)
99+
const hasEthernet = useSelector(selectSelectedManagedGatewayHasEthernet)
100+
const hasEthernetProfileSet = hasEthernet && Boolean(selectedManagedGateway.ethernet_profile_id)
101+
94102
const [initialValues, setInitialValues] = useState({
95-
wifi_profile: { ...initialWifiProfile },
96-
ethernet_profile: { ...initialEthernetProfile },
103+
...(hasWifi && { wifi_profile: { ...initialWifiProfile } }),
104+
...(hasEthernet && { ethernet_profile: { ...initialEthernetProfile } }),
97105
})
98106

99-
const hasWifiProfileSet = Boolean(selectedManagedGateway.wifi_profile_id)
100-
const hasEthernetProfileSet = Boolean(selectedManagedGateway.ethernet_profile_id)
101-
102107
useBreadcrumbs(
103108
'gtws.single.managed-gateway.connection-settings',
104109
<Breadcrumb
@@ -110,7 +115,7 @@ const GatewayConnectionSettings = () => {
110115
const fetchWifiProfile = useCallback(
111116
async collaborators => {
112117
let wifiProfile
113-
let entityId
118+
let wifiProfileEntityId
114119

115120
if (hasWifiProfileSet) {
116121
setError(undefined)
@@ -125,7 +130,7 @@ const GatewayConnectionSettings = () => {
125130
),
126131
),
127132
)
128-
entityId = userId
133+
wifiProfileEntityId = userId
129134
} catch (e) {
130135
if (!isNotFoundError(e)) {
131136
setError(e)
@@ -150,7 +155,7 @@ const GatewayConnectionSettings = () => {
150155
),
151156
),
152157
)
153-
entityId = orgId
158+
wifiProfileEntityId = orgId
154159
break
155160
} catch (e) {
156161
if (!isNotFoundError(e)) {
@@ -161,7 +166,7 @@ const GatewayConnectionSettings = () => {
161166
}
162167
}
163168
}
164-
return { wifiProfile, entityId }
169+
return { wifiProfile, wifiProfileEntityId }
165170
},
166171
[dispatch, hasWifiProfileSet, selectedManagedGateway.wifi_profile_id, userId],
167172
)
@@ -219,21 +224,33 @@ const GatewayConnectionSettings = () => {
219224
const { entities } = await dispatch(attachPromise(getCollaboratorsList('gateway', gtwId)))
220225
collaborators = entities
221226
}
222-
const { wifiProfile, entityId } = await fetchWifiProfile(collaborators)
223-
const { ethernetProfile } = await fetchEthernetProfile()
224-
const isNonSharedProfile = Boolean(wifiProfile) && !Boolean(wifiProfile.data.shared)
225-
if (isNonSharedProfile) {
226-
setNonSharedWifiProfileId(selectedManagedGateway.wifi_profile_id)
227+
let newValues = {}
228+
if (hasWifi) {
229+
const { wifiProfile, wifiProfileEntityId } = await fetchWifiProfile(collaborators)
230+
const isNonSharedWifiProfile = Boolean(wifiProfile) && !Boolean(wifiProfile.data.shared)
231+
if (isNonSharedWifiProfile) {
232+
setNonSharedWifiProfileId(selectedManagedGateway.wifi_profile_id)
233+
}
234+
newValues = {
235+
...newValues,
236+
wifi_profile: updateInitialWifiProfile(
237+
initialValues,
238+
wifiProfile,
239+
wifiProfileEntityId,
240+
isNonSharedWifiProfile,
241+
),
242+
}
243+
}
244+
if (hasEthernet) {
245+
const { ethernetProfile } = await fetchEthernetProfile()
246+
newValues = {
247+
...newValues,
248+
ethernet_profile: updateInitialEthernetProfile(initialValues, ethernetProfile),
249+
}
227250
}
228251
setInitialValues(oldValues => ({
229252
...oldValues,
230-
wifi_profile: updateInitialWifiProfile(
231-
oldValues,
232-
wifiProfile,
233-
entityId,
234-
isNonSharedProfile,
235-
),
236-
ethernet_profile: updateInitialEthernetProfile(oldValues, ethernetProfile),
253+
...newValues,
237254
}))
238255
},
239256
[
@@ -312,31 +329,43 @@ const GatewayConnectionSettings = () => {
312329

313330
setError(undefined)
314331
try {
332+
let body = {}
315333
const { wifi_profile, ethernet_profile } = values
316334

317-
const shouldUpdateNonSharedWifiProfile =
318-
wifi_profile.profile_id === 'non-shared' &&
319-
Boolean(nonSharedWifiProfileId) &&
320-
wifi_profile._enable_wifi_connection
321-
322-
const wifiProfileId = await getWifiProfileId(wifi_profile, shouldUpdateNonSharedWifiProfile)
323-
const ethernetProfileId = await getEthernetProfileId(
324-
ethernet_profile,
325-
cleanValues.ethernet_profile,
326-
)
327-
const body = {
328-
wifi_profile_id:
329-
!wifi_profile._enable_wifi_connection && !wifi_profile._override ? null : wifiProfileId,
330-
ethernet_profile_id: ethernetProfileId,
335+
let wifiProfileId
336+
if (hasWifi) {
337+
const shouldUpdateNonSharedWifiProfile =
338+
wifi_profile.profile_id === 'non-shared' &&
339+
Boolean(nonSharedWifiProfileId) &&
340+
wifi_profile._enable_wifi_connection
341+
342+
wifiProfileId = await getWifiProfileId(wifi_profile, shouldUpdateNonSharedWifiProfile)
343+
body = {
344+
...body,
345+
wifi_profile_id:
346+
!wifi_profile._enable_wifi_connection && !wifi_profile._override
347+
? null
348+
: wifiProfileId,
349+
}
350+
}
351+
if (hasEthernet) {
352+
const ethernetProfileId = await getEthernetProfileId(
353+
ethernet_profile,
354+
cleanValues.ethernet_profile,
355+
)
356+
body = {
357+
...body,
358+
ethernet_profile_id: ethernetProfileId,
359+
}
331360
}
332361

333362
await dispatch(attachPromise(updateManagedGateway(gtwId, body)))
334363

335364
// Reset the form and the initial values
336365
let resetValues = { ...values }
337-
if (wifi_profile.profile_id !== 'non-shared') {
366+
if (hasWifi && wifi_profile.profile_id !== 'non-shared') {
338367
resetValues = {
339-
...values,
368+
...resetValues,
340369
wifi_profile: {
341370
...values.wifi_profile,
342371
...initialWifiProfile,
@@ -351,7 +380,7 @@ const GatewayConnectionSettings = () => {
351380
values: resetValues,
352381
})
353382

354-
if (resetValues.wifi_profile._enable_wifi_connection) {
383+
if (hasWifi && resetValues.wifi_profile._enable_wifi_connection) {
355384
setSaveFormClicked(true)
356385
}
357386

@@ -385,31 +414,39 @@ const GatewayConnectionSettings = () => {
385414
<RequireRequest requestAction={loadData}>
386415
<div className="item-12 lg:item-6 lg-xl:item-6 xl:item-7">
387416
<PageTitle title={sharedMessages.connectionSettings} />
388-
{isFirstClaim && <Notification info small content={m.firstNotification} />}
389-
<Form
390-
error={error}
391-
onSubmit={handleSubmit}
392-
initialValues={initialValues}
393-
validationSchema={validationSchema}
394-
>
417+
{hasWifi || hasEthernet ? (
395418
<>
396-
<WifiSettingsFormFields
419+
{isFirstClaim && <Notification info small content={m.firstNotification} />}
420+
<Form
421+
error={error}
422+
onSubmit={handleSubmit}
397423
initialValues={initialValues}
398-
isWifiConnected={connectionsData.isWifiConnected}
399-
saveFormClicked={saveFormClicked}
400-
/>
401-
<hr />
402-
<EthernetSettingsFormFields />
403-
404-
<SubmitBar className="mb-cs-l">
405-
<Form.Submit
406-
component={SubmitButton}
407-
message={sharedMessages.saveChanges}
408-
disabled={isLoading}
409-
/>
410-
</SubmitBar>
424+
validationSchema={validationSchema}
425+
>
426+
<>
427+
{hasWifi && (
428+
<WifiSettingsFormFields
429+
initialValues={initialValues}
430+
isWifiConnected={connectionsData.isWifiConnected}
431+
saveFormClicked={saveFormClicked}
432+
/>
433+
)}
434+
{hasWifi && hasEthernet && <hr />}
435+
{hasEthernet && <EthernetSettingsFormFields />}
436+
437+
<SubmitBar className="mb-cs-l">
438+
<Form.Submit
439+
component={SubmitButton}
440+
message={sharedMessages.saveChanges}
441+
disabled={isLoading}
442+
/>
443+
</SubmitBar>
444+
</>
445+
</Form>
411446
</>
412-
</Form>
447+
) : (
448+
<Notification info small content={m.noConnectionSettings} />
449+
)}
413450
</div>
414451
<div className="item-12 lg:item-6 lg-xl:item-6 xl:item-5">
415452
<ManagedGatewayConnections connectionsData={connectionsData} />

‎pkg/webui/console/containers/gateway-managed-gateway/connection-settings/validation-schema.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ import sharedMessages from '@ttn-lw/lib/shared-messages'
2222

2323
export const validationSchema = Yup.object().shape({
2424
wifi_profile: Yup.object()
25+
.nullable()
26+
.default(undefined)
2527
.shape({
2628
_override: Yup.boolean().default(false),
2729
_enable_wifi_connection: Yup.boolean().default(false),
@@ -34,7 +36,7 @@ export const validationSchema = Yup.object().shape({
3436
is: profileId => profileId && profileId.includes('shared'),
3537
then: schema => schema.concat(wifiValidationSchema),
3638
}),
37-
ethernet_profile: ethernetValidationSchema,
39+
ethernet_profile: ethernetValidationSchema.nullable().default(undefined),
3840
})
3941

4042
export default validationSchema

‎pkg/webui/console/store/middleware/logics/gateways.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ const getGatewayLogic = createRequestLogic({
5454
let managed = undefined
5555
try {
5656
managed = await tts.Gateways.getManagedGateway(id, [
57+
'capabilities',
5758
'wifi_profile_id',
5859
'ethernet_profile_id',
5960
'version_ids',

‎pkg/webui/console/store/selectors/gateways.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,16 @@ export const selectIsSelectedGatewayManaged = state =>
5454
export const selectSelectedGatewayClaimable = state =>
5555
selectGatewayStore(state).selectedGatewayClaimable
5656
export const selectSelectedManagedGateway = state => selectSelectedGateway(state)?.managed
57+
export const selectSelectedManagedGatewayHasCellular = state =>
58+
Boolean(selectSelectedManagedGateway(state)?.capabilities?.cellular)
59+
export const selectSelectedManagedGatewayHasWifi = state => {
60+
const capabilities = selectSelectedManagedGateway(state)?.capabilities;
61+
return Boolean(capabilities?.wifi_2_4_ghz) || Boolean(capabilities?.wifi_5_ghz)
62+
}
63+
export const selectSelectedManagedGatewayHasEthernet = state =>
64+
Boolean(selectSelectedManagedGateway(state)?.capabilities?.ethernet)
65+
export const selectSelectedManagedGatewayHasBattery = state =>
66+
Boolean(selectSelectedManagedGateway(state)?.capabilities?.battery)
5767

5868
// Gateways.
5969
const selectGtwsIds = createPaginationIdsSelectorByEntity(ENTITY)

‎pkg/webui/locales/en.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -593,7 +593,8 @@
593593
"console.containers.gateway-managed-gateway.connection-settings.connections.messages.cpuTemperature": "CPU temperature: {temperature}",
594594
"console.containers.gateway-managed-gateway.connection-settings.ethernet-settings-form-fields.ethernetConnection": "Ethernet connection",
595595
"console.containers.gateway-managed-gateway.connection-settings.ethernet-settings-form-fields.useStaticIp": "Use a static IP address",
596-
"console.containers.gateway-managed-gateway.connection-settings.index.firstNotification": "You have just claimed a managed gateway. To connect it to WiFi or ethernet you can configure those connections here. The preprovisioned cellular backhaul typically connects automatically.",
596+
"console.containers.gateway-managed-gateway.connection-settings.index.firstNotification": "You have just claimed a managed gateway. You can configure its connection settings here.",
597+
"console.containers.gateway-managed-gateway.connection-settings.index.noConnectionSettings": "This gateway does not have any connection settings to configure.",
597598
"console.containers.gateway-managed-gateway.connection-settings.index.updateSuccess": "Connection settings updated",
598599
"console.containers.gateway-managed-gateway.connection-settings.index.updateFailure": "There was an error updating these connection settings",
599600
"console.containers.gateway-managed-gateway.connection-settings.wifi-settings-form-fields.settingsProfile": "Settings profile",

‎pkg/webui/locales/ja.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -594,6 +594,7 @@
594594
"console.containers.gateway-managed-gateway.connection-settings.ethernet-settings-form-fields.ethernetConnection": "",
595595
"console.containers.gateway-managed-gateway.connection-settings.ethernet-settings-form-fields.useStaticIp": "",
596596
"console.containers.gateway-managed-gateway.connection-settings.index.firstNotification": "",
597+
"console.containers.gateway-managed-gateway.connection-settings.index.noConnectionSettings": "",
597598
"console.containers.gateway-managed-gateway.connection-settings.index.updateSuccess": "",
598599
"console.containers.gateway-managed-gateway.connection-settings.index.updateFailure": "",
599600
"console.containers.gateway-managed-gateway.connection-settings.wifi-settings-form-fields.settingsProfile": "",

0 commit comments

Comments
 (0)