From cedad96c346e7f344a525b85e6256a91b55fc0e1 Mon Sep 17 00:00:00 2001
From: Viacheslav Kukushkin <vy.kukushkin@gmail.com>
Date: Mon, 12 Aug 2024 07:08:46 +0300
Subject: [PATCH] Mlcube-as-a-link unified view

---
 cli/medperf/web_ui/datasets/routes.py             |  3 +--
 .../web_ui/templates/benchmark_detail.html        | 15 +++++++++++----
 cli/medperf/web_ui/templates/dataset_detail.html  |  5 ++++-
 cli/medperf/web_ui/templates/mlcube_macros.html   | 14 ++++++++++++++
 4 files changed, 30 insertions(+), 7 deletions(-)
 create mode 100644 cli/medperf/web_ui/templates/mlcube_macros.html

diff --git a/cli/medperf/web_ui/datasets/routes.py b/cli/medperf/web_ui/datasets/routes.py
index c4931ec9e..cde0d0bb0 100644
--- a/cli/medperf/web_ui/datasets/routes.py
+++ b/cli/medperf/web_ui/datasets/routes.py
@@ -41,7 +41,6 @@ def dataset_detail_ui(request: Request, dataset_id: int):
     dataset = Dataset.get(dataset_id)
 
     prep_cube = Cube.get(cube_uid=dataset.data_preparation_mlcube)
-    prep_cube_name = prep_cube.name if prep_cube else "Unknown"
 
     benchmark_associations = Dataset.get_benchmarks_associations(dataset_uid=dataset_id)
     benchmark_associations = sort_associations_display(benchmark_associations)
@@ -54,7 +53,7 @@ def dataset_detail_ui(request: Request, dataset_id: int):
                                           "request": request,
                                           "entity": dataset,
                                           "entity_name": dataset.name,
-                                          "prep_cube_name": prep_cube_name,
+                                          "prep_cube": prep_cube,
                                           "benchmark_associations": benchmark_associations,
                                           "benchmarks": benchmarks
                                       })
diff --git a/cli/medperf/web_ui/templates/benchmark_detail.html b/cli/medperf/web_ui/templates/benchmark_detail.html
index b612a720e..c4b12c979 100644
--- a/cli/medperf/web_ui/templates/benchmark_detail.html
+++ b/cli/medperf/web_ui/templates/benchmark_detail.html
@@ -1,6 +1,7 @@
 <!-- ./cli/medperf/web-ui/templates/benchmark_detail.html -->
 {% extends "detail_base.html" %}
 {% import 'association_card_macros.html' as macros %}
+{% import 'mlcube_macros.html' as mlcube_macros %}
 
 {% block title %}Benchmark Details{% endblock %}
 
@@ -35,10 +36,16 @@ <h5 class="card-title mb-0">Details</h5>
             </div>
             <div class="card mb-3">
                 <div class="card-body d-flex justify-content-between flex-wrap">
-                    <div class="w-50">
-                        <p class="card-text"><strong>Data Preparation MLCube:</strong> <a href="/mlcubes/ui/{{ data_preparation_mlcube.id }}" class="text-primary">{{ data_preparation_mlcube.name }}</a></p>
-                        <p class="card-text"><strong>Reference Model MLCube:</strong> <a href="/mlcubes/ui/{{ reference_model_mlcube.id }}" class="text-primary">{{ reference_model_mlcube.name }}</a></p>
-                        <p class="card-text"><strong>Metrics MLCube:</strong> <a href="/mlcubes/ui/{{ metrics_mlcube.id }}" class="text-primary">{{ metrics_mlcube.name }}</a></p>
+                    <div class="w-50 d-flex">
+                        <p class="card-text">
+                            <strong>Data Preparation MLCube:</strong> {{ mlcube_macros.mlcube_link(data_preparation_mlcube) }}
+                        </p>
+                        <p class="card-text">
+                            <strong>Reference Model MLCube:</strong> {{ mlcube_macros.mlcube_link(reference_model_mlcube) }}
+                        </p>
+                        <p class="card-text">
+                            <strong>Metrics MLCube:</strong> {{ mlcube_macros.mlcube_link(metrics_mlcube) }}
+                        </p>
                         <p class="card-text"><strong>Owner:</strong> <i class="fas fa-user"></i> <span class="text-muted small">{{ entity.owner }}</span></p>
                     </div>
                     <div class="text-right w-50">
diff --git a/cli/medperf/web_ui/templates/dataset_detail.html b/cli/medperf/web_ui/templates/dataset_detail.html
index 5d0ae75a1..512c518bc 100644
--- a/cli/medperf/web_ui/templates/dataset_detail.html
+++ b/cli/medperf/web_ui/templates/dataset_detail.html
@@ -1,6 +1,7 @@
 <!-- ./cli/medperf/web-ui/templates/dataset_detail.html -->
 {% extends "detail_base.html" %}
 {% import 'association_card_macros.html' as macros %}
+{% import 'mlcube_macros.html' as mlcube_macros %}
 
 {% block title %}Dataset Details{% endblock %}
 
@@ -24,7 +25,9 @@ <h5 class="card-title mb-0">Details</h5>
                     <p class="card-text"><strong>Location:</strong> {{ entity.location }}</p>
                     <p class="card-text"><strong>Input Data Hash:</strong> {{ entity.input_data_hash }}</p>
                     <p class="card-text"><strong>Generated UID:</strong> {{ entity.generated_uid }}</p>
-                    <p class="card-text"><strong>Data Preparation MLCube:</strong> <a href="/mlcubes/ui/{{ entity.data_preparation_mlcube }}" class="text-primary">{{ prep_cube_name }}</a></p>
+                    <p class="card-text">
+                        <strong>Data Preparation MLCube:</strong> {{ mlcube_macros.mlcube_link(prep_cube) }}
+                    </p>
                 </div>
             </div>
             <div class="card mb-3">
diff --git a/cli/medperf/web_ui/templates/mlcube_macros.html b/cli/medperf/web_ui/templates/mlcube_macros.html
new file mode 100644
index 000000000..0ccd27885
--- /dev/null
+++ b/cli/medperf/web_ui/templates/mlcube_macros.html
@@ -0,0 +1,14 @@
+<!-- ./cli/medperf/web-ui/templates/mlcube_macros.html -->
+{% macro mlcube_link(mlcube) %}
+<span class="mlcube-link {% if not mlcube.is_valid %}invalid-card{% endif %} d-inline-flex align-items-center p-1 mb-2 flex-grow-1">
+    <strong><a href="/mlcubes/ui/{{ mlcube.id }}" class="text-primary">{{ mlcube.name }}</a></strong>
+    <small class="text-muted ml-2" data-date="{{ mlcube.modified_at }}"></small>
+    <span class="ml-2">
+        {% if mlcube.state == 'OPERATION' %}
+            <i class="fas fa-check-circle text-success"></i>
+        {% else %}
+            <i class="fas fa-exclamation-circle text-warning"></i>
+        {% endif %}
+    </span>
+</span>
+{% endmacro %}
\ No newline at end of file