feat(react): Change dashboard UI to new table (#876)

.github/workflows/docker-publish.yml

@@ -40,6 +40,10 @@ jobs:
         uses: gradle/gradle-build-action@915a66c096a03101667f9df2e56c9efef558b165 # v2
         with:
           gradle-version: release-candidate
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18.4'
       - uses: actions/setup-java@5ffc13f4174014e2d4d4572b3d74c3fa61aeb2c2 # v3
         with:
           distribution: 'temurin'
@@ -53,7 +57,7 @@ jobs:
           cosign-release: 'v1.13.1'
       # Build Quarkus
       - name: Build
-        run: cd ./github-bot/ && gradle assemble
+        run: cd ./github-bot/ && gradle assemble --stacktrace --info
       # Workaround: https://github.com/docker/build-push-action/issues/461
       - name: Setup Docker buildx
         uses: docker/setup-buildx-action@4c0219f9ac95b02789c1075625400b2acbff50b1

frontend/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

frontend/package.json

@@ -6,6 +6,7 @@
     "@apollo/client": "3.7.17",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
+    "@js-joda/core": "^5.5.3",
     "@mui/icons-material": "5.14.1",
     "@mui/lab": "5.0.0-alpha.137",
     "@mui/material": "5.14.1",
@@ -36,7 +37,8 @@
     "start": "react-scripts --openssl-legacy-provider start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "prettier": "prettier --write \"src/**/*.tsx\""
   },
   "eslintConfig": {
     "extends": [
@@ -57,6 +59,7 @@
     ]
   },
   "devDependencies": {
-    "@types/babel__core": "^7.1.20"
+    "@types/babel__core": "^7.1.20",
+    "prettier": "^3.0.0"
   }
 }

frontend/src/Keycloak.tsx

@@ -1,8 +1,8 @@
-import Keycloak from "keycloak-js";
+import Keycloak from 'keycloak-js';
 const keycloak = new Keycloak({
-  url: "https://auth.keksdose.xyz",
-  realm: "laughing-train",
-  clientId: "laughing-train",
+  url: 'https://auth.keksdose.xyz',
+  realm: 'laughing-train',
+  clientId: 'laughing-train',
 });
 
-export default keycloak;
+export default keycloak;

frontend/src/PrivateRoute.tsx

@@ -1,13 +1,22 @@
-import { Alert, Typography } from "@mui/material";
-import { useKeycloak } from "@react-keycloak/web";
+import { Alert, Typography } from '@mui/material';
+import { useKeycloak } from '@react-keycloak/web';
 
