ExternalVendorCode/chirpstack
1
0
Fork 0
mirror of https://github.com/chirpstack/chirpstack.git synced 2024-12-24 07:16:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add missing <Admin> block around Delete device + format code.

Browse Source 
The <Admin> block hides components when the user doesn't have sufficient
permissions to perform an UI action. Without this the 'Delete device'
button was visible, but on click, the user would be redirect to the
login page due to permission issues (API).

Fixes #71.
This commit is contained in:
Orne Brocaar 2023-01-10 16:50:13 +00:00
parent ac30f68d85
commit 687c3f21ec
2 changed files with 40 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
ui/src/views/device-profiles/DeviceProfileForm.tsx
View File

@ -10,10 +10,7 @@ import {
MeasurementKind,
} from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
import { Region, MacVersion, RegParamsRevision } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
import {
ListRegionsResponse,
RegionListItem,
} from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
import { ListRegionsResponse, RegionListItem } from "@chirpstack/chirpstack-api-grpc-web/api/internal_pb";
import { ListDeviceProfileAdrAlgorithmsResponse } from "@chirpstack/chirpstack-api-grpc-web/api/device_profile_pb";
import {
ListDeviceProfileTemplatesRequest,
@ -236,19 +233,22 @@ class DeviceProfileForm extends Component<IProps, IState> {
});
InternalStore.listRegions((resp: ListRegionsResponse) => {
this.setState({
regionConfigurations: resp.getRegionsList(),
}, () => {
let regionConfigurationsFiltered: [string, string][] = [];
for (const r of this.state.regionConfigurations) {
if (v.getRegion() === r.getRegion()) {
regionConfigurationsFiltered.push([r.getId(), r.getDescription()]);
this.setState(
{
regionConfigurations: resp.getRegionsList(),
},
() => {
let regionConfigurationsFiltered: [string, string][] = [];
for (const r of this.state.regionConfigurations) {
if (v.getRegion() === r.getRegion()) {
regionConfigurationsFiltered.push([r.getId(), r.getDescription()]);
}
}
}
this.setState({
regionConfigurationsFiltered: regionConfigurationsFiltered,
});
});
this.setState({
regionConfigurationsFiltered: regionConfigurationsFiltered,
});
},
);
});
DeviceProfileStore.listAdrAlgorithms((resp: ListDeviceProfileAdrAlgorithmsResponse) => {
@ -474,12 +474,17 @@ class DeviceProfileForm extends Component<IProps, IState> {
this.formRef.current.setFieldsValue({
regionConfigId: "",
});
}
};
render() {
const adrOptions = this.state.adrAlgorithms.map(v => <Select.Option value={v[0]}>{v[1]}</Select.Option>);
const regionConfigOptions = this.state.regionConfigurationsFiltered.map(v => <Select.Option value={v[0]}>{v[1]}</Select.Option>);
const regionOptions = this.state.regionConfigurations.map(v => v.getRegion()).filter((v, i, a) => a.indexOf(v) === i).map(v => <Select.Option value={v}>{getEnumName(Region, v).replace('_', '-')}</Select.Option>);
const regionConfigOptions = this.state.regionConfigurationsFiltered.map(v => (
<Select.Option value={v[0]}>{v[1]}</Select.Option>
));
const regionOptions = this.state.regionConfigurations
.map(v => v.getRegion())
.filter((v, i, a) => a.indexOf(v) === i)
.map(v => <Select.Option value={v}>{getEnumName(Region, v).replace("_", "-")}</Select.Option>);
const operations = (
<Button type="primary" onClick={this.showTemplateModal}>
Select device-profile template
@ -508,7 +513,11 @@ class DeviceProfileForm extends Component<IProps, IState> {
</Form.Item>
<Row gutter={24}>
<Col span={12}>
<Form.Item label="Region" name="region" rules={[{ required: true, message: "Please select a region!" }]}>
<Form.Item
label="Region"
name="region"
rules={[{ required: true, message: "Please select a region!" }]}
>
<Select disabled={this.props.disabled} onChange={this.onRegionChange}>
{regionOptions}
</Select>
@ -520,7 +529,9 @@ class DeviceProfileForm extends Component<IProps, IState> {
tooltip="By selecting a region configuration, the device will only work within the selected region configuration. If left blank, the device will work under all region configurations of the selected region."
name="regionConfigId"
>
<Select disabled={this.props.disabled} allowClear>{regionConfigOptions}</Select>
<Select disabled={this.props.disabled} allowClear>
{regionConfigOptions}
</Select>
</Form.Item>
</Col>
</Row>

13
ui/src/views/devices/DeviceLayout.tsx
View File

@ -20,6 +20,7 @@ import {
import DeviceStore from "../../stores/DeviceStore";
import DeviceProfileStore from "../../stores/DeviceProfileStore";
import DeleteConfirm from "../../components/DeleteConfirm";
import Admin from "../../components/Admin";
import DeviceDashboard from "./DeviceDashboard";
import EditDevice from "./EditDevice";
@ -166,11 +167,13 @@ class DeviceLayout extends Component<IProps, IState> {
title={device.getName()}
subTitle={`device eui: ${device.getDevEui()}`}
extra={[
<DeleteConfirm typ="device" confirm={device.getName()} onConfirm={this.deleteDevice}>
<Button danger type="primary">
Delete device
</Button>
</DeleteConfirm>,
<Admin tenantId={this.props.tenant.getId()} isDeviceAdmin>
<DeleteConfirm typ="device" confirm={device.getName()} onConfirm={this.deleteDevice}>
<Button danger type="primary">
Delete device
</Button>
</DeleteConfirm>
</Admin>,
]}
/>
<Card>