Updated packages

Fixed issue #31 Fixed issue #32
huddeldaddel · Mar 6, 2023 · 7001066 · 7001066
1 parent a37c72e
commit 7001066
Show file tree

Hide file tree

Showing 8 changed files with 718 additions and 2,327 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "react-router": "^6.8.1",
     "react-router-dom": "^6.8.1",
     "react-scripts": "^5.0.1",
+    "react-ts-typewriter": "^0.1.8-b",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

diff --git a/public/SourceCodePro-Regular.ttf b/public/SourceCodePro-Regular.ttf
diff --git a/public/index.html b/public/index.html
@@ -2,15 +2,21 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>GitLab Team Dashboard</title>
     <!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
   </head>
-  <body style="background-image: url('/img/scott-webb-OxHPDs4WV8Y-unsplash.jpg'); background-size: cover;">
+  <body
+    style="
+      @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
+      background-image: url('/img/scott-webb-OxHPDs4WV8Y-unsplash.jpg');
+      background-size: cover;
+    "
+  >
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>

diff --git a/src/components/Typewriter.css b/src/components/Typewriter.css
@@ -0,0 +1,17 @@
+div.Typewriter {
+  height: 100%;
+  position: relative;
+  width: 100%;
+}
+
+div.Typewriter div.Container {
+  font-family: "Source Code Pro", monospace;
+  font-weight: bold;
+  margin: 0;
+  position: absolute;
+  text-align: center;
+  top: 50%;
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  width: 100%;
+}
diff --git a/src/components/Typewriter.tsx b/src/components/Typewriter.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import TSTypewriter from "react-ts-typewriter";
+
+import "./Typewriter.css";
+
+interface IProps {
+  text: string;
+}
+
+function Typewriter(props: IProps) {
+  return (
+    <div className="Typewriter">
+      <div className="Container">
+        &gt; <TSTypewriter text={props.text} />
+      </div>
+    </div>
+  );
+}
+
+export default Typewriter;
diff --git a/src/pages/dashboard/Dashboard.tsx b/src/pages/dashboard/Dashboard.tsx
@@ -7,6 +7,7 @@ import PageHeader from "../../components/PageHeader";
 import Carousel from "./Carousel";
 import GlCiBoard from "./gl-ci-pipelines/GlCiBoard";
 import GlMrBoard from "./gl-merge-requests/GlMrBoard";
+import Typewriter from "../../components/Typewriter";
 
 import "./Dashboard.css";
 
@@ -16,6 +17,7 @@ interface IProps {
 
 interface IState {
   gitLabProjects: Project[];
+  loading: boolean;
   page: number;
 }
 
@@ -28,10 +30,15 @@ class DashboardPage extends React.Component<IProps, IState> {
     super(props);
     this.pageFlipInterval = null;
     this.updateInterval = null;
+
+    const gitLabService = new GitLabService();
+    const projects = gitLabService.loadData();
     this.state = {
-      gitLabProjects: new GitLabService().loadData(),
+      gitLabProjects: projects,
+      loading: gitLabService.shouldUpdate() && projects.length === 0,
       page: 0,
     };
+
     this.handlePageSelected = this.handlePageSelected.bind(this);
     this.renderCiBoard = this.renderCiBoard.bind(this);
     this.renderMrBoard = this.renderMrBoard.bind(this);
@@ -60,6 +67,7 @@ class DashboardPage extends React.Component<IProps, IState> {
         service.updateData().then((projects) => {
           this.setState({
             gitLabProjects: projects,
+            loading: false,
             page: 0,
           });
         });
@@ -78,28 +86,41 @@ class DashboardPage extends React.Component<IProps, IState> {
   }
 
   render() {
-    const projects = this.filterGitLabProjectsWithPipelines(
-      this.state.gitLabProjects
-    );
-
-    const pageSize =
-      this.props.config?.display?.numberOfPipelines || this.defaultTileCount;
-
-    let ciBoardPages = Math.floor(projects.length / pageSize);
-    if (0 !== projects.length % pageSize) {
-      ciBoardPages++;
-    }
-
-    const mrBoardPages = 1;
-    const pages = ciBoardPages + mrBoardPages;
-
-    if (this.state.page < ciBoardPages) {
-      return this.renderCiBoard(projects, pageSize, pages);
+    if(this.state.loading) {
+      return this.renderLoadingAnimation();
     } else {
-      return this.renderMrBoard(pages);
+      const projects = this.filterGitLabProjectsWithPipelines(
+        this.state.gitLabProjects
+      );
+
+      const pageSize =
+        this.props.config?.display?.numberOfPipelines || this.defaultTileCount;
+
+      let ciBoardPages = Math.floor(projects.length / pageSize);
+      if (0 !== projects.length % pageSize) {
+        ciBoardPages++;
+      }
+
+      const mrBoardPages = 1;
+      const pages = ciBoardPages + mrBoardPages;
+
+      if (this.state.page < ciBoardPages) {
+        return this.renderCiBoard(projects, pageSize, pages);
+      } else {
+        return this.renderMrBoard(pages);
+      }
     }
   }
 
+  private renderLoadingAnimation() {
+    return (
+      <div className="Page Dashboard">
+        <PageHeader title="Refreshing data" />
+        <Typewriter text="Preparing dashboard. Please wait..."/>
+      </div>
+    );
+  }
+
   private renderMrBoard(pages: number) {
     return (
       <div className="Page Dashboard">

diff --git a/src/pages/dashboard/gl-merge-requests/GlMrBoard.tsx b/src/pages/dashboard/gl-merge-requests/GlMrBoard.tsx
@@ -4,6 +4,7 @@ import moment from "moment";
 import { MergeRequest } from "../../../model/merge-request";
 import { Project } from "../../../model/project";
 import GlMrRow from "./GlMrRow";
+import Typewriter from "../../../components/Typewriter";
 import "./GlMrBoard.css";
 
 interface IProps {
@@ -41,12 +42,15 @@ export default function GlMrBoard(props: IProps) {
   const oldestMergeRequests = getOldestMergeRequests();
 
   let maxAgeInSeconds = 0;
-  if (oldestMergeRequests.length > 0) {
-    var a = moment(new Date(oldestMergeRequests[0].createdAt));
-    maxAgeInSeconds = moment().diff(a, "seconds");
+  if (oldestMergeRequests.length === 0) {
+    return <div className="GlMrBoard">
+       <Typewriter text="No data available" />
+    </div>;
   }
 
-    const rows = oldestMergeRequests.map((mr) => (
+  const a = moment(new Date(oldestMergeRequests[0].createdAt));
+  maxAgeInSeconds = moment().diff(a, "seconds");
+  const rows = oldestMergeRequests.map((mr) => (
     <GlMrRow
       key={mr.id}
       mergeRequest={mr}