Statistics display

backend/api.py

@@ -310,3 +310,8 @@ def iter_large_file(file_name: Path):
             "Content-Length": str(_tar_path.stat().st_size),
         },
     )
+
+
+@app.get("/stats")
+def get_report_stats() -> dict:
+    return Storator3000.get_stats()

backend/store.py

@@ -68,3 +68,13 @@ def get_random(cls) -> Path:
         files = cls.get_logs()
 
         return Path(random.choice(files))
+
+    @classmethod
+    def get_stats(cls) -> dict:
+        """Retrieve basic statistics about submitted reports.
+        """
+        files = cls.get_logs()
+        stats = {
+            "total_reports" : len(files),
+        }
+        return stats

docker/frontend/Dockerfile

@@ -20,7 +20,7 @@ RUN dnf -y update && \
                    java \
     && dnf clean all
 
-RUN npm install -g shadow-cljs
+RUN npm install -g shadow-cljs@">=2.26.0 <3.0.0"
 
 # TODO In the next steps we want to copy the source code to the container,
 # install all Javascript dependencies and pre-install all ClojureScript

docker/production/Dockerfile

@@ -17,7 +17,7 @@ RUN git clone https://github.com/fedora-copr/log-detective-website.git /src
 
 WORKDIR /src/frontend
 RUN npm install
-RUN npm install -g shadow-cljs
+RUN npm install -g shadow-cljs@">=2.26.0 <3.0.0"
 RUN npx shadow-cljs release app
 
 FROM registry.fedoraproject.org/fedora:38

frontend/package.json

@@ -25,7 +25,7 @@
     "marked": "^4.0.10",
     "rimraf": "~3.0.2",
     "serve-handler": "~6.1.3",
-    "shadow-cljs": "~2.10.13",
+    "shadow-cljs": "^2.26.7",
     "taiko": "~1.3.0",
     "zprint-clj": "~0.8.0"
   },

frontend/public/css/style.css

@@ -275,3 +275,28 @@ a:hover {
   --bs-spinner-width: 80px;
   --bs-spinner-height: 80px;
 }
+
+#progressbar {
+  width: 100%;
+  background-color: var(--gray-0);
+}
+
+#progress {
+  height: 30px;
+  background-color: var(--newblue);
+  text-align: center;
+  line-height: 30px;
+  font-weight: 500;
+  color: var(--darkblue);
+  overflow-wrap: normal;
+}
+
+#progressbar-number {
+  position: absolute;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 3px;
+  left: 0;
+  right: 0;
+  text-align: center;
+}

frontend/src/app/core.cljs

@@ -1,7 +1,7 @@
 (ns app.core
   "This namespace contains your application and is the entrypoint for 'yarn start'."
   (:require [reagent.core :as r]
-            [app.homepage :refer [homepage]]
+            [app.homepage :refer [homepage fetch-stats-backend]]
             [app.contribute :refer [contribute init-data]]
             [app.review.core :refer [review init-data-review]]))
 
@@ -12,7 +12,10 @@
   ;; This is not the standard way of doing this, we should probably use some
   ;; router. But it is good enough for now.
   (cond (.getElementById js/document "app-homepage")
-        (r/render [homepage] (.getElementById js/document "app-homepage"))
+        (do
+          (fetch-stats-backend)
+          (r/render [homepage] (.getElementById js/document "app-homepage"))
+          )
 
         (.getElementById js/document "app-contribute")
         (do

frontend/src/app/homepage.cljs

@@ -1,19 +1,34 @@
 (ns app.homepage
   (:require [reagent.core :as r]
+            [cljs.math :as math]
             [clojure.string :as str]
             [cljs.source-map.base64 :as base64 :refer [encode]]
             [cljs.core.match :refer-macros [match]]
-            [app.homepage-validation :refer [validate]]))
+            [app.homepage-validation :refer [validate]]
+            [lambdaisland.fetch :as fetch]
+            [app.helpers :refer
+              [current-path
+              fontawesome-icon
+              remove-trailing-slash]]))
 
 
 (def input-values (r/atom nil))
 (def input-errors (r/atom []))
 (def current-hash-atom (r/atom nil))
-
+(def backend-stats (r/atom nil))
+(def report-target (r/atom 1000))
 
 (defn current-hash []
   (. (. js/document -location) -hash))
 
+(defn fetch-stats-backend []
+  (let [url (remove-trailing-slash (str "/stats" (current-path)))]
+    (-> (fetch/get url {:accept :json :content-type :json})
+        (.then (fn [resp]
+                 (-> resp :body (js->clj :keywordize-keys true))))
+        (.then (fn [resp]
+                   (reset! backend-stats resp))))))
+
 (defn on-submit [event]
   (.preventDefault event)
   (validate current-hash-atom input-values input-errors)
@@ -79,6 +94,24 @@
      (render-navigation-item "Upload" "#upload")
      (render-navigation-item "Container" "#container")]])
 
+(defn progress-width []
+  (min
+    (math/ceil
+     (*
+      (float
+        (/
+          (:total_reports @backend-stats)
+    @report-target)) 100)) 100))
+
+(defn render-stats []
+  [:div {:id "progressbar"}
+      [:h5 "Are we there yet?"]
+    [:div {:id "progressbar-number"}
+      [:p (progress-width) "%"]]
+    [:div {
+      :id "progress"
+      :style {:width (str (progress-width) "%")}}]])
+
 (defn render-card [provider url title img text inputs]
   [:div {:class "card-body"}
    [:div {:class "row"}
@@ -200,6 +233,8 @@
 (defn homepage []
   (reset! current-hash-atom
           (if (str/blank? (current-hash)) "#copr" (current-hash)))
-  [:div {:class "card text-center"}
-   (render-navigation)
-   (render-cards)])
+    [:div {:class "card text-center"}
+      (render-stats)
+      (render-navigation)
+      (render-cards)]
+ )