Security Dashboard

Security monitoring panel for threat detection, vulnerability scanning, and compliance.

Preview · Security Dashboard

Code

HTML · @primus/ui-core

<div class="vstack" style="max-width:400px;width:100%">
  <div class="hstack" style="flex-wrap:wrap">
    <div class="card stat" style="flex:1;min-width:130px"><span class="card-label">Threats Blocked</span><span class="card-value">142</span><span class="card-delta up">+12 today</span></div>
    <div class="card stat" style="flex:1;min-width:130px"><span class="card-label">Vulnerabilities</span><span class="card-value">3</span><span class="card-delta down">-2 from last scan</span></div>
  </div>
  <div role="alert" data-variant="warning">2 medium-severity issues require attention.</div>
</div>

React

import { SecurityDashboard } from 'primus-react-ui';

<SecurityDashboard apiUrl="https://api.yourdomain.com" />

Angular

<primus-security-dashboard [apiUrl]="'https://api.yourdomain.com'">
</primus-security-dashboard>

Props

Prop	Type	Default	Description
apiUrl	string	—	API base URL

Version history

See the Changelog for version history and breaking changes.