Skip to content

NMS-19952: Create initial scaffolding for UI #8345

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Shahbaz-dataq merged 4 commits into from
Mar 11, 2026
+496 −0
Merged

NMS-19952: Create initial scaffolding for UI #8345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2e7b4a1
initial changes
Shahbaz-dataq Mar 9, 2026
4dbcb04
general configuration ui
Shahbaz-dataq Mar 10, 2026
06cce85
changes
Shahbaz-dataq Mar 10, 2026
57c574f
Changes
Shahbaz-dataq Mar 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
219 changes: 219 additions & 0 deletions ui/src/components/TrapConfiguration/GeneralConfiguration.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,219 @@
<template>
<TableCard class="general-configuration">
<div class="header">
<div class="section-left">
<h3>TrapD Listener Settings</h3>
<p>General config for TrapD Config</p>
</div>
</div>
<div class="section">
<FeatherInput
label="Port"
placeholder="Enter port number"
type="number"
:hint="'Default: 162'"
/>
<FeatherInput
label="Bind Address"
placeholder="Enter host name"
:hint="'0.0.0.0 for all, or specify IP address'"
/>
</div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="switch-row">
<SwitchRender
:checked="status"
@click="onChangeStatus"
data-test="unknown-devices-input"
/>
<label class="switch-label">Auto-discover unknown devices</label>
</div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="expansion-panel">
<FeatherExpansionPanel title="Advanced Configuration Options">
<div class="expansion-section">
<div class="spacer"></div>
<div class="spacer"></div>
<div class="trap-message-row">
<SwitchRender
:checked="trapMessageStatus"
@click="onChangeTrapMessageStatus"
data-test="trap-message-input"
/>
<label class="switch-label">Include raw trap message (before processing)</label>
</div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="trap-source-address-row">
<SwitchRender
:checked="trapSourceAddressStatus"
@click="onChangeTrapSourceAddressStatus"
data-test="trap-source-address-input"
/>
<label class="switch-label">Use forwarded trap source address (for forwarded SNMPv2 traps)</label>
</div>
<div class="spacer"></div>
<div class="spacer"></div>
<FeatherInput
label="Threads"
placeholder="Enter number of threads"
type="number"
:hint="'Default: 0'"
/>
<div class="spacer"></div>
<div class="spacer"></div>
<FeatherInput
label="Queue Size"
placeholder="Enter queue size"
type="number"
:hint="'Default: 10000'"
/>
<div class="spacer"></div>
<div class="spacer"></div>
<FeatherInput
label="Batch Size"
placeholder="Enter batch size"
type="number"
:hint="'Default: 1000'"
/>
<div class="spacer"></div>
<div class="spacer"></div>
<FeatherInput
label="Batch Interval"
placeholder="Enter batch interval"
type="number"
:hint="'Default: 500'"
/>
<div class="spacer"></div>
<div class="spacer"></div>
</div>
</FeatherExpansionPanel>
</div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="footer">
<FeatherButton
primary
data-test="save-button"
>
Update Changes
</FeatherButton>
</div>
</TableCard>
</template>

<script setup lang="ts">
import { FeatherExpansionPanel } from '@featherds/expansion'
import { FeatherInput } from '@featherds/input'
import { SwitchRender } from '@featherds/switch'
import TableCard from '../Common/TableCard.vue'
import { FeatherButton } from '@featherds/button'

const status = ref(false)
const trapMessageStatus = ref(false)
const trapSourceAddressStatus = ref(false)

const onChangeStatus = () => {
status.value = !status.value
}

const onChangeTrapMessageStatus = () => {
trapMessageStatus.value = !trapMessageStatus.value
}

const onChangeTrapSourceAddressStatus = () => {
trapSourceAddressStatus.value = !trapSourceAddressStatus.value
}
</script>

<style lang="scss" scoped>
@use '@featherds/styles/themes/variables';
@use '@featherds/styles/mixins/typography';

.general-configuration {
margin-top: 10px;
padding: 25px;
border: 1px solid var(--feather-border-on-surface);

.header {
display: flex;
justify-content: space-between;
margin-bottom: 20px;

.section-left {
h3 {
@include typography.headline3;
color: var(--feather-text-primary);
}

p {
@include typography.body-large;
color: var(--feather-text-secondary);
}
}
}

.spacer {
height: 0.5em;
}

.switch-row {
display: flex;
align-items: center;
gap: 0.75rem;

.switch-label {
@include typography.body-small;
}
}

.section {
display: flex;
align-items: center;
gap: 20px;
width: 50%;

&>* {
flex: 1;
}
}

.expansion-panel {
:deep(.feather-expansion) {
[role="heading"] {
background-color: rgba(10, 12, 27, 0.12);
border: 1px solid var(--feather-border-on-surface);

a {
span {
@include typography.headline4;
}
}
}

.expansion-section {
width: 45%;

.trap-message-row,
.trap-source-address-row {
display: flex;
align-items: center;
gap: 0.75rem;

.switch-label {
@include typography.body-small;
}
}
}
}
}

.footer {
display: flex;
justify-content: flex-end;
}
}
</style>

Loading