GSOC 2025: Enhanced SwitchMap-NG Web Features

[Abhi-MS]

Project Summary

The existing SwitchMap-NG web UI relies on flask-table, which is outdated and limits improvements. The lack of visualization tools makes it difficult to interpret network data effectively. Additionally, there is currently no system in place to store historical bandwidth and location-related data in the database. As a result, generating historical bandwidth charts and device movement visualizations for long-term analysis is not possible.

This project focuses on modernizing the SwitchMap-NG web UI/UX to improve usability and expand adoption by the wider community. Key improvements include

1. Integrating a React-based frontend with the existing Flask backend to modernize the UI.
2. Replacing deprecated packages with a modern alternative, such as React Table.
3. Implementing network topology charts using CDP/LLDP data with react-graph-vis.
4. Adding historical device movement visualization.
5. Introducing bandwidth charting for better insights using tools like Recharts.
6. Containerizing the new UI for seamless deployment.
7. Automating documentation generation and ensuring 100% test coverage.

Deliverables:

1. Modern React-Based UI replacing legacy table views
2. Interactive Network Topology Visualization using CDP/LLDP data
3. Historical Bandwidth and Movement Charts with time-based insights
4. Containerized UI with install/config scripts for easy deployment
5. Autogenerated Documentation and GitHub Actions integration
6. 100% Test Coverage and fully enforced CI/CD pipelines

[Abhi-MS]

GSoC Project Week 1 Update

• Researched network tools (Cacti, LibreNMS) to define key UI/UX elements.
• Refined Figma designs: dashboard, device & port pages with navigation and hover effects.
• Handled tricky UI challenges (hover/click conflicts, scroll behaviors, tab navigation).
• Learned useful Figma workflows (Google Sheets plugin, color inversion, bulk edits).
• Next: Finalize Figma design as per feedback; begin React frontend with Next.js, set up a UI skeleton with styled pages & placeholders.

Figma design video

[Abhi-MS]

GSoC Project – Week 2 Update

UI Redesign & Usability Enhancements

This week focused on redesigning the user interface based on mentor feedback and multiple iterations. The goal was to improve the design for better usability, streamline navigation, and optimize performance by reducing unnecessary load times.

Challenges Encountered

• The initial chart selection interface was unintuitive and performance-heavy, as charts would be rendered upon selection. This would make caching difficult and hinder the user experience. It was later redesigned into a collapsible list format with time range selection for better usability and performance.

• Hover interactions in Figma conflicted with click-based navigation, especially for pop-ups. A workaround using mouse enter and delay was applied, though it remains an imperfect solution.

• Tabbed navigation was difficult to implement due to Figma’s limitations with nested components. As a workaround, page duplication with navigation links was used to simulate tab behavior.

UI Improvements

Dashboard:

• Device list is now categorized into Switchmap-monitored and non-monitored sections for clearer organization.

Device Details Page:

• Structured into three tabs, accessed via a collapsible sidebar:

  • Device Overview – Displays a mini topology graph, metadata, and key device-level charts (CPU, memory, uptime).
  • Connection Details – Includes the full connection table from the existing Switchmap data.
  • Connection Charts – Uses a collapsible list layout. Users can select a time range and expand individual ports to view related charts (bandwidth, packets, errors, discards), improving performance through chart caching.

Navigation:

• Clicking on a device now routes users to the updated Device Details page with enhanced structure and responsiveness.

Key Learnings

• Resolved sticky scrolling issues by converting rectangles to frames and enabling scroll behaviors.
• Used the Google Sheets Sync plugin to populate tables in Figma. Auto-fill features didn’t work as expected, requiring manual row duplication.
• Discovered multi-select via search to enable batch edits efficiently.
• Applied the Invert Color plugin to support both dark and light mode themes.

Next Steps

• Begin frontend implementation using Next.js, starting with styled skeleton pages and placeholders.

Short Summary
Refined the UI through multiple feedback loops. Redesigned the dashboard and device pages with improved structure and collapsible charts.

Video Prototype

[Abhi-MS]

GSoC Project – Week 3 Update

Goals Achieved

• Created Next.js (TypeScript) app using App Router
• Integrated frontend with Flask backend (CORS enabled)
• Set up routing for / and /device/[id]
• Added global and modular CSS
• Removed default favicon and boilerplate files
• Implemented light/dark theme toggle
• Started integrating device and port tables

