Skip to content

Commit 1289b14

Browse files
ildyriaildyria
authored
New front-end! (#64)
1 parent e6cf45c commit 1289b14

File tree

127 files changed

+5073
-4647
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

127 files changed

+5073
-4647
lines changed

‎README.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Repository Scanner Frontend (RESC-Frontend)
22
[![Vue.js][vuejs-shield]][vuejs-url]
3-
[![BootstrapVue][bootstrapvue-shield]][bootstrapvue-url]
3+
[![PrimeVue][primevue-shield]][primevuevue-url]
44
[![Chart.js][chartjs-shield]][chartjs-url]
55
[![CI][ci-shield]][ci-url]
66
[![OpenSSF Scorecard][ossf-shield]][ossf-url]
@@ -24,12 +24,12 @@
2424

2525
<!-- ABOUT THE COMPONENT -->
2626
## About the component
27-
Repository Scanner (RESC) Frontend is a fully responsive dashboard application developed using Vue.js 2 and BootstrapVue framework. It includes such screens as Analytics, Repositories, Scan Findings, Rule Analytics, and Rule Pack.
27+
Repository Scanner (RESC) Frontend is a fully responsive dashboard application developed using Vue.js 3 and PrimeVue framework. It includes such screens as Analytics, Repositories, Scan Findings, Rule Analytics, and Rule Pack.
2828

2929
<!-- TECHNOLOGY STACK -->
3030
## Technology stack
31-
- [Vue js 2](https://v2.vuejs.org/)
32-
- [Bootstrap Vue](https://bootstrap-vue.org/)
31+
- [Vue js 3](https://vuejs.org/)
32+
- [PrimeVue Vue](https://primevue.org/)
3333
- [Docker](https://www.docker.com/)
3434

3535
<!-- GETTING STARTED -->
@@ -107,8 +107,8 @@ Compiles and minifies for production: ```npm run build```
107107
<!-- MARKDOWN LINKS & IMAGES -->
108108
[vuejs-shield]: https://img.shields.io/badge/VueJS-%2335495e.svg?style=flat&logo=vuedotjs&logoColor=%234FC08D
109109
[vuejs-url]: https://vuejs.org
110-
[bootstrapvue-shield]: https://img.shields.io/badge/BootstrapVue-%238511FA.svg?style=flat&logo=bootstrap&logoColor=white
111-
[bootstrapvue-url]: https://bootstrap-vue.org
110+
[primevue-shield]: https://img.shields.io/badge/PrimeVue-%25238511FA.svg?style=flat&logo=primevue&logoColor=white
111+
[primevue-url]: https://primevue.org/
112112
[chartjs-shield]: https://img.shields.io/badge/Chart.js-F5788D.svg?style=flat&logo=chart.js&logoColor=white
113113
[chartjs-url]: https://www.chartjs.org
114114
[ci-shield]: https://img.shields.io/github/actions/workflow/status/abnamro/repository-scanner/frontend-ci.yaml?logo=github

‎index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7-
<link rel="icon" href="/favicon.ico">
7+
<link rel="icon" href="/bat.gif">
88
<title>Repository Scanner</title>
99
</head>
1010
<body>
1111
<noscript>
12-
<strong>We're sorry but RESC doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
12+
<strong>We're sorry but RESC doesn't work properly JavaScript enabled. Please enable it to continue.</strong>
1313
</noscript>
1414
<div id="app"></div>
1515
<script type="module" src="/src/main.ts"></script>

‎package.json

+12-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "resc-frontend",
3-
"version": "3.5.4",
3+
"version": "4.0.0",
44
"author": "ABN AMRO Bank",
55
"description": "Repository Scanner Frontend",
66
"license": "MIT",
@@ -32,24 +32,26 @@
3232
"@fortawesome/free-brands-svg-icons": "^6.5",
3333
"@fortawesome/free-solid-svg-icons": "^6.5",
3434
"@fortawesome/vue-fontawesome": "^3.0.5",
35-
"@vuepic/vue-datepicker": "^8.7.0",
35+
"@primevue/themes": "^4.2.5",
3636
"@vueuse/core": "^10.10.0",
37+
"autoprefixer": "^10.4.20",
3738
"axios": "^1.6.2",
3839
"axios-retry": "^4.4.0",
39-
"bootstrap": "^5.3.2",
40-
"bootstrap-vue-next": "^0.20.0",
4140
"chart.js": "^4.4.1",
41+
"flush-promises": "^1.0.2",
4242
"jose": "^5.4.0",
4343
"pinia": "^2.1.7",
4444
"pinia-plugin-persistedstate": "^3.2.0",
45+
"postcss": "^8.5.1",
46+
"primeicons": "^7.0.0",
47+
"primevue": "^4.2.5",
4548
"qs": "^6.10.3",
49+
"tailwindcss-primeui": "^0.4.0",
4650
"vue": "^3.3.9",
4751
"vue-chartjs": "^5.2.0",
48-
"vue-loader": "^17.3.1",
49-
"vue-multiselect": "^3.0.0-beta.3",
52+
"vue-collapsed": "^1.3.4",
5053
"vue-router": "^4.2.5",
51-
"vue-sidebar-menu": "^5.2.12",
52-
"vue3-toastify": "^0.2.2"
54+
"vue-sidebar-menu": "^5.2.12"
5355
},
5456
"devDependencies": {
5557
"@pinia/testing": "^0.1.3",
@@ -66,6 +68,7 @@
6668
"@vue/eslint-config-typescript": "^13.0.0",
6769
"@vue/test-utils": "^2.4.1",
6870
"@vue/tsconfig": "^0.5.1",
71+
"axios-mock-adapter": "^2.1.0",
6972
"eslint": "^8.56.0",
7073
"eslint-plugin-prettier": "^5.1.3",
7174
"eslint-plugin-vue": "^9.17.0",
@@ -77,6 +80,7 @@
7780
"sass": "^1.77.4",
7881
"stylelint": "^16.6.1",
7982
"stylelint-config-standard-scss": "^13.0.0",
83+
"tailwindcss": "^3.4.17",
8084
"typescript": "~5.4.5",
8185
"unplugin-vue-components": "^0.27.0",
8286
"vite": "^5.2.12",

‎public/RESC-sm.png

317 KB
Loading

‎public/RESC.png

1.82 MB
Loading

‎public/bat.gif

18.1 KB
Loading

‎public/index.html

-18
This file was deleted.

‎src/App.vue

+18-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
<template>
2+
<SessionTimeout />
3+
<ErrorView />
4+
<Toast />
25
<SidebarMenu
36
:menu="sidebarNavigationMenu"
47
v-model:collapsed="sidebarCollapsed"
@@ -12,29 +15,39 @@
1215
<div
1316
id="content-wrapper"
1417
:class="{
18+
'overflow-x-hidden': true,
1519
'sidebar-closed': sidebarCollapsed,
1620
'sidebar-opened': !sidebarCollapsed,
1721
}"
1822
>
19-
<div class="container-fluid">
23+
<div class="container-fluid pb-8">
2024
<RouterView />
2125
</div>
2226
</div>
2327
</template>
2428
<script setup lang="ts">
25-
import { computed, ref } from 'vue';
29+
import { computed, onMounted, ref } from 'vue';
2630
import { useRoute, RouterView } from 'vue-router';
2731
import { SidebarMenu } from 'vue-sidebar-menu';
2832
import TopBarMenu from '@/components/Navigation/TopBarMenu.vue';
2933
import { sidebarMenu } from '@/components/Navigation/Navigation';
3034
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css';
3135
import { disableScrollingWithArrowsAndCtrlA, shouldIgnoreKeystroke } from './utils/keybind-utils';
3236
import { onKeyStroke } from '@vueuse/core';
37+
import ErrorView from './views/ErrorView.vue';
38+
import Toast from 'primevue/toast';
39+
import SessionTimeout from './components/Login/SessionTimeout.vue';
40+
import { useDarkMode } from './composables/useDarkmode';
41+
import { useAuthUserStore } from './store';
42+
import { storeToRefs } from 'pinia';
3343
3444
const route = useRoute();
3545
3646
const sidebarNavigationMenu = sidebarMenu;
3747
const sidebarCollapsed = ref(false);
48+
const store = useAuthUserStore();
49+
const { dark } = storeToRefs(store);
50+
const { toggleDarkMode, setDarkMode } = useDarkMode(dark);
3851
3952
function onToggleCollapse(collapsed: boolean) {
4053
sidebarCollapsed.value = collapsed;
@@ -58,5 +71,8 @@ onKeyStroke(
5871
},
5972
);
6073
74+
/* istanbul ignore next @preserve */
75+
onKeyStroke('b', () => !shouldIgnoreKeystroke() && toggleDarkMode(), { eventName: 'keydown' });
6176
disableScrollingWithArrowsAndCtrlA();
77+
onMounted(setDarkMode);
6278
</script>

‎src/components/Charts/MultiLineChartVue.vue

+31-16
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,26 @@
33
ref="multiline"
44
:data="chartData"
55
:styles="styles"
6-
:chartId="chartId"
7-
:cssClasses="cssClasses"
6+
:chartId="props.chartId"
7+
:cssClasses="props.cssClasses"
88
:options="chartOptions"
99
/>
1010
</template>
1111
<script setup lang="ts">
1212
import { ref } from 'vue';
1313
import { Line } from 'vue-chartjs';
14-
import type { DataSetObject } from '../Metrics/types';
14+
import type { DataSetObject } from '@/views/metrics/types';
1515
import type { ChartData, ChartOptions } from 'chart.js';
16+
import { $dt } from '@primevue/themes';
17+
import { useAuthUserStore } from '@/store';
18+
import { storeToRefs } from 'pinia';
19+
20+
function getColor() {
21+
return dark.value ? $dt('gray.50').value : $dt('gray.870').value;
22+
}
23+
24+
const store = useAuthUserStore();
25+
const { dark } = storeToRefs(store);
1626
1727
type Props = {
1828
chartData: { labels: string[]; datasets: DataSetObject[] };
@@ -34,18 +44,23 @@ const props = withDefaults(defineProps<Props>(), {
3444
});
3545
3646
const chartData = ref(props.chartData as ChartData<'line', number[], string>);
37-
38-
const chartOptions: ChartOptions<'line'> = {
47+
const color = getColor();
48+
const chartOptions = ref<ChartOptions<'line'>>({
3949
responsive: true,
40-
// maintainAspectRatio: false, // breaks the graph
41-
};
42-
const chartId = ref(props.chartId);
43-
const cssClasses = ref(props.cssClasses);
44-
const styles =
45-
props.styles === undefined
46-
? ref({
47-
height: props.height + ' px',
48-
width: props.width + ' px',
49-
})
50-
: ref(props.styles);
50+
plugins: {
51+
legend: {
52+
labels: {
53+
color,
54+
},
55+
title: {
56+
color,
57+
},
58+
},
59+
},
60+
scales: {
61+
x: { border: { color: color }, grid: { color: `${color}80` }, ticks: { color: color } },
62+
y: { border: { color: color }, grid: { color: `${color}80` }, ticks: { color: color } },
63+
},
64+
});
65+
const styles = ref(props.styles ?? { height: `${props.height} px`, width: `${props.width} px` });
5166
</script>

‎src/components/Common/CardVue.vue

+31-40
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,40 @@
11
<template>
2-
<div>
3-
<BCard class="card-box">
4-
<template #header>
5-
<div class="d-flex align-items-center justify-content-center fw-bold">
6-
<p class="mb-0 me-2">{{ title }}</p>
7-
<template v-if="titleIconDefinition">
8-
<FontAwesomeIcon
9-
:id="titleIconTooltipId"
10-
class="mb-0 me-2"
11-
:style="titleIconStyle"
12-
:icon="titleIconDefinition"
13-
/>
14-
<BTooltip :target="titleIconTooltipId" placement="right">
15-
{{ titleIconTooltip }}
16-
</BTooltip>
17-
</template>
18-
</div>
2+
<Card
3+
class="rounded overflow-hidden"
4+
:pt:body:class="'p-0 min-w-[200px]'"
5+
:pt:caption:class="'px-4 py-2 bg-teal-450/20'"
6+
:pt:title:class="'flex items-center justify-center'"
7+
:pt:content:class="'px-4 pb-2 flex items-center justify-center font-bold'"
8+
>
9+
<template #title>
10+
<p class="p-0 m-0 font-bold text-sm">{{ title }}</p>
11+
<template v-if="titleIconDefinition">
12+
<FontAwesomeIcon
13+
:id="titleIconTooltipId"
14+
class="ml-2 text-xs"
15+
:style="titleIconStyle"
16+
:icon="titleIconDefinition"
17+
v-tooltip.right="titleIconTooltip"
18+
/>
1919
</template>
20-
21-
<template #default>
22-
<div class="d-flex align-items-center justify-content-center fw-bold">
23-
<h5 class="mb-0 me-2 mt-2 justify-content-center text-center" :style="contentStyle">
24-
{{ formatCardBodyContent }}
25-
</h5>
26-
<FontAwesomeIcon
27-
v-if="contentIconDefinition"
28-
class="mb-0 me-2 mt-2 ml-1"
29-
:style="contentIconStyle"
30-
:icon="contentIconDefinition"
31-
/>
32-
</div>
33-
</template>
34-
</BCard>
35-
</div>
20+
</template>
21+
<template #content>
22+
<span class="text-lg/0" :style="contentStyle">
23+
{{ formatCardBodyContent }}
24+
</span>
25+
<FontAwesomeIcon
26+
v-if="contentIconDefinition"
27+
class="ml-2 text-xl"
28+
:style="contentStyle"
29+
:icon="contentIconDefinition"
30+
/>
31+
</template>
32+
</Card>
3633
</template>
3734
<script setup lang="ts">
3835
import { ref } from 'vue';
3936
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
40-
import { BCard, BTooltip } from 'bootstrap-vue-next';
37+
import Card from 'primevue/card';
4138
4239
export type CardIcon =
4340
| 'info-circle'
@@ -64,15 +61,9 @@ const props = defineProps<Props>();
6461
const title = ref(props.cardTitle);
6562
const titleIconStyle = ref({
6663
color: props.titleIconColor,
67-
fontSize: '12px',
68-
});
69-
const contentIconStyle = ref({
70-
color: props.contentIconColor,
71-
fontSize: '20px',
7264
});
7365
const contentStyle = ref({
7466
color: props.contentIconColor,
75-
fontSize: '17px',
7667
});
7768
7869
const titleIconDefinition = ref(props.titleIcon ? ['fas', props.titleIcon] : null);

‎src/components/Common/FindingStatusBadge.vue

+9-11
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
<template>
2-
<div>
3-
<BBadge v-if="props.status === 'NOT_ANALYZED'" variant="secondary">Not Analyzed</BBadge>
4-
<BBadge v-if="props.status === 'NOT_ACCESSIBLE'" class="badge bg-info">Not Accessible</BBadge>
5-
<BBadge v-if="props.status === 'CLARIFICATION_REQUIRED'" variant="warning"
6-
>Clarification Required</BBadge
7-
>
8-
<BBadge v-if="props.status === 'TRUE_POSITIVE'" variant="danger">True Positive</BBadge>
9-
<BBadge v-if="props.status === 'FALSE_POSITIVE'" variant="success">False Positive</BBadge>
10-
<BBadge v-if="props.status === 'OUTDATED'" variant="dark">Outdated</BBadge>
11-
</div>
2+
<Tag :severity="severity" :value="val" class="text-xs"></Tag>
123
</template>
134
<script setup lang="ts">
5+
import { useStatus } from '@/composables/useStatus';
146
import type { FindingStatus } from '@/services/shema-to-types';
15-
import { BBadge } from 'bootstrap-vue-next';
7+
import Tag from 'primevue/tag';
8+
import { computed } from 'vue';
169
type Props = { status: FindingStatus };
1710
const props = defineProps<Props>();
11+
12+
const { getStatusString, getStatusSeverity } = useStatus();
13+
14+
const severity = computed(() => getStatusSeverity(props.status));
15+
const val = computed(() => getStatusString(props.status));
1816
</script>

0 commit comments

Comments
 (0)