From e84dead6305d183784d871133faa33a30084422c Mon Sep 17 00:00:00 2001 From: Martin Wittlinger Date: Sun, 7 Jan 2024 18:12:32 +0100 Subject: [PATCH] feat: Replace LiveViewPage with LiveFeedPage and update dependencies (#1427) --- frontend/package-lock.json | 194 +++++++++++++++++++- frontend/src/ProjectData.tsx | 1 - frontend/src/component/StyledBreadCrumb.tsx | 32 ++++ frontend/src/index.tsx | 4 +- frontend/src/pages/DashBoard.tsx | 3 +- frontend/src/pages/LiveFeedPage.tsx | 112 +++++++++++ frontend/src/pages/LiveViewPage.tsx | 78 -------- 7 files changed, 340 insertions(+), 84 deletions(-) create mode 100644 frontend/src/component/StyledBreadCrumb.tsx create mode 100644 frontend/src/pages/LiveFeedPage.tsx delete mode 100644 frontend/src/pages/LiveViewPage.tsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 44e9aa8a2..249546824 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -4266,6 +4266,35 @@ "resolved": "https://registry.npmjs.org/@js-joda/core/-/core-5.6.1.tgz", "integrity": "sha512-Xla/d7ZMMR6+zRd6lTio0wRZECfcfFJP7GGe9A9L4tDOlD5CX4YcZ4YZle9w58bBYzssojVapI84RraKWDQZRg==" }, + "node_modules/@js-joda/locale": { + "version": "4.8.12", + "resolved": "https://registry.npmjs.org/@js-joda/locale/-/locale-4.8.12.tgz", + "integrity": "sha512-AhWhQ1Wly6wkFmLY9XzhTujsEoTpWNyF4cIcYZLNbg470p9B8sQxlPJcppcYjJ53+lW14CQ3sLea5Fz5azIqxQ==", + "peerDependencies": { + "@js-joda/core": ">=3.2.0", + "@js-joda/timezone": "^2.3.0", + "cldr-data": "*", + "cldrjs": "^0.5.4" + } + }, + "node_modules/@js-joda/locale_en": { + "version": "4.8.11", + "resolved": "https://registry.npmjs.org/@js-joda/locale_en/-/locale_en-4.8.11.tgz", + "integrity": "sha512-2Swd1E/BTeIMQeTHdL27lhLYynB5r0xUTQFs/kAntO5FY0PgMyGAlDIffpG8jHzx4H0BOanICrdYCjZ5XbYDDw==", + "peerDependencies": { + "@js-joda/core": ">=3.2.0", + "@js-joda/timezone": "^2.3.0" + } + }, + "node_modules/@js-joda/timezone": { + "version": "2.18.2", + "resolved": "https://registry.npmjs.org/@js-joda/timezone/-/timezone-2.18.2.tgz", + "integrity": "sha512-4binOw4XBO4H6nbw0tPg1IOIrf3MF7gPeXkNiPuK1QAHPaBC0YsvtRt8BiJTqhEaBqh/Kbqp6MChlnbJ8dxQ5Q==", + "peer": true, + "peerDependencies": { + "@js-joda/core": ">=1.11.0" + } + }, "node_modules/@kamilkisiela/fast-url-parser": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/@kamilkisiela/fast-url-parser/-/fast-url-parser-1.1.4.tgz", @@ -5724,6 +5753,12 @@ "node": ">=8" } }, + "node_modules/abbrev": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", + "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", + "peer": true + }, "node_modules/acorn": { "version": "8.11.2", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz", @@ -6040,6 +6075,15 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "0.26.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz", + "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==", + "peer": true, + "dependencies": { + "follow-redirects": "^1.14.8" + } + }, "node_modules/axobject-query": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", @@ -6301,6 +6345,15 @@ "ieee754": "^1.1.13" } }, + "node_modules/buffer-crc32": { + "version": "0.2.13", + "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz", + "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==", + "peer": true, + "engines": { + "node": "*" + } + }, "node_modules/busboy": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz", @@ -6494,6 +6547,67 @@ "node": ">=8" } }, + "node_modules/cldr-data": { + "version": "36.0.1", + "resolved": "https://registry.npmjs.org/cldr-data/-/cldr-data-36.0.1.tgz", + "integrity": "sha512-74leCbj4QIBno+a8MVwO4Kiqv4J1PXDcFhlgOhh86rnLljppLxxi8odVeMjqFsnEG2xxCu98P4iO9mkNXn5v9Q==", + "hasInstallScript": true, + "peer": true, + "dependencies": { + "cldr-data-downloader": "1.0.0-1", + "glob": "5.x.x" + } + }, + "node_modules/cldr-data-downloader": { + "version": "1.0.0-1", + "resolved": "https://registry.npmjs.org/cldr-data-downloader/-/cldr-data-downloader-1.0.0-1.tgz", + "integrity": "sha512-jskJncLkJlkBCdqdgzLSV9sOOLyEdeVOtwJOwVwRyliVJ+4822KZWvfaD620c9Lk7el3auwFDg92FXYjGA5BhQ==", + "peer": true, + "dependencies": { + "axios": "^0.26.0", + "mkdirp": "0.5.5", + "nopt": "3.0.x", + "q": "1.0.1", + "yauzl": "^2.10.0" + }, + "bin": { + "cldr-data-downloader": "bin/download.sh" + } + }, + "node_modules/cldr-data/node_modules/glob": { + "version": "5.0.15", + "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz", + "integrity": "sha512-c9IPMazfRITpmAAKi22dK1VKxGDX9ehhqfABDriL/lzO92xcUKEJPQHrVA/2YHSNFB4iFlykVmWvwo48nr3OxA==", + "peer": true, + "dependencies": { + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "2 || 3", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + } + }, + "node_modules/cldr-data/node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "peer": true, + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/cldrjs": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/cldrjs/-/cldrjs-0.5.5.tgz", + "integrity": "sha512-KDwzwbmLIPfCgd8JERVDpQKrUUM1U4KpFJJg2IROv89rF172lLufoJnqJ/Wea6fXL5bO6WjuLMzY8V52UWPvkA==", + "peer": true + }, "node_modules/clean-stack": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", @@ -7992,6 +8106,15 @@ "resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz", "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==" }, + "node_modules/fd-slicer": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz", + "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==", + "peer": true, + "dependencies": { + "pend": "~1.2.0" + } + }, "node_modules/figures": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz", @@ -8076,6 +8199,26 @@ "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==", "dev": true }, + "node_modules/follow-redirects": { + "version": "1.15.4", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz", + "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "peer": true, + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -10413,11 +10556,22 @@ "version": "1.2.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==", - "dev": true, "funding": { "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/mkdirp": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", + "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==", + "peer": true, + "dependencies": { + "minimist": "^1.2.5" + }, + "bin": { + "mkdirp": "bin/cmd.js" + } + }, "node_modules/modularscale": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/modularscale/-/modularscale-1.0.2.tgz", @@ -10504,6 +10658,18 @@ "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz", "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==" }, + "node_modules/nopt": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz", + "integrity": "sha512-4GUt3kSEYmk4ITxzB/b9vaIDfUVWN/Ml1Fwl11IlnIG2iaJ9O6WXZ9SrYM9NLI8OCBieN2Y8SWC2oJV0RQ7qYg==", + "peer": true, + "dependencies": { + "abbrev": "1" + }, + "bin": { + "nopt": "bin/nopt.js" + } + }, "node_modules/normalize-path": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz", @@ -10943,6 +11109,12 @@ "node": ">=8" } }, + "node_modules/pend": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz", + "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==", + "peer": true + }, "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -11108,6 +11280,16 @@ "node": ">=6.0.0" } }, + "node_modules/q": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/q/-/q-1.0.1.tgz", + "integrity": "sha512-18MnBaCeBX9sLRUdtxz/6onlb7wLzFxCylklyO8n27y5JxJYaGLPu4ccyc5zih58SpEzY8QmfwaWqguqXU6Y+A==", + "peer": true, + "engines": { + "node": ">=0.6.0", + "teleport": ">=0.2.0" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -13103,6 +13285,16 @@ "node": ">=12" } }, + "node_modules/yauzl": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz", + "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==", + "peer": true, + "dependencies": { + "buffer-crc32": "~0.2.3", + "fd-slicer": "~1.1.0" + } + }, "node_modules/yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", diff --git a/frontend/src/ProjectData.tsx b/frontend/src/ProjectData.tsx index 7836a569d..79771a8c5 100644 --- a/frontend/src/ProjectData.tsx +++ b/frontend/src/ProjectData.tsx @@ -97,4 +97,3 @@ export function filterDuplicateBadSmells(params: BadSmell[]) { ({ snippet }, index) => !ids.includes(snippet, index + 1) ); } - diff --git a/frontend/src/component/StyledBreadCrumb.tsx b/frontend/src/component/StyledBreadCrumb.tsx new file mode 100644 index 000000000..d33ae7a60 --- /dev/null +++ b/frontend/src/component/StyledBreadCrumb.tsx @@ -0,0 +1,32 @@ +import { Breadcrumbs, Link, Typography } from '@mui/material'; +import React from 'react'; + +interface BreadcrumbItem { + text: string; + href?: string; +} + +interface BreadcrumbsProps { + items: BreadcrumbItem[]; +} + +function AppBreadcrumbs(props: BreadcrumbsProps) { + const { items } = props; + return ( + + {items.map((item, index) => + item.href ? ( + + {item.text} + + ) : ( + + {item.text} + + ) + )} + + ); +} + +export default AppBreadcrumbs; diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index ca385b853..f1f45fa66 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -19,7 +19,7 @@ import { RefactorView } from './pages/RefactorView'; import ResultView from './pages/ResultView'; import reportWebVitals from './reportWebVitals'; import { StatisticPage } from './pages/StatisticsPage'; -import { LiveViewPage } from './pages/LiveViewPage'; +import { LiveFeedPage } from './pages/LiveFeedPage'; import AboutPage from './pages/Aboutpage'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement @@ -37,7 +37,7 @@ const router = createBrowserRouter([ }, { path: '/livefeed', - element: , + element: , errorElement: } />, }, { diff --git a/frontend/src/pages/DashBoard.tsx b/frontend/src/pages/DashBoard.tsx index c3c6a0b67..cf94c8c39 100644 --- a/frontend/src/pages/DashBoard.tsx +++ b/frontend/src/pages/DashBoard.tsx @@ -25,8 +25,7 @@ export default function DashBoard() { - - + diff --git a/frontend/src/pages/LiveFeedPage.tsx b/frontend/src/pages/LiveFeedPage.tsx new file mode 100644 index 000000000..c8ab3cab8 --- /dev/null +++ b/frontend/src/pages/LiveFeedPage.tsx @@ -0,0 +1,112 @@ +import PageLayout from './PageLayout'; +import { + Box, + LinearProgress, + Table, + TableBody, + TableCell, + TableHead, + TableRow, + Typography, +} from '@mui/material'; +import { useRecentRunsQuery } from '../gql/graphql-types'; +import { Error } from '@mui/icons-material'; +import React from 'react'; +import AppBreadcrumbs from '../component/StyledBreadCrumb'; +import { DateTimeFormatter, LocalDateTime } from '@js-joda/core'; + +const breadcrumbItems = [{ text: 'Home', href: '/home' }, { text: 'LiveFeed' }]; + +function generateKeys( + projectUrl: string | null | undefined, + timestamp: string | null | undefined, + analyzerName: string | null | undefined +) { + return `${projectUrl ?? ''}_${timestamp ?? ''}_${analyzerName ?? ''}`; +} + +export function LiveFeedPage() { + const { data, loading, error } = useRecentRunsQuery({}); + console.log(error); + if (loading || error) { + return ( + + + + + ); + } + console.log(data); + + if (!data?.recentRuns || data.recentRuns.length === 0) { + return ( + + + + + + No Data found + + + + ); + } + + return ( + + + + + Project Name + Project Url + Commit + Analyzer + Number of Issues + Status + Timestamp + + + {data.recentRuns?.map((run) => { + return ( + + {run?.projectName} + {run?.projectUrl} + {stripCommitHash(run?.commitHash)} + {run?.analyzerName} + {run?.numberOfIssues} + {run?.status} + {formatTimestamp(run?.timestamp!)} + + ); + })} + +
+ + ); +} + +function stripCommitHash(commitHash: string | null | undefined): string { + if (commitHash) { + return commitHash.substring(0, 7); + } + return ''; +} +const formatTimestamp = (timestamp: string): string => { + const dateTime = LocalDateTime.parse(timestamp); + return dateTime.format(DateTimeFormatter.ofPattern(' d/M/yyyy HH:mm')); +}; diff --git a/frontend/src/pages/LiveViewPage.tsx b/frontend/src/pages/LiveViewPage.tsx deleted file mode 100644 index 843d9b504..000000000 --- a/frontend/src/pages/LiveViewPage.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import PageLayout from './PageLayout'; -import { - Box, - Breadcrumbs, - LinearProgress, - Link, - Table, - TableCell, - TableHead, - Typography, -} from '@mui/material'; -import { useRecentRunsQuery } from '../gql/graphql-types'; -import { Error } from '@mui/icons-material'; -import React from 'react'; - -export function LiveViewPage() { - const { data, loading, error } = useRecentRunsQuery({}); - console.log(error); - if (loading || error) { - return ( - - - - Home - - LiveView - - - - ); - } - console.log(data); - if (!data?.recentRuns || data.recentRuns.length === 0) { - return ( - - - - Home - - LiveView - - - - - No Data found - - - - ); - } - return ( - - - - Home - - LiveView - - - - Project - Commit - Analyzer - Number of Issues - Status - Timestamp - -
- - ); -}