feat: add security measures and requirement assessments nested tables…

backend/app_tests/api/test_api_requirement_assessments.py

@@ -113,7 +113,7 @@ def test_get_requirement_assessments(self, authenticated_client):
             },
             {
                 "folder": str(folder.id),
-                "compliance_assessment": str(compliance_assessment.id),
+                "compliance_assessment": {"id": str(compliance_assessment.id), "str": compliance_assessment.name},
                 "requirement": str(RequirementNode.objects.all()[0].id),
             },
             -1,
@@ -143,6 +143,9 @@ def test_create_requirement_assessments(self, authenticated_client):
                 "requirement": str(RequirementNode.objects.all()[0].id),
                 "security_measures": [str(security_measure.id)],
             },
+            {
+                "compliance_assessment": {"id": str(compliance_assessment.id), "str": compliance_assessment.name}
+            },
             base_count=-1,
         )
 
@@ -186,7 +189,7 @@ def test_update_requirement_assessments(self, authenticated_client):
             },
             {
                 "folder": str(Folder.get_root_folder().id),
-                "compliance_assessment": str(compliance_assessment.id),
+                "compliance_assessment": {"id": str(compliance_assessment.id), "str": compliance_assessment.name},
                 "requirement": str(RequirementNode.objects.all()[0].id),
             },
         )

backend/core/serializers.py

@@ -395,6 +395,8 @@ class Meta:
 
 class RequirementAssessmentReadSerializer(BaseModelSerializer):
     name = serializers.CharField(source="__str__")
+    compliance_assessment = FieldsRelatedField()
+
 
     class Meta:
         model = RequirementAssessment

backend/core/views.py

@@ -502,6 +502,7 @@ class SecurityMeasureViewSet(BaseModelViewSet):
         "effort",
         "risk_scenarios",
         "requirement_assessments",
+        "evidences"
     ]
     search_fields = ["name", "description", "risk_scenarios", "requirement_assessments"]
 
