Skip to content

Commit 59ddaeb

Browse files
Samk1710Samk1710
committed
Add panel specific js renderers
Signed-off-by: Sampurna Pyne <sampurnapyne1710@gmail.com>
1 parent d0aba4a commit 59ddaeb

4 files changed

Lines changed: 371 additions & 0 deletions

File tree

‎insights/static/insights/css/insights.css‎

Lines changed: 301 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,301 @@
1+
/* Palette and CSS variables */
2+
:root {
3+
--insights-palette-0: #3273dc;
4+
--insights-palette-1: #00d1b2;
5+
--insights-palette-2: #ff3860;
6+
--insights-palette-3: #ffdd57;
7+
--insights-palette-4: #48c774;
8+
--insights-palette-5: #8361b1;
9+
--insights-palette-6: #ff6b35;
10+
--insights-palette-7: #209cee;
11+
--insights-palette-8: #e84393;
12+
--insights-palette-9: #d12323bf;
13+
}
14+
15+
/* Dashboard layout */
16+
.insights-layout {
17+
display: flex;
18+
align-items: flex-start;
19+
gap: 1.5rem;
20+
padding: 1.5rem 1rem;
21+
}
22+
23+
.insights-sidenav {
24+
width: 220px;
25+
flex-shrink: 0;
26+
position: sticky;
27+
top: 5rem;
28+
height: calc(100vh - 7rem);
29+
display: flex;
30+
flex-direction: column;
31+
}
32+
33+
.insights-sidenav nav.menu {
34+
flex: 1;
35+
overflow-y: auto;
36+
min-height: 0;
37+
margin-bottom: 1rem;
38+
}
39+
40+
.insights-sidenav .menu-label {
41+
color: #000;
42+
font-weight: 600;
43+
}
44+
45+
.insights-sidenav .menu-list {
46+
list-style: none !important;
47+
padding-left: 0;
48+
margin-left: 0;
49+
}
50+
51+
.insights-sidenav .menu-list li {
52+
margin-bottom: 0.25rem;
53+
}
54+
55+
.insights-sidenav .menu-list a {
56+
color: #000;
57+
padding-left: 1rem;
58+
border-radius: 0 4px 4px 0;
59+
}
60+
61+
.insights-sidenav .menu-list a:hover {
62+
background-color: #f6f8fa;
63+
color: #000;
64+
}
65+
66+
.insights-sidenav .menu-list a.is-active {
67+
background-color: #f0f5fa;
68+
color: var(--insights-palette-0);
69+
font-weight: 600;
70+
border-left: 3px solid var(--insights-palette-0);
71+
padding-left: calc(1rem - 3px);
72+
}
73+
74+
.insights-main {
75+
flex: 1;
76+
min-width: 0;
77+
}
78+
79+
.graph-inner {
80+
max-width: 860px;
81+
margin-left: auto;
82+
margin-right: auto;
83+
}
84+
85+
.graph-row {
86+
margin-bottom: 1.25rem;
87+
padding: 1.25rem 1.5rem;
88+
background: #fff;
89+
}
90+
91+
.graph-row h3 {
92+
margin-bottom: 0.75rem;
93+
font-size: 1rem;
94+
font-weight: 600;
95+
color: #2c3e50;
96+
}
97+
98+
99+
100+
/* Chart containers and loading state */
101+
.bb svg {
102+
width: 100% !important;
103+
}
104+
105+
.chart-container {
106+
width: 100%;
107+
min-height: 320px;
108+
}
109+
110+
.chart-container.is-pie {
111+
min-height: 420px;
112+
}
113+
114+
.chart-loading {
115+
display: flex;
116+
align-items: center;
117+
justify-content: center;
118+
min-height: 200px;
119+
color: #7a7a7a;
120+
font-size: 0.9rem;
121+
}
122+
123+
124+
125+
/* Billboard.js tooltip overrides */
126+
.bb-tooltip-container table.bb-tooltip {
127+
min-width: 260px;
128+
white-space: nowrap;
129+
}
130+
131+
.bb-tooltip-container table.bb-tooltip th {
132+
padding: 0.4rem 0.8rem !important;
133+
}
134+
135+
.bb-tooltip-container table.bb-tooltip td {
136+
padding: 0.3rem 0.8rem !important;
137+
}
138+
139+
.bb-tooltip-container table.bb-tooltip td.value,
140+
.bb-tooltip-container table.bb-tooltip td:last-child {
141+
text-align: right;
142+
font-variant-numeric: tabular-nums;
143+
font-weight: 600;
144+
padding-right: 1.2rem !important;
145+
}
146+
147+
.sidenav-footer {
148+
margin-top: auto;
149+
padding: 1rem 0;
150+
border-top: 1px solid #e8e8e8;
151+
}
152+
153+
.snapshot-text {
154+
font-size: 0.75rem;
155+
color: #000;
156+
line-height: 1.4;
157+
}
158+
159+
.snapshot-text strong {
160+
color: #000;
161+
}
162+
163+
/* Classes replacing inline styles */
164+
.panel-section {
165+
background-color: #fff;
166+
overflow: hidden;
167+
}
168+
169+
.flat-panel {
170+
margin-bottom: 0;
171+
box-shadow: none;
172+
}
173+
174+
.flat-panel-heading {
175+
border-radius: 0;
176+
display: flex;
177+
justify-content: space-between;
178+
align-items: center;
179+
}
180+
181+
.w-full {
182+
max-width: 100%;
183+
}
184+
185+
.card-graph-row {
186+
border: 1px solid #e8e8e8;
187+
border-radius: 6px;
188+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
189+
}
190+
191+
.card-graph-title {
192+
border-bottom: 1px solid #e8e8e8;
193+
padding-bottom: 0.75rem;
194+
margin-bottom: 1.25rem;
195+
}
196+
197+
/* Package Panel Specific Styles */
198+
.chart-dropdown-wrapper {
199+
display: flex;
200+
justify-content: flex-end;
201+
margin-bottom: 8px;
202+
}
203+
204+
.severity-chart-layout {
205+
display: flex;
206+
align-items: flex-start;
207+
gap: 0;
208+
width: 100%;
209+
font-family: inherit;
210+
}
211+
212+
.severity-table-wrapper {
213+
flex: 0 0 380px;
214+
min-width: 260px;
215+
}
216+
217+
.severity-table {
218+
width: 100%;
219+
border-collapse: collapse;
220+
font-size: 13px;
221+
}
222+
223+
.sev-th-left {
224+
text-align: left;
225+
padding: 4px 8px;
226+
color: #555;
227+
font-weight: 600;
228+
border-bottom: 1px solid #ddd;
229+
}
230+
231+
.sev-th-right {
232+
text-align: right;
233+
padding: 4px 8px;
234+
color: #555;
235+
font-weight: 600;
236+
border-bottom: 1px solid #ddd;
237+
}
238+
239+
.sev-tfoot-tr {
240+
border-top: 1px solid #ddd;
241+
}
242+
243+
.sev-td-total-label {
244+
padding: 5px 8px;
245+
font-weight: 600;
246+
color: #333;
247+
}
248+
249+
.sev-td-total-value {
250+
padding: 5px 8px;
251+
text-align: right;
252+
font-weight: 600;
253+
color: #2563eb;
254+
}
255+
256+
.severity-bb-container {
257+
flex: 1;
258+
min-height: 280px;
259+
margin-top: 52px;
260+
}
261+
262+
.sev-td-bucket {
263+
padding: 4px 8px;
264+
vertical-align: middle;
265+
}
266+
267+
.sev-bucket-label {
268+
display: inline-block;
269+
width: 2.5em;
270+
color: #444;
271+
}
272+
273+
.sev-bucket-bar {
274+
display: inline-block;
275+
height: 7px;
276+
border-radius: 2px;
277+
vertical-align: middle;
278+
margin-left: 4px;
279+
}
280+
281+
.sev-td-count {
282+
padding: 4px 8px;
283+
text-align: right;
284+
color: #2563eb;
285+
}
286+
287+
.sev-empty {
288+
color: #aaa;
289+
}
290+
291+
.card-graph-title-with-search {
292+
display: flex;
293+
justify-content: space-between;
294+
align-items: center;
295+
}
296+
297+
.severity-search-wrapper {
298+
display: flex;
299+
align-items: center;
300+
margin-left: auto;
301+
}

