@thinkeloquent/sec-dashboard

A comprehensive React security dashboard component for tracking vulnerabilities and GitHub activity with built-in analytics.

Features

• Vulnerability Tracking: Monitor and manage security vulnerabilities
• GitHub Integration: Track commits, pull requests, and code changes
• Analytics Dashboard: Visualize security trends with multiple views
• Data-Driven: Configurable through JSON data sources
• Filtering & Search: Advanced filtering capabilities
• Year-based Filtering: Filter analytics by specific years
• Responsive Design: Mobile-friendly interface

Installation

npm install @thinkeloquent/sec-dashboard

or

yarn add @thinkeloquent/sec-dashboard

Usage

Basic Usage

import VulnerabilityDashboard from '@thinkeloquent/sec-dashboard';

function App() {
  return (
    <div className="App">
      <VulnerabilityDashboard />
    </div>
  );
}

Using Individual Components

import { 
  GithubMetricBar,
  VulnerabilityReportMetricBar,
  UserContributionsView,
  RepositoryTrendsView,
  EnhancedScrollableTimeRange 
} from '@thinkeloquent/sec-dashboard';

// Use components individually
<GithubMetricBar metrics={yourMetrics} />
<UserContributionsView data={yourData} />
<EnhancedScrollableTimeRange />

Data Configuration

The dashboard expects data in specific formats. Place these JSON files in your public directory:

GitHub Data Format (github.json)

{
  "vulnerabilities": [
    {
      "repo": "acme/web-app",
      "type": "commit",
      "year": 2024,
      "title": "Fix SQL injection vulnerability",
      "user": "security-team",
      "filename": "auth/login.js",
      "sha": "a1b2c3d4e5f6",
      "message": "Fix SQL injection vulnerability"
    }
  ]
}

Vulnerability Data Format (vulnerability.json)

{
  "vulnerabilities": [
    {
      "detected": "2023-03-28",
      "status": "Needs Triage",
      "severity": "High",
      "description": "Deserialization of Untrusted Data",
      "identifier": "CVE-2020-8164",
      "tool": "Dependency Scanning GitLab",
      "file": "Gemfile.lock",
      "repo": "acme/web-app"
    }
  ]
}

UI Configuration (ui-config.json)

{
  "tabs": {
    "git": {
      "label": "GitHub",
      "dataSource": "github.json"
    },
    "vulnerabilityReport": {
      "label": "Vulnerability Report",
      "dataSource": "vulnerability.json"
    },
    "analytics": {
      "label": "Analytics"
    }
  }
}

Custom Data Loading

You can also provide your own data loading mechanism:

import VulnerabilityDashboard from '@thinkeloquent/sec-dashboard';

// Custom hook for data loading
const useCustomDataLoader = (url) => {
  // Your custom data loading logic
  return { data, loading, error };
};

// Pass it to the dashboard
<VulnerabilityDashboard dataLoader={useCustomDataLoader} />

Available Props

VulnerabilityDashboard

• dataLoader: Custom data loading hook (optional)
• basePath: Base path for data files (default: /sec-dashboard/)

Individual View Components

All view components accept these props:

• data: Object containing github and vulnerability arrays
• dateView: Date view mode (optional)
• selectedYear: Selected year for filtering (optional)
• selectedMonth: Selected month for filtering (optional)

EnhancedScrollableTimeRange

A standalone timeline component for task completion tracking with scrollable navigation. This component includes:

• Multi-year timeline view with scrollable months
• Team member task visualization with bubble charts
• Interactive tooltips and statistics
• Built-in filtering and export capabilities

Analytics Views

The dashboard includes several analytics views:

1. User Contributions: Visualize contributions by user over time
2. Repository Trends: Track repository activity patterns
3. File Update Trends: Monitor file change frequencies
4. Commit/PR/Merge Trends: Analyze development activity
5. Additional Insights: Get summary statistics and distributions

Styling

The component uses Tailwind CSS classes. Make sure your project includes Tailwind CSS configured properly to style the components.

Development

# Clone the repository
git clone https://github.com/thinkeloquent/sec-dashboard.git

# Install dependencies
npm install

# Run tests
npm test

Publishing

# Update version in package.json
npm version patch/minor/major

# Publish to npm
npm publish --access public

License

MIT © ThinkEloquent