Skip to content

Commit fb132cd

Browse files
Shahbaz-dataqShahbaz-dataq
authored
NMS-19952: Create initial scaffolding for UI (#8345)
* initial changes * general configuration ui * changes * Changes
1 parent 73be4eb commit fb132cd

File tree

6 files changed

+496
-0
lines changed

6 files changed

+496
-0
lines changed

‎ui/src/components/TrapConfiguration/GeneralConfiguration.vue‎

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
<template>
2+
<TableCard class="general-configuration">
3+
<div class="header">
4+
<div class="section-left">
5+
<h3>TrapD Listener Settings</h3>
6+
<p>General config for TrapD Config</p>
7+
</div>
8+
</div>
9+
<div class="section">
10+
<FeatherInput
11+
label="Port"
12+
placeholder="Enter port number"
13+
type="number"
14+
:hint="'Default: 162'"
15+
/>
16+
<FeatherInput
17+
label="Bind Address"
18+
placeholder="Enter host name"
19+
:hint="'0.0.0.0 for all, or specify IP address'"
20+
/>
21+
</div>
22+
<div class="spacer"></div>
23+
<div class="spacer"></div>
24+
<div class="switch-row">
25+
<SwitchRender
26+
:checked="status"
27+
@click="onChangeStatus"
28+
data-test="unknown-devices-input"
29+
/>
30+
<label class="switch-label">Auto-discover unknown devices</label>
31+
</div>
32+
<div class="spacer"></div>
33+
<div class="spacer"></div>
34+
<div class="expansion-panel">
35+
<FeatherExpansionPanel title="Advanced Configuration Options">
36+
<div class="expansion-section">
37+
<div class="spacer"></div>
38+
<div class="spacer"></div>
39+
<div class="trap-message-row">
40+
<SwitchRender
41+
:checked="trapMessageStatus"
42+
@click="onChangeTrapMessageStatus"
43+
data-test="trap-message-input"
44+
/>
45+
<label class="switch-label">Include raw trap message (before processing)</label>
46+
</div>
47+
<div class="spacer"></div>
48+
<div class="spacer"></div>
49+
<div class="trap-source-address-row">
50+
<SwitchRender
51+
:checked="trapSourceAddressStatus"
52+
@click="onChangeTrapSourceAddressStatus"
53+
data-test="trap-source-address-input"
54+
/>
55+
<label class="switch-label">Use forwarded trap source address (for forwarded SNMPv2 traps)</label>
56+
</div>
57+
<div class="spacer"></div>
58+
<div class="spacer"></div>
59+
<FeatherInput
60+
label="Threads"
61+
placeholder="Enter number of threads"
62+
type="number"
63+
:hint="'Default: 0'"
64+
/>
65+
<div class="spacer"></div>
66+
<div class="spacer"></div>
67+
<FeatherInput
68+
label="Queue Size"
69+
placeholder="Enter queue size"
70+
type="number"
71+
:hint="'Default: 10000'"
72+
/>
73+
<div class="spacer"></div>
74+
<div class="spacer"></div>
75+
<FeatherInput
76+
label="Batch Size"
77+
placeholder="Enter batch size"
78+
type="number"
79+
:hint="'Default: 1000'"
80+
/>
81+
<div class="spacer"></div>
82+
<div class="spacer"></div>
83+
<FeatherInput
84+
label="Batch Interval"
85+
placeholder="Enter batch interval"
86+
type="number"
87+
:hint="'Default: 500'"
88+
/>
89+
<div class="spacer"></div>
90+
<div class="spacer"></div>
91+
</div>
92+
</FeatherExpansionPanel>
93+
</div>
94+
<div class="spacer"></div>
95+
<div class="spacer"></div>
96+
<div class="footer">
97+
<FeatherButton
98+
primary
99+
data-test="save-button"
100+
>
101+
Update Changes
102+
</FeatherButton>
103+
</div>
104+
</TableCard>
105+
</template>
106+
107+
<script setup lang="ts">
108+
import { FeatherExpansionPanel } from '@featherds/expansion'
109+
import { FeatherInput } from '@featherds/input'
110+
import { SwitchRender } from '@featherds/switch'
111+
import TableCard from '../Common/TableCard.vue'
112+
import { FeatherButton } from '@featherds/button'
113+
114+
const status = ref(false)
115+
const trapMessageStatus = ref(false)
116+
const trapSourceAddressStatus = ref(false)
117+
118+
const onChangeStatus = () => {
119+
status.value = !status.value
120+
}
121+
122+
const onChangeTrapMessageStatus = () => {
123+
trapMessageStatus.value = !trapMessageStatus.value
124+
}
125+
126+
const onChangeTrapSourceAddressStatus = () => {
127+
trapSourceAddressStatus.value = !trapSourceAddressStatus.value
128+
}
129+
</script>
130+
131+
<style lang="scss" scoped>
132+
@use '@featherds/styles/themes/variables';
133+
@use '@featherds/styles/mixins/typography';
134+
135+
.general-configuration {
136+
margin-top: 10px;
137+
padding: 25px;
138+
border: 1px solid var(--feather-border-on-surface);
139+
140+
.header {
141+
display: flex;
142+
justify-content: space-between;
143+
margin-bottom: 20px;
144+
145+
.section-left {
146+
h3 {
147+
@include typography.headline3;
148+
color: var(--feather-text-primary);
149+
}
150+
151+
p {
152+
@include typography.body-large;
153+
color: var(--feather-text-secondary);
154+
}
155+
}
156+
}
157+
158+
.spacer {
159+
height: 0.5em;
160+
}
161+
162+
.switch-row {
163+
display: flex;
164+
align-items: center;
165+
gap: 0.75rem;
166+
167+
.switch-label {
168+
@include typography.body-small;
169+
}
170+
}
171+
172+
.section {
173+
display: flex;
174+
align-items: center;
175+
gap: 20px;
176+
width: 50%;
177+
178+
&>* {
179+
flex: 1;
180+
}
181+
}
182+
183+
.expansion-panel {
184+
:deep(.feather-expansion) {
185+
[role="heading"] {
186+
background-color: rgba(10, 12, 27, 0.12);
187+
border: 1px solid var(--feather-border-on-surface);
188+
189+
a {
190+
span {
191+
@include typography.headline4;
192+
}
193+
}
194+
}
195+
196+
.expansion-section {
197+
width: 45%;
198+
199+
.trap-message-row,
200+
.trap-source-address-row {
201+
display: flex;
202+
align-items: center;
203+
gap: 0.75rem;
204+
205+
.switch-label {
206+
@include typography.body-small;
207+
}
208+
}
209+
}
210+
}
211+
}
212+
213+
.footer {
214+
display: flex;
215+
justify-content: flex-end;
216+
}
217+
}
218+
</style>
219+

0 commit comments

Comments
 (0)