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
clouditor · Aug 10, 2023 · 7c5725f · 7c5725f
1 parent 96f491e
commit 7c5725f
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;