Admin client to serve actual images and data (#34)

keventmesh · Oct 5, 2023 · 3ab86eb · 3ab86eb
1 parent fd83122
commit 3ab86eb
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 39 deletions.
diff --git a/services/admin-service/README.md b/services/admin-service/README.md
@@ -13,6 +13,12 @@ This image is published at `quay.io/kevent-mesh/ai-demo-admin-service`.
 - Have Minio working, with an upload in it
 - Have the Postgres working, with the prediction and feedbacks in it
 
+For port forwarding:
+```shell
+kubectl port-forward -n minio-operator svc/minio 9445:443
+kubectl port-forward -n ai-demo svc/postgresql 5432:5432
+```
+
 # Running locally
 
 Setup virtual environment:

diff --git a/services/admin-service/app.py b/services/admin-service/app.py
diff --git a/services/admin-service/templates/index.html b/services/admin-service/templates/index.html
@@ -37,10 +37,6 @@ <h5 class="card-title">
                 </span>
             </h5>
             <div class="card-text">
-                <div>
-                    <span class="col-6">Upload time:</span>
-                    <span id="uploadTime"></span>
-                </div>
                 <div>
                     <span class="col-6">Detection box:</span>
                     <span id="boundingBox"></span>
@@ -53,6 +49,14 @@ <h5 class="card-title">
                     <span class="col-6">Feedback:</span>
                     <span id="feedback"></span>
                 </div>
+                <div>
+                    <span class="col-6">Prediction date:</span>
+                    <span id="predictionDate"></span>
+                </div>
+                <div>
+                    <span class="col-6">Feedback date:</span>
+                    <span id="feedbackDate"></span>
+                </div>
             </div>
         </div>
     </div>
@@ -124,22 +128,22 @@ <h5 class="card-title">
             if(data.uploadId){
                 $('#uploadId').text(data.uploadId);
             }
-            if(data.created_on){
-                const createdDate = new Date(data.created_on);
-                $('#uploadTime').text(createdDate.toISOString());
-            }
             if(data.prediction){
                 $('#boundingBox').text(`x0: ${data.prediction.x0}, x1: ${data.prediction.x1}, y0: ${data.prediction.y0}, y1: ${data.prediction.y1}`);
                 $('#probability').text(data.prediction.probability);
+                const predictionDate = new Date(data.prediction.predictionDate);
+                $('#predictionDate').text(predictionDate.toISOString());
             }
 
             if (data.feedback === undefined || data.feedback === null) {
                 $('#feedbackContainer').hide();
             } else {
                 const positiveFeedback = data.feedback > 3;
                 const $feedback = $('#feedback');
-                $feedback.html(positiveFeedback >3 ? "<i class=\"bi bi-hand-thumbs-up\"></i>": "<i class=\"bi bi-hand-thumbs-down\"></i>");
-                $feedback.css('color', positiveFeedback > 3 ? 'green' : 'red');
+                $feedback.html(positiveFeedback ? "<i class=\"bi bi-hand-thumbs-up\"></i>": "<i class=\"bi bi-hand-thumbs-down\"></i>");
+                $feedback.css('color', positiveFeedback ? 'green' : 'red');
+                const feedbackDate = new Date(data.feedback.feedbackDate);
+                $('#feedbackDate').text(feedbackDate.toISOString());
             }
 
         });