style: adapt workshop 4 ux

intuitem · Dec 16, 2024 · 96cbd8b · 96cbd8b
1 parent e94af9b
commit 96cbd8b
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 15 deletions.
diff --git a/backend/ebios_rm/models.py b/backend/ebios_rm/models.py
@@ -471,6 +471,14 @@ def ref_id(self):
     def gravity(self):
         return self.attack_path.gravity
 
+    @property
+    def stakeholders(self):
+        return self.attack_path.stakeholders.all()
+
+    @property
+    def ro_to(self):
+        return self.attack_path.ro_to_couple
+
     def get_likelihood_display(self):
         if self.likelihood < 0:
             return {

diff --git a/backend/ebios_rm/serializers.py b/backend/ebios_rm/serializers.py
@@ -157,7 +157,9 @@ class OperationalScenarioReadSerializer(BaseModelSerializer):
     str = serializers.CharField(source="__str__")
     ebios_rm_study = FieldsRelatedField()
     folder = FieldsRelatedField()
-    attack_path = FieldsRelatedField()
+    attack_path = FieldsRelatedField(["id", "name", "description"])
+    stakeholders = FieldsRelatedField(many=True)
+    ro_to = FieldsRelatedField(["risk_origin", "target_objective"])
     threats = FieldsRelatedField(many=True)
     likelihood = serializers.JSONField(source="get_likelihood_display")
     gravity = serializers.JSONField(source="get_gravity_display")

diff --git a/frontend/messages/en.json b/frontend/messages/en.json
@@ -1004,5 +1004,6 @@
 	"veryLikely": "Very likely",
 	"certain": "Certain",
 	"minor": "Minor",
-	"operatingModesDescription": "Operating modes description"
+	"operatingModesDescription": "Operating modes description",
+	"noStakeholders": "No stakeholders"
 }
diff --git a/frontend/src/lib/utils/table.ts b/frontend/src/lib/utils/table.ts
@@ -602,6 +602,6 @@ export const listViewFields: ListViewFieldsConfig = {
 	},
 	'operational-scenarios': {
 		head: ['operatingModesDescription', 'threats', 'likelihood'],
-		body: ['operatoig_modes_descriptionn', 'threats', 'likelihood']
+		body: ['operating_modes_description', 'threats', 'likelihood']
 	}
 };
diff --git a/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte
@@ -88,18 +88,49 @@
 			{:else}
 				<p class="text-gray-600">{m.noDescription()}</p>
 			{/if}
-			<div class="w-full p-4 bg-gray-50 border rounded-md shadow-sm">
-				<h3 class="font-semibold text-lg text-gray-700 flex items-center space-x-2">
-					<i class="fa-solid fa-table text-gray-500 opacity-75"></i>
-					<span>{m.attackPath()}</span>
-				</h3>
-				<ModelTable
-					backgroundColor="bg-gray-50"
-					regionBody="bg-gray-50"
-					regionHeadCell="uppercase bg-gray-50 text-gray-700"
-					source={data.table}
-					URLModel="attack-paths"
-				></ModelTable>
+			<div class="flex flex-col space-y-2 items-center">
+				<div class="flex flex-col items-center space-x-2">
+					<span class="font-semibold text-lg text-gray-700"
+						><i class="fa-solid fa-shuffle"></i> {m.attackPath()}</span
+					>
+					<p class="text-gray-600">{operationalScenario.attack_path.name}</p>
+					{#if operationalScenario.attack_path.description}
+						<p class="text-gray-600">{operationalScenario.attack_path.description}</p>
+					{/if}
+				</div>
+				<div class="grid grid-cols-3 gap-12 items-center">
+					<div
+						class="flex flex-col space-y-4 p-4 bg-red-200 border-red-400 border rounded-md shadow-sm text-center"
+					>
+						<h4 class="font-semibold text-gray-600">{m.riskOrigin()}</h4>
+						<i class="fa-solid fa-skull-crossbones text-3xl"></i>
+						<p class="badge text-white bg-red-500 capitalize">
+							{operationalScenario.ro_to.risk_origin}
+						</p>
+					</div>
+					<div
+						class="flex flex-col space-y-4 p-4 bg-violet-200 border-violet-400 border rounded-md shadow-sm text-center"
+					>
+						<h4 class="font-semibold text-gray-600">{m.stakeholders()}</h4>
+						<i class="fa-solid fa-globe text-3xl"></i>
+						{#each operationalScenario.stakeholders as stakeholder}
+							<p class="badge text-white bg-violet-500">
+								<a class="anchor text-white" href="/stakeholders/{stakeholder.id}"
+									>{stakeholder.str}</a
+								>
+							</p>
+						{:else}
+							<p class="text-gray-300 italic">{m.noStakeholders()}</p>
+						{/each}
+					</div>
+					<div
+						class="flex flex-col space-y-4 p-4 bg-blue-200 border-blue-400 border rounded-md shadow-sm text-center"
+					>
+						<h4 class="font-semibold text-gray-600">{m.targetObjective()}</h4>
+						<i class="fa-solid fa-bullseye text-3xl"></i>
+						<p class="badge text-white bg-blue-500">{operationalScenario.ro_to.target_objective}</p>
+					</div>
+				</div>
 			</div>
 			<div class="w-full p-4 bg-gray-50 border rounded-md shadow-sm">
 				<h3 class="font-semibold text-lg text-gray-700 flex items-center space-x-2">