From 7c5725f7ec0eb6e1db178ac71c47c68aae8c0d89 Mon Sep 17 00:00:00 2001
From: Tom Mirwald <40235770+70mm1@users.noreply.github.com>
Date: Thu, 10 Aug 2023 10:24:12 +0200
Subject: [PATCH] 34 provide a way to jump from a resource to all assessment
 results of the particular resource (#38)

* Add filterResourceId query parameter

* Fix filterResourceId check

* Add button to jump to assessment results

* Add results as PageData
---
 .../(app)/cloud/[id]/assessments/+page.svelte | 13 ++++--
 .../(app)/cloud/[id]/assessments/+page.ts     | 20 +++++----
 .../(app)/cloud/[id]/resources/+page.svelte   | 42 ++++++++++++++++---
 .../(app)/cloud/[id]/resources/+page.ts       | 17 ++++++++
 4 files changed, 75 insertions(+), 17 deletions(-)
 create mode 100644 src/routes/(app)/cloud/[id]/resources/+page.ts

diff --git a/src/routes/(app)/cloud/[id]/assessments/+page.svelte b/src/routes/(app)/cloud/[id]/assessments/+page.svelte
index a7d94fd..e216519 100644
--- a/src/routes/(app)/cloud/[id]/assessments/+page.svelte
+++ b/src/routes/(app)/cloud/[id]/assessments/+page.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
   import StarterHint from '$lib/components/StarterHint.svelte';
   import { CheckCircle, NoSymbol, QueueList, XCircle } from '@steeze-ui/heroicons';
-  import { Check } from '@steeze-ui/heroicons';
   import type { PageData } from './$types';
-  import { onMount } from 'svelte';
   import { Icon } from '@steeze-ui/svelte-icon';
   import type { AssessmentResult } from '$lib/api/assessment';
   import Button from '$lib/components/Button.svelte';
@@ -14,11 +12,18 @@
   let rowsPerPage = 9;
 
   $: filteredData =
-    data.filterIds === undefined
+    data.filterIds === undefined &&
+    (data.filterResourceId === undefined || data.filterResourceId === null)
       ? data.results
       : data.results.filter((result) => {
-          return data.filterIds?.includes(result.id);
+          return (
+            (data.filterIds === undefined || data.filterIds?.includes(result.id)) &&
+            (data.filterResourceId === undefined ||
+              result.resourceId.split('/')[result.resourceId.split('/').length - 1] ===
+                data.filterResourceId)
+          );
         });
+
   $: totalPages = Math.ceil(filteredData.length / rowsPerPage);
   $: currentData = paginate(filteredData, currentPage);
 
diff --git a/src/routes/(app)/cloud/[id]/assessments/+page.ts b/src/routes/(app)/cloud/[id]/assessments/+page.ts
index 8e80dde..8a5cbbb 100644
--- a/src/routes/(app)/cloud/[id]/assessments/+page.ts
+++ b/src/routes/(app)/cloud/[id]/assessments/+page.ts
@@ -1,17 +1,21 @@
-import { listCloudServiceAssessmentResults } from "$lib/api/orchestrator";
-import { error } from "@sveltejs/kit";
-import type { PageLoad } from "./$types";
+import { listCloudServiceAssessmentResults } from '$lib/api/orchestrator';
+
+import { error } from '@sveltejs/kit';
+
+import type { PageLoad } from './$types';
 
 export const load = (async ({ fetch, params, url }) => {
   if (params.id == undefined) {
-    throw error(405, "Required parameter missing")
+    throw error(405, 'Required parameter missing');
   }
 
-  const filterIds = url.searchParams.get("filterIds")?.split(",")
-  const results = await listCloudServiceAssessmentResults(params.id, fetch)
+  const filterIds = url.searchParams.get('filterIds')?.split(',');
+  const filterResourceId = url.searchParams.get('filterResourceId');
+  const results = await listCloudServiceAssessmentResults(params.id, fetch);
 
   return {
     filterIds,
+    filterResourceId,
     results
-  }
-}) satisfies PageLoad
+  };
+}) satisfies PageLoad;
diff --git a/src/routes/(app)/cloud/[id]/resources/+page.svelte b/src/routes/(app)/cloud/[id]/resources/+page.svelte
index 203e6a7..ab885bd 100644
--- a/src/routes/(app)/cloud/[id]/resources/+page.svelte
+++ b/src/routes/(app)/cloud/[id]/resources/+page.svelte
@@ -8,12 +8,16 @@
     ChevronUp,
     ChevronDown,
     XCircle,