‎insights/static/insights/js/importer_panel.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
//
2+
// Copyright (c) nexB Inc. and others. All rights reserved.
3+
// VulnerableCode is a trademark of nexB Inc.
4+
// SPDX-License-Identifier: Apache-2.0
5+
// See http://www.apache.org/licenses/LICENSE-2.0 for the license text.
6+
// See https://github.com/aboutcode-org/vulnerablecode for support or download.
7+
// See https://aboutcode.org for more information about nexB OSS projects.
8+
//
9+
10+
import { initDropdownChart } from './core.js';
11+
12+
document.addEventListener('insightsDataLoaded', (e) => {
13+
if (e.detail.panelId !== "importer_panel") return;
14+
const { snapshotData } = e.detail;
15+
16+
["importer-empty-pkg-bar", "importer-exploit-bar"].forEach(id => {
17+
initDropdownChart(id, snapshotData[id], "Top 5 Importers");
18+
});
19+
});

‎insights/static/insights/js/package_panel.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
//
2+
// Copyright (c) nexB Inc. and others. All rights reserved.
3+
// VulnerableCode is a trademark of nexB Inc.
4+
// SPDX-License-Identifier: Apache-2.0
5+
// See http://www.apache.org/licenses/LICENSE-2.0 for the license text.
6+
// See https://github.com/aboutcode-org/vulnerablecode for support or download.
7+
// See https://aboutcode.org for more information about nexB OSS projects.
8+
//
9+
10+
import { renderChartWithData, initDropdownChart } from './core.js';
11+
12+
document.addEventListener('insightsDataLoaded', (e) => {
13+
if (e.detail.panelId !== "package_panel") return;
14+
15+
const { snapshotData } = e.detail;
16+
const searchData = document.getElementById("graph-search-data")?.textContent;
17+
const parsedSearch = searchData ? JSON.parse(searchData) : null;
18+
19+
initDropdownChart("pkg-name-donut", snapshotData["pkg-name-donut"], "All Packages");
20+
21+
renderChartWithData(
22+
"pkg-cwe-bar",
23+
parsedSearch ? null : "global",
24+
parsedSearch?.["pkg-cwe-bar"] || snapshotData["pkg-cwe-bar"]
25+
);
26+
27+
renderChartWithData("pkg-dist-donut", "global", snapshotData["pkg-dist-donut"]);
28+
});

‎insights/static/insights/js/severity_panel.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
//
2+
// Copyright (c) nexB Inc. and others. All rights reserved.
3+
// VulnerableCode is a trademark of nexB Inc.
4+
// SPDX-License-Identifier: Apache-2.0
5+
// See http://www.apache.org/licenses/LICENSE-2.0 for the license text.
6+
// See https://github.com/aboutcode-org/vulnerablecode for support or download.
7+
// See https://aboutcode.org for more information about nexB OSS projects.
8+
//
9+
10+
import { renderChartWithData } from './core.js';
11+
12+
document.addEventListener('insightsDataLoaded', (e) => {
13+
if (e.detail.panelId !== "severity_panel") return;
14+
15+
const chartId = "severity-scatter-plot";
16+
const searchData = document.getElementById("graph-search-data")?.textContent;
17+
18+
if (searchData) {
19+
renderChartWithData(chartId, null, JSON.parse(searchData));
20+
} else {
21+
renderChartWithData(chartId, "global", e.detail.snapshotData[chartId]);
22+
}
23+
});

0 commit comments

Comments
 (0)