Skip to content

Commit 5af97b9

Browse files
johanstokkingjohanstokking
committed
console: Conditionally show WiFi and ethernet config and connections
1 parent bf37967 commit 5af97b9

File tree

8 files changed

+519
-385
lines changed

8 files changed

+519
-385
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: 115 additions & 80 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
)
@@ -190,8 +195,8 @@ const GatewayConnectionSettings = () => {
190195
}, [dispatch, hasEthernetProfileSet, selectedManagedGateway.ethernet_profile_id])
191196

192197
const updateInitialWifiProfile = useCallback(
193-
(values, profile, entityId, isNonSharedProfile) => ({
194-
...values.wifi_profile,
198+
(profile, entityId, isNonSharedProfile) => ({
199+
...initialWifiProfile,
195200
...(isNonSharedProfile && { ...profile.data }),
196201
profile_id: isNonSharedProfile
197202
? 'non-shared'
@@ -204,8 +209,8 @@ const GatewayConnectionSettings = () => {
204209
)
205210

206211
const updateInitialEthernetProfile = useCallback(
207-
(values, profile) => ({
208-
...values.ethernet_profile,
212+
profile => ({
213+
...initialEthernetProfile,
209214
...revertEthernetProfile(profile?.data ?? {}),
210215
profile_id: selectedManagedGateway.ethernet_profile_id ?? '',
211216
}),
@@ -214,32 +219,45 @@ const GatewayConnectionSettings = () => {
214219

215220
const loadData = useCallback(
216221
async dispatch => {
217-
let collaborators = []
218-
if (mayViewCollaborators) {
219-
const { entities } = await dispatch(attachPromise(getCollaboratorsList('gateway', gtwId)))
220-
collaborators = entities
221-
}
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)
222+
const fetchCollaborators = async () => {
223+
if (mayViewCollaborators) {
224+
const { entities } = await dispatch(attachPromise(getCollaboratorsList('gateway', gtwId)))
225+
return entities
226+
}
227+
return []
227228
}
228-
setInitialValues(oldValues => ({
229-
...oldValues,
230-
wifi_profile: updateInitialWifiProfile(
231-
oldValues,
229+
230+
const newValues = {}
231+
232+
if (hasWifi) {
233+
const collaborators = await fetchCollaborators()
234+
const { wifiProfile, wifiProfileEntityId } = await fetchWifiProfile(collaborators)
235+
const isNonSharedWifiProfile = Boolean(wifiProfile) && !Boolean(wifiProfile.data.shared)
236+
237+
if (isNonSharedWifiProfile) {
238+
setNonSharedWifiProfileId(selectedManagedGateway.wifi_profile_id)
239+
}
240+
241+
newValues.wifi_profile = updateInitialWifiProfile(
232242
wifiProfile,
233-
entityId,
234-
isNonSharedProfile,
235-
),
236-
ethernet_profile: updateInitialEthernetProfile(oldValues, ethernetProfile),
237-
}))
243+
wifiProfileEntityId,
244+
isNonSharedWifiProfile,
245+
)
246+
}
247+
248+
if (hasEthernet) {
249+
const { ethernetProfile } = await fetchEthernetProfile()
250+
newValues.ethernet_profile = updateInitialEthernetProfile(ethernetProfile)
251+
}
252+
253+
setInitialValues(oldValues => ({ ...oldValues, ...newValues }))
238254
},
239255
[
240256
fetchEthernetProfile,
241257
fetchWifiProfile,
242258
gtwId,
259+
hasEthernet,
260+
hasWifi,
243261
mayViewCollaborators,
244262
selectedManagedGateway.wifi_profile_id,
245263
updateInitialEthernetProfile,
@@ -312,46 +330,53 @@ const GatewayConnectionSettings = () => {
312330

313331
setError(undefined)
314332
try {
333+
const body = {}
315334
const { wifi_profile, ethernet_profile } = values
316335

317-
const shouldUpdateNonSharedWifiProfile =
318-
wifi_profile.profile_id === 'non-shared' &&
319-
Boolean(nonSharedWifiProfileId) &&
320-
wifi_profile._enable_wifi_connection
336+
if (hasWifi) {
337+
const shouldUpdateNonSharedWifiProfile =
338+
wifi_profile.profile_id === 'non-shared' &&
339+
Boolean(nonSharedWifiProfileId) &&
340+
wifi_profile._enable_wifi_connection
321341

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,
342+
if (!wifi_profile._enable_wifi_connection && !wifi_profile._override) {
343+
body.wifi_profile_id = null
344+
} else {
345+
body.wifi_profile_id = await getWifiProfileId(
346+
wifi_profile,
347+
shouldUpdateNonSharedWifiProfile,
348+
)
349+
}
350+
}
351+
if (hasEthernet) {
352+
body.ethernet_profile_id = await getEthernetProfileId(
353+
ethernet_profile,
354+
cleanValues.ethernet_profile,
355+
)
331356
}
332357

333358
await dispatch(attachPromise(updateManagedGateway(gtwId, body)))
334359

335360
// Reset the form and the initial values
336-
let resetValues = { ...values }
337-
if (wifi_profile.profile_id !== 'non-shared') {
338-
resetValues = {
339-
...values,
340-
wifi_profile: {
341-
...values.wifi_profile,
342-
...initialWifiProfile,
343-
profile_id: wifiProfileId,
344-
_profile_of: wifi_profile._profile_of,
345-
},
346-
}
361+
const resetValues = {
362+
...values,
363+
...(hasWifi &&
364+
wifi_profile.profile_id !== 'non-shared' && {
365+
wifi_profile: {
366+
...wifi_profile,
367+
...initialWifiProfile,
368+
profile_id: body.wifi_profile_id,
369+
_profile_of: wifi_profile._profile_of,
370+
},
371+
}),
347372
}
348373

349374
setInitialValues(resetValues)
350375
resetForm({
351376
values: resetValues,
352377
})
353378

354-
if (resetValues.wifi_profile._enable_wifi_connection) {
379+
if (hasWifi && resetValues.wifi_profile._enable_wifi_connection) {
355380
setSaveFormClicked(true)
356381
}
357382

@@ -373,6 +398,8 @@ const GatewayConnectionSettings = () => {
373398
[
374399
dispatch,
375400
gtwId,
401+
hasEthernet,
402+
hasWifi,
376403
hasEthernetProfileSet,
377404
initialValues.ethernet_profile,
378405
initialValues.wifi_profile,
@@ -386,31 +413,39 @@ const GatewayConnectionSettings = () => {
386413
<div className="item-12 d-flex gap-ls-s md:direction-column">
387414
<div className="w-full">
388415
<PageTitle title={sharedMessages.connectionSettings} />
389-
{isFirstClaim && <Notification info small content={m.firstNotification} />}
390-
<Form
391-
error={error}
392-
onSubmit={handleSubmit}
393-
initialValues={initialValues}
394-
validationSchema={validationSchema}
395-
>
416+
{hasWifi || hasEthernet ? (
396417
<>
397-
<WifiSettingsFormFields
418+
{isFirstClaim && <Notification info small content={m.firstNotification} />}
419+
<Form
420+
error={error}
421+
onSubmit={handleSubmit}
398422
initialValues={initialValues}
399-
isWifiConnected={connectionsData.isWifiConnected}
400-
saveFormClicked={saveFormClicked}
401-
/>
402-
<hr />
403-
<EthernetSettingsFormFields />
404-
405-
<SubmitBar className="mb-cs-l">
406-
<Form.Submit
407-
component={SubmitButton}
408-
message={sharedMessages.saveChanges}
409-
disabled={isLoading}
410-
/>
411-
</SubmitBar>
423+
validationSchema={validationSchema}
424+
>
425+
<>
426+
{hasWifi && (
427+
<WifiSettingsFormFields
428+
initialValues={initialValues}
429+
isWifiConnected={connectionsData.isWifiConnected}
430+
saveFormClicked={saveFormClicked}
431+
/>
432+
)}
433+
{hasWifi && hasEthernet && <hr />}
434+
{hasEthernet && <EthernetSettingsFormFields />}
435+
436+
<SubmitBar className="mb-cs-l">
437+
<Form.Submit
438+
component={SubmitButton}
439+
message={sharedMessages.saveChanges}
440+
disabled={isLoading}
441+
/>
442+
</SubmitBar>
443+
</>
444+
</Form>
412445
</>
413-
</Form>
446+
) : (
447+
<Notification info small content={m.noConnectionSettings} />
448+
)}
414449
</div>
415450
<ManagedGatewayConnections connectionsData={connectionsData} />
416451
</div>

0 commit comments

Comments
 (0)