-    Funnel
+    Funnel,
+    ArrowTopRightOnSquare,
+    QueueList
   } from '@steeze-ui/heroicons';
   import type { PageData } from './$types';
   import { onMount } from 'svelte';
   import type { Resource, ResourceProperties } from '$lib/api/discovery';
   import { Icon } from '@steeze-ui/svelte-icon';
+  import { goto } from '$app/navigation';
+  import { listAssessmentResults, listCloudServiceAssessmentResults } from '$lib/api/orchestrator';
 
   export let data: PageData;
 
@@ -123,6 +127,15 @@
   function toggleFilterOptions() {
     filterOptionsVisible = !filterOptionsVisible;
   }
+
+  function goToAssessmentResults(resourceName: string) {
+    goto(`/cloud/${data.service.id}/assessments/?filterResourceId=${resourceName}`);
+  }
+
+  async function countAssessmentResults(resourceId: string) {
+    const results = data.results.filter((result) => result.resourceId === resourceId);
+    return results.length;
+  }
 </script>
 
 {#if data.resources.length == 0}
@@ -141,7 +154,7 @@
               scope="col"
               class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-40"
             >
-              ID
+              Actions
             </th>
             <th
               scope="col"
@@ -266,9 +279,9 @@
         <tbody class="divide-y divide-gray-200 bg-white">
           {#each currentData as resource}
             <tr>
-              <td class="px-6 py-4 whitespace-nowrap">
+              <td class="px-6 py-4 pl-2 whitespace-nowrap">
                 <button
-                  class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:bg-gray-200"
+                  class="inline-flex items-center px-4 py-2 pl-0 text-sm font-medium text-gray-500 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:bg-gray-200"
                   on:click={() => copyId(resource.id)}
                   title={resource.id}
                   disabled={copyingId !== null}
@@ -278,8 +291,27 @@
                   {:else}
                     <Icon src={Clipboard} class="h-5 w-5 mr-2" />
                   {/if}
-                  Copy
+                  Copy ID
                 </button>
+                {#await countAssessmentResults(resource.id) then assessmentResultCount}
+                  <button
+                    class={'inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:bg-gray-200' +
+                      (assessmentResultCount === 0 ? ' cursor-not-allowed opacity-50' : '')}
+                    title={'Go to ' +
+                      assessmentResultCount +
+                      ' assessment result' +
+                      (assessmentResultCount === 1 ? '' : 's') +
+                      ' for ' +
+                      resource.properties.name +
+                      '.'}
+                    on:click={() => goToAssessmentResults(resource.properties.name)}
+                    disabled={assessmentResultCount === 0}
+                  >
+                    <Icon src={QueueList} class="h-5 w-5 mr-2" />
+
+                    {assessmentResultCount}
+                  </button>
+                {/await}
               </td>
               <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-900 sm:pl-0">
                 <span class="text-sm text-gray-900">{resource.properties.name}</span>
diff --git a/src/routes/(app)/cloud/[id]/resources/+page.ts b/src/routes/(app)/cloud/[id]/resources/+page.ts
new file mode 100644
index 0000000..1e8f218
--- /dev/null
+++ b/src/routes/(app)/cloud/[id]/resources/+page.ts
@@ -0,0 +1,17 @@
+import { listCloudServiceAssessmentResults } from '$lib/api/orchestrator';
+
+import { error } from '@sveltejs/kit';
+
+import type { PageLoad } from './$types';
+
+export const load = (async ({ fetch, params, url }) => {
+  if (params.id == undefined) {
+    throw error(405, 'Required parameter missing');
+  }
+
+  const results = await listCloudServiceAssessmentResults(params.id, fetch);
+
+  return {
+    results
+  };
+}) satisfies PageLoad;