Skip to content

Commit c10ce61

Browse files
Samk1710Samk1710
committed
Add Dashboard UI
Signed-off-by: Sampurna Pyne <sampurnapyne1710@gmail.com>
1 parent 59ddaeb commit c10ce61

4 files changed

Lines changed: 161 additions & 0 deletions

File tree

‎insights/templates/insights/components/graph_card.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<div class="graph-row card-graph-row">
2+
<h3 class="card-graph-title {% if graph.has_search %}card-graph-title-with-search{% endif %}">
3+
{{ graph.title }}
4+
{% if graph.has_search %}
5+
<div class="severity-search-wrapper" style="gap: 15px;">
6+
{% if not search_query %}
7+
<span class="tag is-primary is-light is-small">Showing All Packages</span>
8+
{% else %}
9+
<a href="{% url 'insights-panel' current_panel_id %}#chart-{{ graph.id }}" class="button is-small is-light">Show All Packages</a>
10+
{% endif %}
11+
12+
<div style="position: relative;">
13+
<form method="GET" action="{% url 'insights-panel' current_panel_id %}#chart-{{ graph.id }}" class="field has-addons mb-0">
14+
<div class="control">
15+
<input class="input is-small" type="text" name="q" value="{{ search_query|default:'' }}" placeholder="Search package name or purl..." style="width: 250px;">
16+
</div>
17+
<div class="control">
18+
<button type="submit" class="button is-small is-info">
19+
<span>Search</span>
20+
</button>
21+
</div>
22+
</form>
23+
{% if search_error %}
24+
<p class="help is-danger has-text-right mt-1" style="position: absolute; right: 0; width: 100%;">{{ search_error }}</p>
25+
{% endif %}
26+
</div>
27+
</div>
28+
{% endif %}
29+
</h3>
30+
<div class="chart-container
31+
{% if graph.chart_type == 'donut' or graph.chart_type == 'pie' %}is-pie
32+
{% endif %}" id="chart-{{ graph.id }}"
33+
data-chart-type="{{ graph.chart_type }}" aria-label="{{ graph.title }}" role="img">
34+
{% if graph.chart_type == 'scatter' %}
35+
{% include 'insights/components/severity_scatter_chart.html' %}
36+
{% else %}
37+
<div class="chart-loading">Loading…</div>
38+
{% endif %}
39+
</div>
40+
41+
{% if graph.chart_type == 'line' %}
42+
<div class="cwe-legend-bar" id="legend-{{ graph.id }}">
43+
</div>
44+
{% endif %}
45+
</div>

‎insights/templates/insights/components/package_panel_donuts.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div class="graph-row card-graph-row">
2+
<div class="columns is-desktop mb-0" style="margin: -0.75rem;">
3+
<div class="column is-half" style="border-right: 1px solid #e8e8e8; padding: 1rem;">
4+
<h3 class="card-graph-title has-text-centered mb-4">{{ panel.graphs.0.title }}</h3>
5+
<div class="chart-container is-pie" id="chart-{{ panel.graphs.0.id }}" data-chart-type="donut"></div>
6+
</div>
7+
<div class="column is-half" style="padding: 1rem;">
8+
<h3 class="card-graph-title has-text-centered mb-4">{{ panel.graphs.1.title }}</h3>
9+
<div class="chart-container is-pie" id="chart-{{ panel.graphs.1.id }}" data-chart-type="donut"></div>
10+
</div>
11+
</div>
12+
</div>

‎insights/templates/insights/components/severity_scatter_chart.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<div class="severity-chart-layout">
2+
<div class="severity-table-wrapper">
3+
<table class="severity-table">
4+
<thead>
5+
<tr>
6+
<th class="sev-th-left">CVSS Score Range</th>
7+
<th class="sev-th-right">Vulnerabilities</th>
8+
</tr>
9+
</thead>
10+
<tbody id="chart-{{ graph.id }}-rows">
11+
</tbody>
12+
<tfoot>
13+
<tr class="sev-tfoot-tr">
14+
<td class="sev-td-total-label">Total</td>
15+
<td class="sev-td-total-value" id="chart-{{ graph.id }}-total"></td>
16+
</tr>
17+
</tfoot>
18+
</table>
19+
<template id="chart-{{ graph.id }}-row-template">
20+
<tr>
21+
<td class="sev-td-bucket">
22+
<span class="sev-bucket-label"></span>
23+
<span class="sev-bucket-bar"></span>
24+
</td>
25+
<td class="sev-td-count"></td>
26+
</tr>
27+
</template>
28+
</div>
29+
<div id="chart-{{ graph.id }}-bb" class="severity-bb-container"></div>
30+
</div>

