Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
import { NetworkelementAddListRequest, useNetworkElementServiceAddListMutation } from '@api/api';
import React, { useState } from 'react';
import { Button, Form, Modal } from 'react-bootstrap';
interface AddDeviceModalProps {
show: boolean;
onHide: () => void;
}
interface FormData {
address: '',
mneName: '',
transportOption: undefined,
gnmiSubscribePaths: [],
}
const AddDeviceModal: React.FC<AddDeviceModalProps> = ({ show, onHide }) => {
const [addNetworkElement] = useNetworkElementServiceAddListMutation();
const [formData, setFormData] = useState<FormData>({
address: '',
mneName: '',
transportOption: undefined,
gnmiSubscribePaths: [],
});
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setFormData(prev => ({
...prev,
[name]: value
}));
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
const request: NetworkelementAddListRequest = {
timestamp: Date.now().toString(), // Convert to nanoseconds if needed
mne: [formData],
pid: formData.pid
};
try {
await addNetworkElement({ networkelementAddListRequest: request });
handleReset();
// You might want to add a success notification here
} catch (error) {
console.error('Failed to add device:', error);
// You might want to add an error notification here
}
};
const handleReset = () => {
setFormData({
address: '',
pid: '',
pluginId: '',
mneName: '',
transportOption: undefined,
gnmiSubscribePaths: [],
mneId: ''
});
onHide();
};
return (
<Modal show={show} onHide={handleReset} centered>
<Modal.Header closeButton>
<Modal.Title>Add New Device</Modal.Title>
</Modal.Header>
<Form onSubmit={handleSubmit}>
<Modal.Body>
<Form.Group className="mb-3">
<Form.Label>Address</Form.Label>
<Form.Control
type="text"
name="address"
value={formData.address}
onChange={handleInputChange}
placeholder="Enter device address"
/>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>PID</Form.Label>
<Form.Control
type="text"
name="pid"
value={formData.pid}
onChange={handleInputChange}
placeholder="Enter PID"
/>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>Plugin ID</Form.Label>
<Form.Control
type="text"
name="pluginId"
value={formData.pluginId}
onChange={handleInputChange}
placeholder="Enter plugin ID"
/>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>MNE Name</Form.Label>
<Form.Control
type="text"
name="mneName"
value={formData.mneName}
onChange={handleInputChange}
placeholder="Enter MNE name"
/>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>MNE ID</Form.Label>
<Form.Control
type="text"
name="mneId"
value={formData.mneId}
onChange={handleInputChange}
placeholder="Enter MNE ID"
/>
</Form.Group>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleReset}>
Cancel
</Button>
<Button variant="primary" type="submit">
Add Device
</Button>
</Modal.Footer>
</Form>
</Modal>
);
};
export default AddDeviceModal;