Security Scan Panel

On-demand security scan panel for reviewing vulnerabilities and compliance.

Preview · Security Scan Panel

Code

HTML · @primus/ui-core

<div class="card" style="max-width:380px;padding:1.25rem">
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem">
    <h3 style="margin:0;font-size:0.975rem">Security Scan</h3>
    <span class="badge success">Last scan: 2 min ago</span>
  </div>
  <div class="vstack">
    <div class="hstack"><span style="font-size:0.875rem;color:var(--muted-foreground)">Vulnerabilities</span><span class="badge warning" style="margin-inline-start:auto">3 medium</span></div>
    <div class="hstack"><span style="font-size:0.875rem;color:var(--muted-foreground)">Threats blocked</span><span class="badge success" style="margin-inline-start:auto">142 today</span></div>
    <div class="hstack"><span style="font-size:0.875rem;color:var(--muted-foreground)">Compliance</span><span class="badge success" style="margin-inline-start:auto">SOC 2</span></div>
    <button class="outline small">Run scan now</button>
  </div>
</div>

React

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

<PrimusSecurityScanPanel apiUrl="https://api.yourdomain.com"
  onScanComplete={(results) => setScanResults(results)} />

Angular

<primus-security-scan-panel [apiUrl]="'https://api.yourdomain.com'"
  (scanComplete)="onScanComplete($event)">
</primus-security-scan-panel>

Props

Prop	Type	Default	Description
apiUrl	string	—	API URL

Version history

See the Changelog for version history and breaking changes.