@bhaveshbhardwaj7/adbis-dashboard
v1.0.3
Published
**Adbis Dashboard** acts as the omniscient eye of your security operations center (SOC). It provides a highly responsive UI layer that deeply connects with the `adbis-control-plane` to render live threat metrics, geographic attack origins, and comprehensi
Readme
@bhaveshbhardwaj7/adbis-dashboard 📈🎨
Beautiful, Real-Time Threat Visualization
Adbis Dashboard acts as the omniscient eye of your security operations center (SOC). It provides a highly responsive UI layer that deeply connects with the adbis-control-plane to render live threat metrics, geographic attack origins, and comprehensive security health scores.
🌟 Next-Gen Frontend Features
- 📊 Live Streaming Analytics: Watch threats get detected, categorized, and mitigated in real-time with sub-second latency updates via WebSockets.
- 🎨 Stunning Pre-built Widgets: Drop-in components for pie charts, threat maps, incident logs, and timeline analyses.
- ⚙️ Framework-Agnostic Mounting: Mount the dashboard inside React, Vue, Angular, or Vanilla JS applications effortlessly.
- 🛡️ Active Integrated Response: Features bidirectional communications—click a button in the UI to instantly deploy active mitigation policies to your servers.
📦 Installation
npm install @bhaveshbhardwaj7/adbis-dashboard🚀 Quick Start Guide
The dashboard is designed for seamless embedding.
Standalone Vanilla JS Mounting
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Security SOC</title>
</head>
<body>
<div id="adbis-root" style="height: 100vh; width: 100vw;"></div>
<script type="module">
import { renderDashboard, connectToControlPlane } from '@bhaveshbhardwaj7/adbis-dashboard';
// 1. Establish secure tunnel to Control Plane
connectToControlPlane('wss://api.yourdomain.com/adbis');
// 2. Mount UI
const container = document.getElementById('adbis-root');
renderDashboard(container, {
theme: 'dark-cyber',
layout: 'full-grid',
showMap: true
});
</script>
</body>
</html>React Integration
import React, { useEffect, useRef } from 'react';
import { renderDashboard } from '@bhaveshbhardwaj7/adbis-dashboard';
export const SecurityDashboard = () => {
const rootRef = useRef(null);
useEffect(() => {
if (rootRef.current) {
renderDashboard(rootRef.current, { theme: 'light' });
}
}, []);
return <div ref={rootRef} className="h-screen w-full" />;
};#dashboard #adbis #cybersecurity #analytics #frontend #threatintel #security #monitoring #typescript #javascript #react #famous #ui