Add the possibility to remove a ToE (#54)

src/lib/api/evaluation.ts

@@ -44,6 +44,17 @@ export async function startEvaluation(toe: TargetOfEvaluation): Promise<StartEva
   }).then((res) => res.json())
 }
 
+export async function stopEvaluation(toe: TargetOfEvaluation): Promise<{}> {
+  const apiUrl = clouditorize(`/v1/evaluation/evaluate/${toe.cloudServiceId}/${toe.catalogId}/stop`)
+
+  return fetch(apiUrl, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${localStorage.token}`,
+    }
+  }).then((res) => res.json())
+}
+
 export interface ListEvaluationResultsFilter {
   cloudServiceId?: string
   catalogId?: string

src/lib/components/CatalogComplianceItem.svelte

@@ -1,28 +1,46 @@
 <script lang="ts">
   import type { ComplianceStatus } from '$lib/api/evaluation';
   import type { Catalog, TargetOfEvaluation } from '$lib/api/orchestrator';
+  import { Pause, Stop, Trash } from '@steeze-ui/heroicons';
   import ComplianceChart from './ComplianceChart.svelte';
+  import { Icon } from '@steeze-ui/svelte-icon';
+  import { createEventDispatcher } from 'svelte';
+  import Button from './Button.svelte';
 
   export let catalog: Catalog;
   export let toe: TargetOfEvaluation;
   export let compliance: Map<string, ComplianceStatus>;
 
-  $: topLevelControls = catalog.controls;
+  const dispatch = createEventDispatcher<{
+    remove: { toe: TargetOfEvaluation };
+  }>();
+
+  interface $$Events {
+    remove: CustomEvent<{ toe: TargetOfEvaluation }>;
+  }
+
+  function remove() {
+    dispatch('remove', { toe });
+  }
 </script>
 
 <li class="overflow-hidden rounded-xl border border-gray-200">
-  <a href={'/cloud/' + toe.cloudServiceId + '/compliance/' + catalog.id}>
-    <div class="flex items-center gap-x-4 border-b border-gray-900/5 bg-gray-50 p-6">
+  <div class="flex justify-between items-center gap-x-4 border-b border-gray-900/5 bg-gray-50 p-6">
+    <a href={'/cloud/' + toe.cloudServiceId + '/compliance/' + catalog.id}>
       <div class="text-sm font-medium leading-6 text-gray-900">{catalog.name}</div>
+      <div class="text-sm text-gray-500">{catalog.description}</div>
+    </a>
+    <div class="flex gap-x-1.5">
+      <!--<Button>
+        <Icon src={Pause} class="h-4 w-4" />
+      </Button>-->
+      <Button on:click={remove} on:keydown={remove} class="bg-red-800 hover:bg-red-700">
+        <Icon src={Trash} class="h-4 w-4" />
+      </Button>
     </div>
-  </a>
+  </div>
+
   <dl class="-my-3 divide-y divide-gray-100 px-6 py-4 text-sm leading-6">
-    <div class="flex justify-between gap-x-4 py-3">
-      <dt class="text-gray-500">Description</dt>
-      <dd class="flex items-start gap-x-2">
-        <div class="font-medium text-gray-900">{catalog.description}</div>
-      </dd>
-    </div>
     <ComplianceChart {compliance} {toe} />
     <div class="flex justify-between gap-x-4 py-3">
       <dt class="text-gray-500">Controls in Scope</dt>

src/routes/(app)/cloud/[id]/compliance/+page.svelte

@@ -1,6 +1,15 @@
 <script lang="ts">
-  import type { ComplianceStatus, EvaluationResult } from '$lib/api/evaluation';
-  import { createTargetOfEvaluation, type TargetOfEvaluation } from '$lib/api/orchestrator';
+  import { invalidate } from '$app/navigation';
+  import {
+    stopEvaluation,
+    type ComplianceStatus,
+    type EvaluationResult
+  } from '$lib/api/evaluation';
+  import {
+    createTargetOfEvaluation,
+    removeTargetOfEvaluation,
+    type TargetOfEvaluation
+  } from '$lib/api/orchestrator';
   import CatalogComplianceItem from '$lib/components/CatalogComplianceItem.svelte';
   import EnableCatalogButton from '$lib/components/EnableCatalogButton.svelte';
   import type { PageData } from './$types';
@@ -16,10 +25,6 @@
 
   export let data: PageData;
 
-  async function enable(e: CustomEvent<TargetOfEvaluation>) {
-    await createTargetOfEvaluation(e.detail);
-  }
-
   // TODO: This should be done in the backend
   $: compliance = buildCompliance(data.topControlResults);
 
@@ -42,13 +47,27 @@
 
     return all;
   }
+
+  async function remove(e: CustomEvent<{ toe: TargetOfEvaluation }>) {
+    let really = confirm('Do you really want to remove this target of evaluation?');
+
+    if (!really) {
+      return;
+    }
+
+    await stopEvaluation(e.detail.toe);
+    await removeTargetOfEvaluation(e.detail.toe);
+
+    // refresh our ToEs
+    invalidate((url) => url.pathname == `/v1/orchestrator/cloud_services/${data.service.id}/toes`);
+  }
 </script>
 
 <ul class="grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8">
   {#each enabledItems as item, i (item.catalog.id)}
     <CatalogComplianceItem
       {...item}
-      on:enable={enable}
+      on:remove={remove}
       compliance={compliance.get(item.catalog.id) ?? new Map()}
     />
   {/each}

src/routes/(app)/cloud/[id]/compliance/[catalogId]/+page.svelte

@@ -29,7 +29,7 @@
     const tree = new Map<string, TreeItemData>();
 
     for (const result of results) {
-      if (status !== null && !status.includes(result.status)) {
+      if (status !== null && !status.includes(result.status) && status.length != 0) {
         continue;
       }
 
@@ -46,7 +46,7 @@
           continue;
         }
 
-        if (status !== null && status.includes(result.status)) {
+        if (status !== null && (status.includes(result.status) || status.length == 0)) {
           parent.children.push(result);
         }
       }