@@ -1161,7 +1162,7 @@ class RequirementAssessmentViewSet(BaseModelViewSet):
     """
 
     model = RequirementAssessment
-    filterset_fields = ["folder"]
+    filterset_fields = ["folder", "evidences"]
     search_fields = ["name", "description"]
 
     @action(detail=False, name="Get updatable measures")

frontend/.eslintignore

@@ -6,6 +6,8 @@ node_modules
 .env
 .env.*
 !.env.example
+/tests/reports/*
+/tests/results/*
 
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml

frontend/.prettierignore

@@ -6,6 +6,8 @@ node_modules
 .env
 .env.*
 !.env.example
+/tests/reports/*
+/tests/results/*
 
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml

frontend/src/lib/components/Forms/ModelForm.svelte

@@ -20,8 +20,8 @@
 	export let form: SuperValidated<AnyZodObject>;
 	export let model: ModelInfo;
 	export let closeModal = false;
 	export let parent: any;
 	export let suggestions: { [key: string]: any } = {};
 
 	const URLModel = model.urlModel as urlModel;
 	export let schema = modelSchema(URLModel);
@@ -248,20 +248,6 @@
 			label="Domain"
 			hide={initialData.security_measures || initialData.requirement_assessments}
 		/>
-		<AutocompleteSelect
-			{form}
-			multiple
-			options={getOptions({ objects: model.foreignKeys['security_measures'] })}
-			field="security_measures"
-			label="Security measures"
-		/>
-		<AutocompleteSelect
-			{form}
-			multiple
-			options={getOptions({ objects: model.foreignKeys['requirement_assessments'] })}
-			field="requirement_assessments"
-			label="Requirement assessments"
-		/>
 		<TextField
 			{form}
 			field="link"

frontend/src/lib/components/Modals/CreateModal.svelte

@@ -33,6 +33,8 @@
 				{$modalStore[0].title ?? '(title missing)'}
 			</header>
 			<div
+				role="button"
+				tabindex="0"
 				class="flex items-center hover:text-primary-500 cursor-pointer"
 				on:click={parent.onClose}
 				on:keydown={parent.onClose}

frontend/src/lib/components/ModelTable/LanguageDisplay.svelte

@@ -5,4 +5,4 @@
 	$: display = LOCALE_DISPLAY_MAP[cell];
 </script>
 
-<span {...$$restProps}>{@html display}</span>
+<span {...$$restProps}>{display}</span>

frontend/src/lib/components/ModelTable/ModelTable.svelte

@@ -77,7 +77,7 @@
 		if (['Enter', 'Space'].includes(event.code)) onRowClick(event, rowIndex);
 	}
 
-	export let identifierField: string = 'id';
+	export let identifierField = 'id';
 
 	export let deleteForm: SuperValidated<AnyZodObject> | undefined = undefined;
 

frontend/src/lib/components/SideBar/navData.ts

@@ -56,13 +56,12 @@ export const navData = {
 					name: 'Assets',
 					fa_icon: 'fa-solid fa-gem',
 					href: '/assets'
-				},
+				}
 			]
 		},
 		{
 			name: 'Governance',
 			items: [
-
 				{
 					name: 'Policies',
 					fa_icon: 'fa-solid fa-user',
@@ -72,7 +71,7 @@ export const navData = {
 					name: 'Risk matrices',
 					fa_icon: 'fa-solid fa-table-cells-large',
 					href: '/risk-matrices'
-				},
+				}
 			]
 		},
 		{
@@ -116,10 +115,9 @@ export const navData = {
 				}
 			]
 		},
-    {
-      name: 'Organisation',
-      items : [
-
+		{
+			name: 'Organisation',
+			items: [
 				{
 					name: 'Domains',
 					fa_icon: 'fa-solid fa-diagram-project',
@@ -145,9 +143,8 @@ export const navData = {
 					fa_icon: 'fa-solid fa-user-tag',
 					href: '/role-assignments'
 				}
-      ]
-
-    },
+			]
+		},
 
 		{
 			name: 'Extra',

frontend/src/lib/components/TableRowActions/TableRowActions.svelte

@@ -17,7 +17,7 @@
 	export let editURL: string | undefined;
 	export let deleteForm: SuperValidated<AnyZodObject> | undefined;
 	export let URLModel: urlModel | string | undefined;
-	export let identifierField: string = 'id';
+	export let identifierField = 'id';
 
 	export let hasBody = false;
 

frontend/src/lib/components/TreeView/RecursiveTreeViewItem.svelte

@@ -151,13 +151,13 @@
 			}}
 		>
 			{#if typeof node.content === 'string'}
-				{@html node.content}
+				{node.content}
 			{:else}
 				<svelte:component this={node.content} {...node.contentProps} />
 			{/if}
 			<svelte:fragment slot="lead">
 				{#if typeof node.lead === 'string'}
-					{@html node.lead}
+					{node.lead}
 				{:else}
 					<svelte:component this={node.lead} {...node.leadProps} />
 				{/if}

frontend/src/lib/components/fragments/WatchlistExceptions.svelte

@@ -43,21 +43,21 @@
 							request_path
 						)}'"
 					>
-						<td scope="row" class="px-3 py-4 font-medium">
+						<th scope="row" class="px-3 py-4 font-medium">
 							{#if acceptance.approver == user.id && acceptance.state == 'submitted'}
 								<span class="mr-1 p-1 rounded-md text-xs bg-indigo-500 text-white">
 									action requested
 								</span>
 							{/if}
 							{acceptance.name}
-						</td>
-						<td class="px-3 py-4">
+						</th>
+						<th class="px-3 py-4">
 							{acceptance.folder.str}
-						</td>
-						<td class="px-3 py-4">
+						</th>
+						<th class="px-3 py-4">
 							{acceptance.approver.str}
-						</td>
-						<td class="px-3 py-4">
+						</th>
+						<th class="px-3 py-4">
 							{#if acceptanceState(acceptance.expiry_date) === 'expired'}
 								<span class="rounded bg-red-500 text-white p-1 text-xs mr-1">expired</span>
 							{:else if acceptanceState(acceptance.expiry_date) === 'upcoming'}
@@ -66,7 +66,7 @@
 								<span class="rounded bg-yellow-500 text-white p-1 text-xs mr-1">today</span>
 							{/if}
 							{formatStringToDate(acceptance.expiry_date)}
-						</td>
+						</th>
 					</tr>
 				{/each}
 			{:else}

frontend/src/lib/utils/crud.ts

@@ -270,7 +270,8 @@ export const URL_MODEL_MAP: ModelMap = {
 		selectFields: [{ field: 'status' }],
 		foreignKeyFields: [
 			{ field: 'security_measures', urlModel: 'security-measures' },
-			{ field: 'evidences', urlModel: 'evidences' }
+			{ field: 'evidences', urlModel: 'evidences' },
+			{ field: 'compliance_assessment', urlModel: 'compliance-assessments' }
 		]
 	},
 	libraries: {

frontend/src/lib/utils/csrf.ts

@@ -6,7 +6,9 @@ async function getCsrfToken() {
 			credentials: 'include'
 		}).then((res) => res.json());
 		return response.csrfToken;
-	} catch (error) {}
+	} catch (error) {
+		console.error(error);
+	}
 }
 
 export const csrfToken = await getCsrfToken();

frontend/src/lib/utils/table.ts

@@ -84,6 +84,10 @@ export const listViewFields = {
 		head: ['Name', 'Framework', 'Description', 'Project'],
 		body: ['name', 'framework', 'description', 'project']
 	},
+	'requirement-assessments': {
+		head: ['Name', 'Description', 'Compliance Assessment'],
+		body: ['name', 'description', 'compliance_assessment']
+	},
 	evidences: {
 		head: ['Name', 'File', 'Description'],
 		body: ['name', 'attachment', 'description']

frontend/src/routes/(app)/compliance-assessments/[id=uuid]/+page.svelte

@@ -49,7 +49,7 @@
 
 		if (node.children && Object.keys(node.children).length > 0) {
 			for (const childId in node.children) {
-				if (node.children.hasOwnProperty(childId)) {
+				if (Object.prototype.hasOwnProperty.call(node.children, childId)) {
 					const childNode = node.children[childId];
 					countStatus(childNode, statusCounts);
 				}

frontend/src/routes/(app)/compliance-assessments/[id=uuid]/TreeViewItemContent.svelte

@@ -10,7 +10,7 @@
 	export let security_functions: Record<string, any>[] | undefined = undefined;
 	export let children: Record<string, Record<string, unknown>> | undefined = undefined;
 	export let canEditRequirementAssessment: boolean;
-	export let status: string | undefined = undefined;
+	// export let status: string | undefined = undefined;
 	export let statusCounts: Record<string, number> | undefined;
 
 	$: hasChildren = children && Object.keys(children).length > 0;
@@ -87,7 +87,7 @@
 		{#if threats || security_functions}
 			<div
 				role="button"
-				tabindex="-1"
+				tabindex="0"
 				class="underline text-sm hover:text-primary-400 {classesShowInfoText(showInfo)}"
 				on:click={(_) => (showInfo = !showInfo)}
 				on:keydown={(_) => (showInfo = !showInfo)}
@@ -155,20 +155,20 @@
 		<div class="flex flex-1 bg-gray-200 rounded-full overflow-hidden h-4 shrink">
 			{#each orderedStatusPercentages as sp}
 				{#if complianceColorMap[sp.status] === '#000000'}
-				<div
-					class="flex flex-col justify-center overflow-hidden text-white text-xs text-center bg-yellow-500"
-					style="width: {sp.percentage.value}%; background-color: {complianceColorMap[sp.status]}"
-				>
-					{sp.percentage.display}%
-				</div>
+					<div
+						class="flex flex-col justify-center overflow-hidden text-white text-xs text-center bg-yellow-500"
+						style="width: {sp.percentage.value}%; background-color: {complianceColorMap[sp.status]}"
+					>
+						{sp.percentage.display}%
+					</div>
 				{:else}
-				<div
-					class="flex flex-col justify-center overflow-hidden text-black text-xs text-center bg-yellow-500"
-					style="width: {sp.percentage.value}%; background-color: {complianceColorMap[sp.status]}"
-				>
-					{sp.percentage.display}%
-				<!-- {sp.percentage?.display}% -->
-				</div>
+					<div
+						class="flex flex-col justify-center overflow-hidden text-black text-xs text-center bg-yellow-500"
+						style="width: {sp.percentage.value}%; background-color: {complianceColorMap[sp.status]}"
+					>
+						{sp.percentage.display}%
+						<!-- {sp.percentage?.display}% -->
+					</div>
 				{/if}
 			{/each}
 		</div>

frontend/src/routes/(app)/compliance-assessments/[id=uuid]/TreeViewItemLead.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let status: string;
+	// export let status: string;
 	export let statusDisplay: string;
 	export let statusColor: string;
 	export let assessable: boolean;

frontend/src/routes/(app)/evidences/[id=uuid]/+page.server.ts

@@ -4,8 +4,11 @@ import { z } from 'zod';
 import { setError, superValidate } from 'sveltekit-superforms/server';
 import { setFlash } from 'sveltekit-flash-message/server';
 import type { PageServerLoad } from './$types';
+import type { urlModel } from '$lib/utils/types';
+import { listViewFields } from '$lib/utils/table';
+import { tableSourceMapper, type TableSource } from '@skeletonlabs/skeleton';
 
-export const load: PageServerLoad = (async ({ fetch, params }) => {
+export const load: PageServerLoad = async ({ fetch, params }) => {
 	const URLModel = 'evidences';
 	const endpoint = `${BASE_API_URL}/${URLModel}/${params.id}/`;
 
@@ -14,8 +17,28 @@ export const load: PageServerLoad = (async ({ fetch, params }) => {
 
 	const object = await fetch(`${endpoint}object/`).then((res) => res.json());
 
-	return { URLModel, evidence, object };
-})
+	const tables: Record<string, any> = {};
+
+	for (const key of ['security-measures', 'requirement-assessments'] as urlModel[]) {
+		const keyEndpoint = `${BASE_API_URL}/${key}/?evidences=${params.id}`;
+		const response = await fetch(keyEndpoint);
+		if (response.ok) {
+			const data = await response.json().then((data) => data.results);
+			const bodyData = tableSourceMapper(data, listViewFields[key].body);
+
+			const table: TableSource = {
+				head: listViewFields[key].head,
+				body: bodyData,
+				meta: data
+			};
+			tables[key] = table;
+		} else {
+			console.error(`Failed to fetch data for ${key}: ${response.statusText}`);
+		}
+	}
+
+	return { URLModel, evidence, object, tables };
+};
 
 export const actions: Actions = {
 	deleteAttachment: async (event) => {
@@ -40,11 +63,10 @@ export const actions: Actions = {
 			if (response.non_field_errors) {
 				setError(deleteAttachmentForm, 'non_field_errors', response.non_field_errors);
 			}
-			setFlash({ type: "error", message: "An error has occured" }, event);
+			setFlash({ type: 'error', message: 'An error has occured' }, event);
 			return fail(400, { form: deleteAttachmentForm });
 		}
-		setFlash({ type: "success", message: "Attachment successfully deleted" }, event);
-		throw redirect(302, `/${urlmodel}/${id}`)
+		setFlash({ type: 'success', message: 'Attachment successfully deleted' }, event);
+		throw redirect(302, `/${urlmodel}/${id}`);
 	}
-
-}
+};