Video

Implementation Steps

1. App Setup

npx create-next-app@latest frontend --typescript

App Router: Yes | Tailwind: No | ESLint: Yes | src dir: Yes
Latest update: Switch to Tailwind

2. Cleanup

• Removed default assets (favicon.ico, vercel.svg)
• Updated metadata in layout.tsx

3. Backend Integration
   Enabled CORS in Flask:

from flask_cors import CORS
CORS(API, resources={r"/switchmap/api/graphql": {"origins": "http://localhost:3000"}}, supports_credentials=True)

Sample query for device table:

{
  devices {
    edges {
      node {
        id
        sysName
      }
    }
  }
}

4. Device Type Detection
   Basic OID mapping (Cisco, Juniper):

const mapOidToType = (oid: string | null) => {
  if (!oid) return "-";
  if (oid.startsWith(".1.3.6.1.4.1.9.1.")) return "Cisco";
  if (oid.startsWith(".1.3.6.1.4.1.2636.1.")) return "Juniper";
  return "Unknown";
};

Latest Update: Remove type from devices overview table

5. Styling & Navigation

• Global CSS: src/styles/globals.css
• Page/component styles: CSS Modules
• URL hash scrolling + manual scrollIntoView on load for smoother back navigation

Latest Update: Migrate to Tailwind CSS

• Dark/Light Mode - Configured with next-themes:

<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
  {children}
</ThemeProvider>
Toggle Button using useTheme() with icons

Key Learnings/Challenges

• Learned Next.js App Router and dynamic routing
• Improved UI responsiveness and styling separation (global vs modular)
• Enabled smooth scroll restoration using URL hashes
• Learned API integration patterns and CORS setup with Flask
• Explored early-stage device classification via OID
• Understood pros/cons of using React for frontend and Flask for backend

Architecture Overview

• Frontend: Next.js 15.3.3 + React 19.1.0
• Backend: Flask + GraphQL
• Separation of concerns for performance, flexibility, and maintainability
• Chart-heavy components planned for upcoming visualizations

Next Steps (Week 4–5)

• Finalize device and port table integration
• Improve UI styling and consistency
• Integrate Tailwind CSS
• Ensure responsiveness
• Begin testing
• Start Network Topology visualization component
• Investigate: Compatibility with React 19, Usage of Apollo Client or Redux

[Abhi-MS]

GSoC Project – Week 4 Update

Goals Achieved

• Switched to Tailwind CSS (v4) and restructured the frontend styles.
• Tailwind config now handled via @theme in CSS instead of a separate JS file.

