npx create-react-app network-device-manager |
npm install axios d3 |
// src/components/DeviceManager.js |
// src/components/DeviceChart.js |
// src/App.js |
npm start |
pip install streamlit pip install requests pip install Pandas pip install networkx pip install pyvis |
import streamlit as st import requests import pandas as pd import networkx as nx from pyvis.network import Network import streamlit.components.v1 as components
# API URL API_URL = 'http://127.0.0.1:5000'
# Helper function to fetch devices def fetch_devices(): response = requests.get(f'{API_URL}/devices') return response.json()
# Helper function to fetch links def fetch_links(): response = requests.get(f'{API_URL}/links') return response.json()
# Helper function to add a device def add_device(device_type, device_name, device_ip): response = requests.post(f'{API_URL}/devices', json={ 'type': device_type, 'name': device_name, 'ip_address': device_ip }) return response.json()
# Helper function to delete a device def delete_device(device_id): response = requests.delete(f'{API_URL}/devices/{device_id}') return response.json()
# Helper function to add a link def add_link(source_id, target_id): response = requests.post(f'{API_URL}/links', json={ 'source': source_id, 'target': target_id }) return response.json()
# Helper function to delete a link def delete_link(link_id): response = requests.delete(f'{API_URL}/links/{link_id}') return response.json()
# Function to draw the network graph using PyVis def draw_graph(devices, links): G = Network(height='600px', width='100%', notebook=True)
for device in devices: G.add_node(device['id'], label=device['name'], title=device['ip_address'])
for link in links: G.add_edge(link['source'], link['target'])
G.save_graph('network.html') return 'network.html'
# Streamlit UI st.title('Network Device Manager')
# Add Device st.header('Add Device') device_type = st.text_input('Device Type') device_name = st.text_input('Device Name') device_ip = st.text_input('Device IP Address') if st.button('Add Device'): result = add_device(device_type, device_name, device_ip) st.write(result)
# Delete Device st.header('Delete Device') device_id = st.number_input('Device ID', min_value=1, step=1) if st.button('Delete Device'): result = delete_device(device_id) st.write(result)
# Add Link st.header('Add Link') source_id = st.number_input('Source Device ID', min_value=1, step=1, key='source') target_id = st.number_input('Target Device ID', min_value=1, step=1, key='target') if st.button('Add Link'): result = add_link(source_id, target_id) st.write(result)
# Fetch and visualize the network st.header('Network Visualization') if st.button('Refresh Network'): devices = fetch_devices() links = fetch_links() st.write(pd.DataFrame(devices)) st.write(pd.DataFrame(links)) graph_path = draw_graph(devices, links) with open(graph_path, 'r') as f: html_content = f.read() components.html(html_content, height=600) |
streamlit run dashboard.py |