Skip to content

Commit

Permalink
console: Conditionally show WiFi and ethernet config and connections
Browse files Browse the repository at this point in the history
  • Loading branch information
@johanstokking
johanstokking committed Dec 24, 2024
1 parent bf37967 commit 5af97b9
Show file tree
Hide file tree
Showing 8 changed files with 519 additions and 385 deletions.
636 changes: 353 additions & 283 deletions cypress/e2e/console/gateways/managed/connection-settings.spec.js
View file

Large diffs are not rendered by default.

54 changes: 34 additions & 20 deletions ...webui/console/containers/gateway-managed-gateway/connection-settings/connections/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,12 @@ import { CONNECTION_TYPES } from '@console/containers/gateway-managed-gateway/sh
import sharedMessages from '@ttn-lw/lib/shared-messages'
import PropTypes from '@ttn-lw/lib/prop-types'

import { selectSelectedManagedGateway } from '@console/store/selectors/gateways'
import {
selectSelectedManagedGateway,
selectSelectedManagedGatewayHasCellular,
selectSelectedManagedGatewayHasWifi,
selectSelectedManagedGatewayHasEthernet,
} from '@console/store/selectors/gateways'

import m from './messages'

Expand Down Expand Up @@ -119,6 +124,9 @@ ConnectionByType.defaultProps = {

const ManagedGatewayConnections = ({ connectionsData }) => {
const selectedManagedGateway = useSelector(selectSelectedManagedGateway)
const hasCellular = useSelector(selectSelectedManagedGatewayHasCellular)
const hasWifi = useSelector(selectSelectedManagedGatewayHasWifi)
const hasEthernet = useSelector(selectSelectedManagedGatewayHasEthernet)
const {
systemStatus,
controllerConnection,
Expand Down Expand Up @@ -253,25 +261,31 @@ const ManagedGatewayConnections = ({ connectionsData }) => {
</div>

<div className="d-flex flex-column gap-ls-xs">
<ConnectionByType
isConnected={isCellularConnected}
type={CONNECTION_TYPES.CELLULAR}
details={isCellularConnected && getCellularDetails(cellularBackhaul)}
connectedVia={cellularBackhaul?.operator}
/>
<ConnectionByType
isConnected={isWifiConnected}
type={CONNECTION_TYPES.WIFI}
details={isWifiConnected && getWifiDetails(wifiBackhaul)}
connectedVia={wifiBackhaul?.ssid}
macAddress={managedGateway.wifi_mac_address}
/>
<ConnectionByType
isConnected={isEthernetConnected}
type={CONNECTION_TYPES.ETHERNET}
details={isEthernetConnected && getEthernetDetails(ethernetBackhaul)}
macAddress={managedGateway.ethernet_mac_address}
/>
{hasCellular && (
<ConnectionByType
isConnected={isCellularConnected}
type={CONNECTION_TYPES.CELLULAR}
details={isCellularConnected && getCellularDetails(cellularBackhaul)}
connectedVia={cellularBackhaul?.operator}
/>
)}
{hasWifi && (
<ConnectionByType
isConnected={isWifiConnected}
type={CONNECTION_TYPES.WIFI}
details={isWifiConnected && getWifiDetails(wifiBackhaul)}
connectedVia={wifiBackhaul?.ssid}
macAddress={managedGateway.wifi_mac_address}
/>
)}
{hasEthernet && (
<ConnectionByType
isConnected={isEthernetConnected}
type={CONNECTION_TYPES.ETHERNET}
details={isEthernetConnected && getEthernetDetails(ethernetBackhaul)}
macAddress={managedGateway.ethernet_mac_address}
/>
)}
</div>
</div>
)
Expand Down
195 changes: 115 additions & 80 deletions pkg/webui/console/containers/gateway-managed-gateway/connection-settings/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,12 +63,15 @@ import { updateManagedGateway } from '@console/store/actions/gateways'
import {
selectSelectedGateway,
selectSelectedManagedGateway,
selectSelectedManagedGatewayHasWifi,
selectSelectedManagedGatewayHasEthernet,
} from '@console/store/selectors/gateways'
import { selectUserId } from '@account/store/selectors/user'

const m = defineMessages({
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.',
'You have just claimed a managed gateway. You can configure its connection settings here.',
noConnectionSettings: 'This gateway does not have any connection settings to configure.',
updateSuccess: 'Connection settings updated',
updateFailure: 'There was an error updating these connection settings',
})
Expand All @@ -91,14 +94,16 @@ const GatewayConnectionSettings = () => {

const connectionsData = useConnectionsData()

const hasWifi = useSelector(selectSelectedManagedGatewayHasWifi)
const hasWifiProfileSet = hasWifi && Boolean(selectedManagedGateway.wifi_profile_id)
const hasEthernet = useSelector(selectSelectedManagedGatewayHasEthernet)
const hasEthernetProfileSet = hasEthernet && Boolean(selectedManagedGateway.ethernet_profile_id)

const [initialValues, setInitialValues] = useState({
wifi_profile: { ...initialWifiProfile },
ethernet_profile: { ...initialEthernetProfile },
...(hasWifi && { wifi_profile: { ...initialWifiProfile } }),
...(hasEthernet && { ethernet_profile: { ...initialEthernetProfile } }),
})

const hasWifiProfileSet = Boolean(selectedManagedGateway.wifi_profile_id)
const hasEthernetProfileSet = Boolean(selectedManagedGateway.ethernet_profile_id)

useBreadcrumbs(
'gtws.single.managed-gateway.connection-settings',
<Breadcrumb
Expand All @@ -110,7 +115,7 @@ const GatewayConnectionSettings = () => {
const fetchWifiProfile = useCallback(
async collaborators => {
let wifiProfile
let entityId
let wifiProfileEntityId

if (hasWifiProfileSet) {
setError(undefined)
Expand All @@ -125,7 +130,7 @@ const GatewayConnectionSettings = () => {
),
),
)
entityId = userId
wifiProfileEntityId = userId
} catch (e) {
if (!isNotFoundError(e)) {
setError(e)
Expand All @@ -150,7 +155,7 @@ const GatewayConnectionSettings = () => {
),
),
)
entityId = orgId
wifiProfileEntityId = orgId
break
} catch (e) {
if (!isNotFoundError(e)) {
Expand All @@ -161,7 +166,7 @@ const GatewayConnectionSettings = () => {
}
}
}
return { wifiProfile, entityId }
return { wifiProfile, wifiProfileEntityId }
},
[dispatch, hasWifiProfileSet, selectedManagedGateway.wifi_profile_id, userId],
)
Expand Down Expand Up @@ -190,8 +195,8 @@ const GatewayConnectionSettings = () => {
}, [dispatch, hasEthernetProfileSet, selectedManagedGateway.ethernet_profile_id])

const updateInitialWifiProfile = useCallback(
(values, profile, entityId, isNonSharedProfile) => ({
...values.wifi_profile,
(profile, entityId, isNonSharedProfile) => ({
...initialWifiProfile,
...(isNonSharedProfile && { ...profile.data }),
profile_id: isNonSharedProfile
? 'non-shared'
Expand All @@ -204,8 +209,8 @@ const GatewayConnectionSettings = () => {
)

const updateInitialEthernetProfile = useCallback(
(values, profile) => ({
...values.ethernet_profile,
profile => ({
...initialEthernetProfile,
...revertEthernetProfile(profile?.data ?? {}),
profile_id: selectedManagedGateway.ethernet_profile_id ?? '',
}),
Expand All @@ -214,32 +219,45 @@ const GatewayConnectionSettings = () => {

const loadData = useCallback(
async dispatch => {
let collaborators = []
if (mayViewCollaborators) {
const { entities } = await dispatch(attachPromise(getCollaboratorsList('gateway', gtwId)))
collaborators = entities
}
const { wifiProfile, entityId } = await fetchWifiProfile(collaborators)
const { ethernetProfile } = await fetchEthernetProfile()
const isNonSharedProfile = Boolean(wifiProfile) && !Boolean(wifiProfile.data.shared)
if (isNonSharedProfile) {
setNonSharedWifiProfileId(selectedManagedGateway.wifi_profile_id)
const fetchCollaborators = async () => {
if (mayViewCollaborators) {
const { entities } = await dispatch(attachPromise(getCollaboratorsList('gateway', gtwId)))
return entities
}
return []
}
setInitialValues(oldValues => ({
...oldValues,
wifi_profile: updateInitialWifiProfile(
oldValues,

const newValues = {}

if (hasWifi) {
const collaborators = await fetchCollaborators()
const { wifiProfile, wifiProfileEntityId } = await fetchWifiProfile(collaborators)
const isNonSharedWifiProfile = Boolean(wifiProfile) && !Boolean(wifiProfile.data.shared)

if (isNonSharedWifiProfile) {
setNonSharedWifiProfileId(selectedManagedGateway.wifi_profile_id)
}

newValues.wifi_profile = updateInitialWifiProfile(
wifiProfile,
entityId,
isNonSharedProfile,
),
ethernet_profile: updateInitialEthernetProfile(oldValues, ethernetProfile),
}))
wifiProfileEntityId,
isNonSharedWifiProfile,
)
}

if (hasEthernet) {
const { ethernetProfile } = await fetchEthernetProfile()
newValues.ethernet_profile = updateInitialEthernetProfile(ethernetProfile)
}

setInitialValues(oldValues => ({ ...oldValues, ...newValues }))
},
[
fetchEthernetProfile,
fetchWifiProfile,
gtwId,
hasEthernet,
hasWifi,
mayViewCollaborators,
selectedManagedGateway.wifi_profile_id,
updateInitialEthernetProfile,
Expand Down Expand Up @@ -312,46 +330,53 @@ const GatewayConnectionSettings = () => {

setError(undefined)
try {
const body = {}
const { wifi_profile, ethernet_profile } = values

const shouldUpdateNonSharedWifiProfile =
wifi_profile.profile_id === 'non-shared' &&
Boolean(nonSharedWifiProfileId) &&
wifi_profile._enable_wifi_connection
if (hasWifi) {
const shouldUpdateNonSharedWifiProfile =
wifi_profile.profile_id === 'non-shared' &&
Boolean(nonSharedWifiProfileId) &&
wifi_profile._enable_wifi_connection

const wifiProfileId = await getWifiProfileId(wifi_profile, shouldUpdateNonSharedWifiProfile)
const ethernetProfileId = await getEthernetProfileId(
ethernet_profile,
cleanValues.ethernet_profile,
)
const body = {
wifi_profile_id:
!wifi_profile._enable_wifi_connection && !wifi_profile._override ? null : wifiProfileId,
ethernet_profile_id: ethernetProfileId,
if (!wifi_profile._enable_wifi_connection && !wifi_profile._override) {
body.wifi_profile_id = null
} else {
body.wifi_profile_id = await getWifiProfileId(
wifi_profile,
shouldUpdateNonSharedWifiProfile,
)
}
}
if (hasEthernet) {
body.ethernet_profile_id = await getEthernetProfileId(
ethernet_profile,
cleanValues.ethernet_profile,
)
}

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

// Reset the form and the initial values
let resetValues = { ...values }
if (wifi_profile.profile_id !== 'non-shared') {
resetValues = {
...values,
wifi_profile: {
...values.wifi_profile,
...initialWifiProfile,
profile_id: wifiProfileId,
_profile_of: wifi_profile._profile_of,
},
}
const resetValues = {
...values,
...(hasWifi &&
wifi_profile.profile_id !== 'non-shared' && {
wifi_profile: {
...wifi_profile,
...initialWifiProfile,
profile_id: body.wifi_profile_id,
_profile_of: wifi_profile._profile_of,
},
}),
}

setInitialValues(resetValues)
resetForm({
values: resetValues,
})

if (resetValues.wifi_profile._enable_wifi_connection) {
if (hasWifi && resetValues.wifi_profile._enable_wifi_connection) {
setSaveFormClicked(true)
}

Expand All @@ -373,6 +398,8 @@ const GatewayConnectionSettings = () => {
[
dispatch,
gtwId,
hasEthernet,
hasWifi,
hasEthernetProfileSet,
initialValues.ethernet_profile,
initialValues.wifi_profile,
Expand All @@ -386,31 +413,39 @@ const GatewayConnectionSettings = () => {
<div className="item-12 d-flex gap-ls-s md:direction-column">
<div className="w-full">
<PageTitle title={sharedMessages.connectionSettings} />
{isFirstClaim && <Notification info small content={m.firstNotification} />}
<Form
error={error}
onSubmit={handleSubmit}
initialValues={initialValues}
validationSchema={validationSchema}
>
{hasWifi || hasEthernet ? (
<>
<WifiSettingsFormFields
{isFirstClaim && <Notification info small content={m.firstNotification} />}
<Form
error={error}
onSubmit={handleSubmit}
initialValues={initialValues}
isWifiConnected={connectionsData.isWifiConnected}
saveFormClicked={saveFormClicked}
/>
<hr />
<EthernetSettingsFormFields />

<SubmitBar className="mb-cs-l">
<Form.Submit
component={SubmitButton}
message={sharedMessages.saveChanges}
disabled={isLoading}
/>
</SubmitBar>
validationSchema={validationSchema}
>
<>
{hasWifi && (
<WifiSettingsFormFields
initialValues={initialValues}
isWifiConnected={connectionsData.isWifiConnected}
saveFormClicked={saveFormClicked}
/>
)}
{hasWifi && hasEthernet && <hr />}
{hasEthernet && <EthernetSettingsFormFields />}

<SubmitBar className="mb-cs-l">
<Form.Submit
component={SubmitButton}
message={sharedMessages.saveChanges}
disabled={isLoading}
/>
</SubmitBar>
</>
</Form>
</>
</Form>
) : (
<Notification info small content={m.noConnectionSettings} />
)}
</div>
<ManagedGatewayConnections connectionsData={connectionsData} />
</div>
Expand Down
Loading

0 comments on commit 5af97b9

Please sign in to comment.