@import "tailwindcss";
@theme {
  --color-bg: var(--bg-color);
  --color-text: var(--text-color);
  --color-link: var(--link-color);
  --color-button-bg: var(--button-bg);
  --color-button-text: var(--button-text);

• Set up next-themes for theme persistence with fallback to system preference.

• Upgraded tables to use @tanstack/react-table. Add sort and search features to the devices overview table.
  

• Updated GraphQL query to fetch devices based on selected zone:

body: JSON.stringify({
            query: `
            query GetZoneDevices($id: ID!) {
              zone(id: $id) {
                devices {
                  edges {
                    node {
                      idxDevice
                      sysObjectid
                      sysUptime
                      sysName
                      hostname
                      l1interfaces {
                        edges {
                          node {
                            ifoperstatus
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          `,
            variables: {
              id: zoneId,
            },
          }),

• Worked on the "Connection Details" page.
• Added multiple GraphQL queries to retrieve MAC/IP mappings and port-level MACs.
• MAC addresses are retrieved using port IDs, and ip addresses are retrieved using MAC IDs.
  const MACPORTS_QUERY = (ids: number[]) =>
  {
  macports(filter: { idxL1interface: { in: [${ids.join(",")}] } }) {
  edges {
  node {
  id
  idxMac
  idxL1interface
  macs {
  mac
  oui {
  organization
  }
  }
  }
  }
  }
  }
  ; const MACIPS_QUERY = (ids: number[]) =>
  {
  macips(filter: { idxMac: { in: [${ids.join(",")}] } }) {
  edges {
  node {
  id
  idxMac
  ips {
  address
  hostname
  }
  macs {
  idxMac
  }
  }
  }
  }
  }
  ;

Key Learnings
-Tailwind v4 introduces CSS-based configuration, reducing boilerplate and simplifying theme management.
-Fine-tuning GraphQL queries is crucial—structure and filters directly impact result accuracy.
-next-themes integration works seamlessly but requires awareness of FOUC (Flash of Unstyled Content).

Challenges

• Backend inconsistencies:
• Some idxMac values returned from ports don't exist in macips, causing data mismatches.
• ipport queries returned empty even when MACs exist.
• The schema needs to expose additional data to enable more efficient queries and improve loading performance.

Next Steps

• Investigate and fix schema mismatches (mac, ipport, idxMac issues).
• Refactor the schema to expose additional details and optimize query performance.
• Begin development of the Topology Graph component.
• Improve loading logic and fallback UI for GraphQL data fetching.
• Improve responsiveness and overall styling

[Abhi-MS]

GSoC Project – Week 5 Update

Goals Achieved

Switchmap.PR.1.1.mp4

Switchmap.PR.1.2.mp4

Switchmap.PR.1.3.mp4

Switchmap.PR.1.4.mp4

Switchmap.PR.1.5mp4.mp4

• UI Cleanup

  • Refactored the codebase for improved maintainability.
  • Organized components, removed unused logic, and simplified overall structure.

• Dashboard & Device Navigation Fixes

  • Implemented scroll restoration using #devices-overview in the URL when navigating back from the Device Details page.
  • Persisted selected zone across reloads using localStorage to avoid fallback to default zone.

• Responsive Improvements
  Sidebar:

  • Fixed spacing and alignment issues.
  • Made collapsible on smaller screens.

  Devices Overview Table:

  • Made horizontally scrollable to better handle overflow on smaller viewports.

• Styling & UX Enhancements

  • Improved fallback UI and loading states for GraphQL data fetching.
  • Enhanced accessibility: added keyboard navigation for tables and ensured the color palette is colorblind-friendly.
  • Refined hover interactions for better visual feedback.

• Table Functionality

  • Added sort and filter functionality to the devices overview table using @tanstack/react-table.
  • Displayed MAC addresses and manufacturer details in the connection details table.
  • IP address fetching pending schema update.

• Dashboard Improvements

  • Device Details page now updates dynamically based on the selected zone.
  • Started development of the Topology Graph component.

Topology change according to zone

Searched device is zoomed in and highlighted

Key Learnings

• Effective state and URL management improves user experience across navigations.
• Small UI enhancements (scroll, feedback, accessibility) significantly improve usability.
• Component-level organization speeds up future development and debugging.

Challenges

• IP address data missing due to incomplete backend schema — impacts connection details.

Next Steps

• Collaborate on fixing IP address schema.
• Continue building the Topology Graph component.
• Enhance test coverage and validation around device-level data rendering.

[Abhi-MS]

GSoC Project – Week 6, 7 Update

Goals Achieved

Improved Type Safety & Code Clarity:

• Replaced all remaining any types with explicit TypeScript interfaces.
• Defined clear types for API responses and hook states.
• Improved inline comments to explain logic, especially around complex data processing and component props.

This work enhances readability, enables better autocompletion, and prevents runtime type errors, making the codebase easier to maintain and extend.

Documentation Site Enhancements:

• Migrated styles and layout to match the modern frontend aesthetic.

• Made the Docusaurus site fully responsive for mobile and tablet views.

Screen.Recording.2025-07-20.121202.mp4

• Added support for frontend auto-generation of docs using typedoc with typedoc-plugin-markdown, ensuring that code comments in the frontend are reflected in the docs automatically.

Network Topology Visualization Enhancements:

• Hover to reveal metadata: Nodes now show system name, host name, description, and uptime on hover.

• Included LLDP links alongside CDP to visualize all possible connections. If a link appears twice (via CDP and LLDP), it’s still shown with protocol-specific labeling.

• Color-coded edges: Different colors indicate whether a connection was discovered via CDP or LLDP.
• Directional arrows: Hovering on edges now displays an arrow to indicate which device the port belongs to.
• Support for out-of-zone neighbors: Neighboring devices not defined in the current zone are displayed in grey for easy distinction.

• Selective visibility: Node selection highlights the node and its edges.

• Interactive graph behavior: Click-to-focus interaction improves scrollability and UX, especially in large topologies.

• Reset button: Clears all graph interactions (search, zoom, selection, pan) in one click.

• Export feature: Allows exporting the current graph view as a PNG image.
  Example exported PNG image:
  <img width="400"" alt="topology (5)" src="https://github.com/user-attachments/assets/253b7d42-0b52-471f-bed3-3b21555d824c" />

• Dark mode styling: Manually applied theme-aware styles (using isDark) to support dark/light modes, since vis-network does not update automatically.

• Enhanced theming: Improved colors for nodes and edges across themes, including hover, search highlights, and selection states.

• Optimized data fetching: Moved API call to parent component to avoid redundant fetches and improve performance.

Connection Details Table Update:

• Updated the connection details table to show CDP/LLDP data in the format device name + connection name for clearer context.

Utility Refactor:

• Moved the uptime conversion logic into a utility function, improving code reuse and reducing duplication across components.
• Also moved the logic for trimming system descriptions into a separate utility function for better maintainability and consistency across the UI.

Key Learnings

• CDP and LLDP often report the same physical connection separately, so deduplication is critical for accurate UI.
• One port = one link, even if it shows up in both protocols.

Screen.Recording.2025-07-20.122759.mp4

• The remote port information is reported by both protocols and should be interpreted carefully when drawing connections.
• CDP is usually the default on Cisco; LLDP is broader but may be disabled unless explicitly enabled.
• vis-network does not dynamically respond to theme changes, since it renders the graph as a static JavaScript canvas. Theme changes (like dark/light mode) must be manually handled using a flag (e.g., isDark) to update styling before rendering the graph.

Challenges

• The reset functionality for the topology chart is non-trivial; vis-network doesn’t provide a single built-in reset method, so all interactions like zoom, pan, selection, and search have to be manually reset via multiple method calls.

Next Steps

• Finish development of the network topology visualization, including final refinements and integration.
• Start implementing CPU, memory usage, and uptime graphs for devices.
• Begin writing and expanding tests for new components and utilities.

[Abhi-MS]

GSoC Project – Week 8, 9 Update

Goals Achieved

Network Topology Visualization Improvements

• Form-based Device Search
  Replaced instant onChange-based device search with a structured form submission approach for better control and UX.

<form
            className="flex items-center gap-4 topology-search-form"
            onSubmit={(e) => {
              e.preventDefault();
              setSearchTerm(inputTerm);
              setInputTerm("");
            }}
          >
            <input
              className="border p-2 rounded w-full topology-search-input"
              type="text"
              placeholder="Search device..."
              value={inputTerm}
              onChange={(e) => {
                const value = e.target.value;
                setInputTerm(value);
                if (value.trim() === "") {
                  setSuggestions([]);
                  return;
                }
                const filtered = allNodeLabels
                  .filter((label) =>
                    label.toLowerCase().includes(value.toLowerCase())
                  )
                  .slice(0, 5);
                setSuggestions(filtered);
              }}
            />
            <button className="border-2 text-button rounded px-4 py-2 cursor-pointer transition-colors duration-300 align-middle h-fit topology-search-btn">
              Search
            </button>
          </form>

• Search Suggestions
  Implemented autocomplete suggestions for devices in the current zone as well as discovered devices.

• Click Interactions

  • Single-click to select a node.
  • Double-click navigates to the device details page.

switchmap.pr.3.2.mp4

• Reset Behavior Refactor

  • Updated reset logic to restore initial state instead of using hardcoded values.
  • Reset also clears zoom, selected edges, and nodes.

switchmap.pr.3.1.mp4

• Custom Tooltip Styling

Added new styles to make tooltips consistent across light/dark modes.

• Removed Duplicate Link Logic
  Deduplication logic was revised—duplicate CDP and LLDP edges are now filtered more effectively.

• Tooltip DOM Cleanup

Memory Leak Fix: When rebuilding the vis-network graph (e.g., zone change), HTML elements in tooltips were not being cleaned up, leading to memory bloat. Before rendering the new graph, DOM elements in node.title and edge.title are now properly removed:

 initialGraph.current?.nodes?.forEach((node) => {
    if (
      node.title instanceof HTMLElement &&
      typeof node.title.remove === "function"
    ) {
      node.title.remove();
    }
  });

• Improved Device Status Logic

Replaced the basic uptime check with a stricter condition to ensure accurate online/offline status. Now, a device is marked as "🟢" (up) only if sysUptime is a valid number and greater than zero:

<div style="font-size: 2em;">
        ${
          typeof device.sysUptime === "number" && device.sysUptime > 0
            ? "🟢"
            : "🔴"
        }
      </div>

Code Migration & Structure Finalization

• Feature Migration: Merged isolated feature work from a temporary repo (used during WSL compatibility issues) back into the main repo.

• Preserved Context: Manually compared files with switchmap/frontend, retaining useful inline comments and minor logic differences.

• Refactored Directory Structure:

  • components/ → src/app/components/
  • utils/ → src/app/utils/
  • types/ → src/app/types/

Device Details Chart Component

• Device Overview Tab

  • Embedded the existing Topology component, scoped to the selected device, to show nearby connections.

  • Displayed a device metadata table with key fields (e.g., hostname, description, etc.).

  • Added three device-level charts using the reusable component:

    • Uptime
    • CPU Usage
    • Memory Usage

  • All charts currently use mock data to enable UI development and layout refinement. Historical metrics are not yet collected or stored in the backend. This setup allows frontend progress to continue while backend infrastructure is being planned.

  • Future-Proofing: The same component can render CPU and memory metrics by changing props (title, unit, data).

Next Steps

• Update the poller to capture device-level time-series metrics.
• Modify the schema to store historical data in a new table.
• Expose new API endpoints to retrieve and serve chart data dynamically.
• Plan on how to visualize device movement in the network over time.

[Abhi-MS]

GSoC Project – Week 10, 11 Update

Goals Achieved

1. Device Details Page – Backend & Frontend Integration

Backend Metrics Integration (Cisco Devices)

• Added Cisco-specific OIDs for CPU and memory utilization.

  • CPU (CISCO-PROCESS-MIB): .1.3.6.1.4.1.9.9.109.1.1.1.1.10

  • Memory (CISCO-MEMORY-POOL-MIB):

    • Used: .1.3.6.1.4.1.9.9.48.1.1.1.5
    • Free: .1.3.6.1.4.1.9.9.48.1.1.1.6

• Added a new system() method in mib_ciscoc2900.py to fetch and return these values.

Data Flow: Device → Poller → YAML → DB

• Poller collects metrics via SNMP → produces enriched YAML output.
• YAML processed into DB objects (DeviceMetricsHistory).
• Each poll inserts a new row (no updates, preserving history).

Database & Models

• Added smap_device_metrics_history table to store historical metrics.

  • Columns: hostname, timestamp, uptime, cpu_utilization, memory_utilization.

• Added insert logic in metrics.py to store collected metrics into smap_device_metrics_history.

GraphQL Integration

• Extended schema to expose new metrics (cpuUtilization, memoryUtilization, uptime).
• Queries return historical time-series data.
• Note: hostname filter (allDeviceMetrics(filter: {...})) not working yet — part of next steps.

Frontend Updates

• Replaced mock chart data with live Cisco metrics via GraphQL queries.
• Built charts using LineChartWrapper for consistency (uptime, CPU, memory).
• Verified formatting, responsiveness, and tooltip/Y-axis alignment.

---

2. History Page

History.page.mp4

Data Fetching & Preparation

• Updated GraphQL query to fetch devices nested under zones.
• Flattened zones and devices client-side to associate each device with its zone.
• Added automatic selection of the first device on initial load.
• Updated useEffect to fetch devices and apply time-range filters.
• Conditional fetch for custom date ranges only when both start and end dates are set.
• Flattened zones and devices for chart data preparation.

Charts & LineChartWrapper

• Built reusable LineChartWrapper for all line charts.

  • Supports multiple lines, custom Y-axis (tickFormatter, width), X-axis formatting, title, and height.
  • Added optional tooltipFormatter to match Y-axis labels (e.g., zone names, sysNames).

• Implemented two charts:

  • Device SysName history (step line chart).
  • Device Zone history (step line chart).

• Fixed tooltips to show correct labels using formatter instead of raw values.

• Confirmed Y-axis tickFormatter and tooltip consistency.

• Applied ResponsiveContainer for dynamic width/height.

• Identified potential issue with too many points (squeezed horizontally).

Search & Autocomplete

• Implemented autocomplete for device hostname search.
• Fixed dropdown positioning and width to match the input.
• Ensured suggestions overlay does not disrupt layout on small screens.

Date Range & Filtering

• Added dropdown for quick-select ranges: 1d, 1w, 1m, 6m, custom.
• Inline custom date inputs for clarity.
• Corrected dropdown arrow rotation and positioning.

Responsiveness & Layout

History.page.2.mp4

• Made history page responsive.

• Added left margin to content to avoid overlapping with hamburger menu.

• Chart container scrollable + flex-1 to occupy remaining screen height.

• Sidebar shrinking fixed with flex-shrink-0.

• Tailwind breakpoints: sm → md → lg → xl → 2xl.

• Adjusted layouts:

  • flex-col vs flex-row for different screen sizes.
  • justify-start instead of misused items-start / items-end.
  • xl:justify-between for large screens.

• Fixed alignment issues for suggestions list, search bar, and dropdown elements.

• Applied absolute + z-50 to dropdowns and suggestion lists to prevent layout shifts.

---

4. Topology Chart Bug Fixes

• Updated zone fetching to pull from latest event → dropdown shows proper zone names.

query: `  
               {
      events(last: 1) {
        edges {
          node {
            zones {
              edges {
                node {
                  id
                  idxZone
                  name
                }
              }
            }
          }
        }
      }
    }
            `

---

Next Steps

1. Device Details Page (Backend & Integration)

• Fix GraphQL filter by hostname support.

• Extend OID polling + schema updates for:

  • Generic devices
  • Juniper devices

• Add chart time range filters

• Improve query for optimized performance

---

2. History Page

• Handle large datasets: horizontal scroll, aggregation, or <Brush> zoom.
• Consider wrapping/truncating long Y-axis labels.
• Fix graph display issues on small screens.
• Improve query for optimized performance

---

[Abhi-MS]

GSoC Project – Week 12, 13 Update

Goals Achieved

1. Topology Chart

• Updated double-click handler to navigate only if idxDevice is valid, preventing errors when clicking CDP/LDP neighbor nodes.
• Memoized TopologyChart with useMemo to reduce unnecessary re-renders.

2. Device Details Page

• Added OIDs for generic and Juniper devices (CPU, memory).
• Created JuniperDeviceQuery for device-level metrics.
• Rebased and merged history page + device details into a single branch.
• Updated uptime graph to show device status instead of uptime.
• Preserved the active tab state on page refresh.
• Added time-range filter with restriction on custom range (max 180 days).

• Updated GraphQL schema with a simplified query→ fetches CPU, memory, uptime, lastPolled for a specific device.:

graphql
{
  deviceMetrics(hostname: "162.249.37.219") {
    edges {
      node {
        hostname
        uptime
        cpuUtilization
        memoryUtilization
        lastPolled
      }
    }
  }
}

• Fixed hostname filtering issue (VARBINARY) by encoding to bytes.
• Updated frontend queries & useEffect to fetch metrics only for the selected hostname.
• Made Device Details fully responsive.

switchmap.sept.1.mp4

• Migrated timestamp → lastPolled (BIGINT) in DB and updated backend/frontend accordingly.
• Fixed metadata table to display correctly formatted last polled time.
• Optimized rendering: memoized metadata table and device overview (re-render only on data change).

3. History Page

• Rebased with device details and integrated into same branch.
• Made fully responsive.

switchmap.sept.1-1.mp4

4. GraphQL & Database

• Simplified schema by removing duplicate queries (all_device_metrics, etc.).
• Ensured get_queries(layer) automatically includes Juniper device queries.
• Confirmed aggregator fetches metrics seamlessly for new queries.
  (Testing with Juniper device is pending)

5. Frontend Performance Improvements

• Added dependency arrays for memoized components.
• Verified time range changes now only re-render charts/dropdowns (not topology/metadata).

6. Vitest Setup & Testing

• Installed and configured Vitest with React Testing Library and JSDOM.

• Added vite.config.ts for testing (globals, jsdom, coverage).

• Created vitest.setup.ts for global imports (@testing-library/jest-dom).

• Added scripts in package.json:

  • npm run test → run once
  • npm run test:watch → interactive UI
  • npm run test:coverage → coverage reports

• Wrote first component tests:

  • DeviceDetails.spec.tsx
  • HistoricalChart.spec.tsx
  • LineChartWrapper.spec.tsx
  • ZoneDropdown.spec.tsx

Next Steps

• Extend testing to cover the full frontend.
• Start working on Device Connection Charts page.

[Abhi-MS]

GSoC Project – Week 14 & 15 Update

Goals Achieved

1. Device Details & History

• Made Device Details page fully responsive.
• Migrated timestamp → last_polled (BIGINT) in smap_device_metrics_history.
• Updated backend to store & serve lastPolled instead of timestamp.
• Adjusted GraphQL schema & queries to use lastPolled.
• Updated frontend (DeviceDetails, HistoricalChart) to convert UNIX lastPolled → ISO strings.
• Fixed chart data mapping: converted uptime to numeric, handled empty/NaN values.
• Ensured metadata table shows correctly formatted last polled time.
• Debugged sysUptime issues (undefined values) → confirmed correct data usage.

2. UI & Accessibility Improvements

• Wrapped date inputs in <label> containers for accessibility.

• Placed labels above inputs with proper spacing (mb-1).

• Used flex flex-col lg:flex-row gap-2 items-center →

  • Vertical stacking on small screens.
  • Horizontal alignment on larger screens.
  • Better accessibility + support for getByLabelText testing.

3. PostCSS & Tailwind Setup

• Configured PostCSS + Tailwind with ES modules (postcss.config.mjs).
• Removed manual autoprefixer (handled by Tailwind).
• Documented .mjs vs .cjs usage depending on module type.
• Fixed Tailwind/PostCSS issues during build.

4. Testing Progress

• Added tests for Device Details page and Topology graph.
• Wrote tests for all major components: Sidebar, ZoneDropdown, TopologyChart, DevicesOverview, DeviceDetails, ConnectionDetails, HistoricalChart, LineChartWrapper, and pages.
• Created utility tests: stringUtils.ts, time.ts, timeStamp.ts.
• Confirmed 100% coverage for utils, layout, theme toggle, mocks.
• Added tests for conditional rendering, error states, and edge cases.
• Coverage improved to 84%+ overall, with high-priority components targeted (TopologyChart, DeviceDetails, ZoneDropdown).

5. PR & New Features

• Opened PR for history page and device history charts.
• Addressed PR feedback.
• Built connection chart component
• Enhanced styles + added pagination to connection chart.
• Made connection chart component fully responsive
• Query used:

const QUERY = (hostname: string) => `
{
  devices(hostname: "${hostname}") {
    edges {
      node {
        id
        hostname
        sysName
        lastPolled
        l1interfaces {
          edges {
            node {
              ifname
              ifspeed
            }
          }
        }
      }
    }
  }
}
`;

Connection.Charts.mp4

---

Next Steps

• Extend test coverage as close to 100% as possible with focus on conditional rendering & error states.
• Add more tests for:
  • TopologyChart (dynamic devices, error handling).
  • DeviceDetails (metadata, ports, charts edge cases).
  • DevicesOverview, ZoneDropdown, History/page.tsx.
• Finalize connection chart integration.
• Continue frontend optimization & performance improvements.

[Abhi-MS]

GSoC Project – Week 16 & 17 Update

Goals Achieved :

1. Implemented new configuration page

• Zones Management

  • Add, edit, expand/collapse, and delete zones.
  • Device hostname management within each zone (inline editing + cleanup).

• SNMP Groups Management

  • Add new groups with default settings.
  • Expand/collapse per-group details.
  • Inline editing of fields, including secure handling of password-type values.
  • Delete groups with proper reindexing of state.

• Advanced Section

  • Editable core and server sections using collapsible panels.
  • Secure password editing flow (masked fields + prompt verification).

• General Improvements

  • Loading/saving states with success feedback.
  • Reusable update functions for cleaner state management.
  • API integration with fallback to localhost if env variable is not set.
  • Consistent UI components and transitions for better UX.

Configuration.Page.UI.1.mp4

2. Improved test coverage for frontend: >90%

Next steps:

• Improving the UI and optimize the frontend
• Address small bugs
• Integrating the frontend with the new backend