Skip to content

Commit a798b4b

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

4 files changed

Lines changed: 378 additions & 0 deletions

File tree

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

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

‎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("chart-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("chart-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)