‎insights/templates/insights/dashboard.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
{% extends "base.html" %}
2+
{% load static %}
3+
4+
{% block title %}Insights{% endblock %}
5+
6+
{% block extrahead %}
7+
<link rel="stylesheet" href="{% static 'css/billboard.css' %}">
8+
<link rel="stylesheet" href="{% static 'insights/css/insights.css' %}">
9+
{% endblock %}
10+
11+
{% block content %}
12+
<div class="insights-layout" data-panel="{{ current_panel_id }}">
13+
14+
<aside class="insights-sidenav" id="insights-sidenav" aria-label="Dashboard navigation">
15+
<nav class="menu">
16+
<p class="menu-label">Insights Dashboard</p>
17+
<ul class="menu-list" id="sidenav-list">
18+
{% for panel in panels %}
19+
<li>
20+
<a href="{% url 'insights-panel' panel.id %}" id="sidenav-{{ panel.id }}"
21+
data-panel="{{ panel.id }}" class="{% if current_panel_id == panel.id %}is-active{% endif %}">
22+
{{ panel.label }}
23+
</a>
24+
</li>
25+
{% endfor %}
26+
</ul>
27+
</nav>
28+
<div class="sidenav-footer">
29+
<p class="snapshot-text-medium">Last Snapshot At:<br><strong>{{ last_snapshot_time|date:"Y-m-d H:i" }} UTC</strong>
30+
</p>
31+
</div>
32+
</aside>
33+
34+
<main class="insights-main">
35+
{% for panel in panels %}
36+
{% if panel.id == current_panel_id %}
37+
<section id="panel-{{ panel.id }}" class="mb-6 details-container panel-section">
38+
<article class="panel is-info panel-header-only flat-panel">
39+
<div class="panel-heading py-3 is-size-5 flat-panel-heading">
40+
<span>{{ panel.label }}</span>
41+
</div>
42+
</article>
43+
44+
<div class="graph-inner p-5 w-full">
45+
{% if panel.layout == 'split_top' %}
46+
{% include 'insights/components/package_panel_donuts.html' with panel=panel %}
47+
{% for graph in panel.graphs|slice:"2:" %}
48+
{% include 'insights/components/graph_card.html' with graph=graph current_panel_id=current_panel_id search_query=search_query search_error=search_error %}
49+
{% endfor %}
50+
{% else %}
51+
{% for graph in panel.graphs %}
52+
{% include 'insights/components/graph_card.html' with graph=graph current_panel_id=current_panel_id search_query=search_query search_error=search_error %}
53+
{% endfor %}
54+
{% endif %}
55+
</div>
56+
</section>
57+
{% endif %}
58+
{% endfor %}
59+
</main>
60+
</div>
61+
{% endblock %}
62+
63+
{% block scripts %}
64+
<script src="{% static 'js/d3.js' %}"></script>
65+
<script src="{% static 'js/billboard.js' %}"></script>
66+
{{ snapshot_dict|json_script:"insights-snapshot-data" }}
67+
{% if search_results_dict %}
68+
{{ search_results_dict|json_script:"graph-search-data" }}
69+
{% endif %}
70+
<script type="module" src="{% static 'insights/js/core.js' %}"></script>
71+
<script type="module" src="{% static 'insights/js/package_panel.js' %}"></script>
72+
<script type="module" src="{% static 'insights/js/severity_panel.js' %}"></script>
73+
<script type="module" src="{% static 'insights/js/importer_panel.js' %}"></script>
74+
{% endblock %}

0 commit comments

Comments
 (0)