-const PrivateRoute = (child: any ) => {
+const PrivateRoute = (child: any) => {
   const { keycloak } = useKeycloak();
 
   const isLoggedIn = keycloak.authenticated;
-  return isLoggedIn ? child.children : <>
-  <Alert severity="error"> <Typography variant="h4">You are not logged in. Please log in to access this page.</Typography></Alert>
-  </>;
+  return isLoggedIn ? (
+    child.children
+  ) : (
+    <>
+      <Alert severity="error">
+        {' '}
+        <Typography variant="h4">
+          You are not logged in. Please log in to access this page.
+        </Typography>
+      </Alert>
+    </>
+  );
 };
 
-export default PrivateRoute;
+export default PrivateRoute;

frontend/src/ProjectData.tsx

@@ -1,64 +1,70 @@
-import { gql} from '@apollo/client';
+import { gql } from '@apollo/client';
 import { BadSmell } from './data/BadSmell';
 import { Project } from './data/Project';
 
-
-
-
-
 export const fetchProjectQuery = gql`
   query getProjects {
-   getProjects {
-   projectName
-   projectUrl
-   commitHashes
-   }
-}
+    getProjects {
+      projectName
+      projectUrl
+      commitHashes
+      commits {
+        analyzerStatuses {
+          analyzerName
+          commitHash
+          localDateTime
+          numberOfIssues
+          status
+        }
+        commitHash
+      }
+    }
+  }
 `;
 export const fetchAvailableRefactorings = gql`
   query getAvailableRefactorings {
-   availableRefactorings {
-    ruleId {
-      id
+    availableRefactorings {
+      ruleId {
+        id
+      }
     }
-   }
-}
+  }
 `;
 
 export const fetchBadSmellsforHashQuery = gql`
   query getBadSmellsForHash($hash: String) {
-  byCommitHash(commitHash: $hash) {
-    identifier
-    ruleID
-    messageMarkdown
-    snippet
-    filePath
-    position {
-      startLine
+    byCommitHash(commitHash: $hash) {
+      identifier
+      ruleID
+      messageMarkdown
+      snippet
+      filePath
+      position {
+        startLine
+      }
     }
   }
-}
 `;
 
 export const addprojectQuery = gql`
   mutation addProject($projectName: String!, $projectUrl: String!) {
-  addProject(projectName: $projectName, projectUrl: $projectUrl) {
-    projectName
-    projectUrl
+    addProject(projectName: $projectName, projectUrl: $projectUrl) {
+      projectName
+      projectUrl
+    }
   }
-}
 `;
 export const refactorQuery = gql`
   mutation refactor($badSmellIdentifier: [String]) {
-  refactor(badSmellIdentifier: $badSmellIdentifier)
-}
+    refactor(badSmellIdentifier: $badSmellIdentifier)
+  }
 `;
 export const loginQuery = gql`
-  query login($notNeeded : String) {
-  login(notNeeded : $notNeeded)
-}
+  query login($notNeeded: String) {
+    login(notNeeded: $notNeeded)
+  }
 `;
-export function filterDuplicates(params:Project[]) {
+export function filterDuplicates(params: Project[]) {
   return params;
 }
 export function filterDuplicateBadSmells(params: BadSmell[]) {
@@ -68,24 +74,41 @@ export function filterDuplicateBadSmells(params: BadSmell[]) {
   params = params.filter((badSmell) => {
     return badSmell.snippet != null;
   });
-  const ids = params.map(o => o.snippet)
-  const filtered = params.filter(({ snippet }, index) => !ids.includes(snippet, index + 1));
+  const ids = params.map((o) => o.snippet);
+  const filtered = params.filter(
+    ({ snippet }, index) => !ids.includes(snippet, index + 1)
+  );
   return filtered;
 }
 
 export const fetchProjectConfigQuery = gql`
   query getProjectConfig($projectUrl: String!) {
-  getProjectConfig(projectUrl: $projectUrl) {
-    projectUrl
-    sourceFolder 
+    getProjectConfig(projectUrl: $projectUrl) {
+      projectUrl
+      sourceFolder
+    }
   }
-}
 `;
 export const addProjectConfigQuery = gql`
   mutation addProjectConfig($projectConfig: ProjectConfig!) {
-  addProjectConfig(projectConfig: $projectConfig) {
-    projectUrl
-    sourceFolder
+    addProjectConfig(projectConfig: $projectConfig) {
+      projectUrl
+      sourceFolder
+    }
   }
-}
-`;
+`;
+
+export const getGitHubCommitsQuery = gql`
+  query getGitHubCommitsForProject($projectName: String!) {
+    getGitHubCommitsForProject(projectName: $projectName) {
+      analyzerStatuses {
+        analyzerName
+        commitHash
+        localDateTime
+        numberOfIssues
+        status
+      }
+      commitHash
+    }
+  }
+`;

frontend/src/component/AddProjectCard.tsx

@@ -1,16 +1,24 @@
-import { Card, CardMedia, Typography } from "@mui/material";
-import React from "react";
-import { BiPlus } from "react-icons/bi";
-import { useNavigate } from "react-router";
+import { Card, CardMedia, Typography } from '@mui/material';
+import React from 'react';
+import { BiPlus } from 'react-icons/bi';
+import { useNavigate } from 'react-router';
 
 export function AddProjectCard() {
   const navigate = useNavigate();
   return (
-    <Card onClick={() => navigate("/mutation/addproject")} sx={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
+    <Card
+      onClick={() => navigate('/mutation/addproject')}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
       <CardMedia>
         <BiPlus size={100} />
       </CardMedia>
       <Typography variant="h3">Add Project</Typography>
     </Card>
   );
-}
+}