Add Medina wishlist (#441)

* add icons

* change button color, fix typo

* Update Catalog -> Catalogues

* Update Catalog -> Catalogues in top row

* Switch Metrics and Assessment Tab in Cloud Service view

* Add filter metric_category

* Add filter metric_ids

* Add filter resource type drop-down

* Add metric_category to metrics view

* Show only sub_controls in controls_in_scope view

* Add cloud service tab descriptions

* Fix merge failures

---------

Co-authored-by: Kunz, Immanuel <[email protected]>

src/app.scss

@@ -1,4 +1,5 @@
-$primary: #007FC3;
+// $primary: #007FC3;
+$primary: #0099a0;
 $min-contrast-ratio: 4;
 
 @import "bootstrap";

src/lib/MetricConfigurationBlock.svelte

@@ -7,7 +7,7 @@
 </script>
 
 {#if config}
-	<Button color="primary" on:click={() => (isOpen = !isOpen)}>Show Cofiguration</Button>
+	<Button color="primary" on:click={() => (isOpen = !isOpen)}>Show Configuration</Button>
 	<Collapse {isOpen}>
 		<Card body class="mt-2">
 			<pre>Operator:     {config.operator}</pre>

src/lib/Navigation.svelte

@@ -3,15 +3,12 @@ import {
 	Collapse,
 	Navbar,
 	NavbarToggler,
-	NavbarBrand,
 	Nav,
 	NavItem,
 	NavLink,
-	Dropdown,
-	DropdownToggle,
-	DropdownMenu,
-	DropdownItem
 } from 'sveltestrap';
+import Fa from 'svelte-fa'
+import { faCloud, faRuler, faFile, faCertificate } from '@fortawesome/free-solid-svg-icons'
 import { SvelteToast } from '@zerodevx/svelte-toast';
 import { base } from '$app/paths';
 import { page } from '$app/stores';
@@ -41,7 +38,7 @@ let routes = [
 	},
 	{
 		url: '/catalogs',
-		name: 'Catalogs'
+		name: 'Catalogues'
 	},
 	{
 		url: '/certificates',
@@ -60,13 +57,33 @@ console.log($page.url);
 	<NavbarToggler on:click={() => (isOpen = !isOpen)} />
 	<Collapse {isOpen} navbar expand="md" on:update={handleUpdate}>
 		<Nav class="ms-auto" navbar>
-			{#each routes as route}
+			<!-- {#each routes as route}
 				<NavItem>
 					<NavLink active={$page.url.pathname.startsWith(route.url)} href="{base}{route.url}">
 						{route.name}
 					</NavLink>
 				</NavItem>
-			{/each}
+			{/each} -->
+			<NavItem>
+				<NavLink active={$page.url.pathname.startsWith("/cloud")} href="{base}{"/cloud"}">
+					<Fa icon={faCloud} /> Cloud Services
+				</NavLink>
+			</NavItem>
+			<NavItem>
+				<NavLink active={$page.url.pathname.startsWith("/metrics")} href="{base}{"/metrics"}">
+					<Fa icon={faRuler} /> Metrics
+				</NavLink>
+			</NavItem>
+			<NavItem>
+				<NavLink active={$page.url.pathname.startsWith("/catalogs")} href="{base}{"/catalogs"}">
+					<Fa icon={faFile} /> Catalogues
+				</NavLink>
+			</NavItem>
+			<NavItem>
+				<NavLink active={$page.url.pathname.startsWith("/certificates")} href="{base}{"/certificates"}">
+					<Fa icon={faCertificate} /> Certificates
+				</NavLink>
+			</NavItem>
 			<!--TODO: if logged in, don't show-->
 			{#if !loggedIn}
 			<NavItem>

src/routes/catalogs/+page.svelte

@@ -6,7 +6,7 @@ import type { PageData } from './$types';
 export let data: PageData;
 </script>
 
-<h3>Catalogs</h3>
+<h3>Catalogues</h3>
 {#if data.catalogs}
 	<Container class="mt-4 ms-0 me-0">
 		<Row cols={2} noGutters>

src/routes/cloud/[...id]/+layout.svelte

@@ -21,33 +21,33 @@ $: metricActive = $page.route.id == '/cloud/[...id]/metrics';
 <div class="pt-3 pb-0 bg-light">
 	<ServiceTopBar service={data.service} />
 	<ul class="nav nav-tabs">
-		<li class="nav-item ps-2">
+		<li title= "Overview shows general information of the given Cloud Service." class="nav-item ps-2">
 			<a class="nav-link" class:active={overviewActive} href="/cloud/{data.service.id}"
 				><Fa icon={faTableColumns} /> Overview</a
 			>
 		</li>
-		<li class="nav-item">
+		<li title= "Configuration shows the name and description of the Cloud Service as well as the corresponding Target of Evaluation (ToE). The ToE can be configured for all available Catalogs." class="nav-item">
 			<a
 				class="nav-link"
 				class:active={configurationActive}
 				href="/cloud/{data.service.id}/configuration"><Fa icon={faGear} /> Configuration</a
 			>
 		</li>
-		<li class="nav-item">
+		<li title= "Discovery shows all discovered Cloud Resources for the given Cloud Service." class="nav-item">
 			<a class="nav-link" class:active={discoveryActive} href="/cloud/{data.service.id}/discovery"
 				><Fa icon={faBinoculars} /> Discovery</a
 			>
 		</li>
-		<li class="nav-item">
-			<a class="nav-link" class:active={assessmentActive} href="/cloud/{data.service.id}/assessment"
-				><Fa icon={faCircleCheck} /> Assessment</a
-			>
-		</li>
-		<li class="nav-item">
+		<li title= "Metrics shows all available metrics in the Orchestrator." class="nav-item">
 			<a class="nav-link" class:active={metricActive} href="/cloud/{data.service.id}/metrics"
 				><Fa icon={faCircleCheck} /> Metrics</a
 			>
 		</li>
+		<li title= "Assessment shows all assessment results for the given Cloud Service." class="nav-item">
+			<a class="nav-link" class:active={assessmentActive} href="/cloud/{data.service.id}/assessment"
+				><Fa icon={faCircleCheck} /> Assessment</a
+			>
+		</li>
 	</ul>
 </div>
 <div class="p-3">

src/routes/cloud/[...id]/assessment/+page.svelte

@@ -12,7 +12,7 @@ import {
 	Row,
 	Table,
 } from 'sveltestrap';
-import { metrics } from '$lib/stores';
+import { metrics, controls } from '$lib/stores';
 import AssessmentResultRow from '$lib/components/AssessmentResultRow.svelte';
 
 export let data: import('./$types').PageData;
@@ -32,18 +32,15 @@ let filterEndTimestamp: string | number | Date;
 $: filteredResults = results.filter((r) => {
 	let dateFilterStartTimestamp = new Date(filterStartTimestamp);
 	let dateFilterEndTimestamp = new Date(filterEndTimestamp);
-	console.log(filterStartTimestamp)
-	console.log(dateFilterStartTimestamp)
-	console.log(filterStartTimestamp)
-	console.log(dateFilterEndTimestamp)
+
 	return (
 		(filterCompliant != '' ? (r.compliant == (filterCompliant == 'true') ? true : false) : true) &&
 		(filterMetricCategory != ''
-			? $metrics
-					.get(r.metricId)
-					?.category?.toLowerCase()
-					?.includes(filterMetricCategory?.toLowerCase())
-			: true) &&
+		? $metrics
+				.get(r.metricId)
+				?.category?.toLowerCase()
+				?.includes(filterMetricCategory?.toLowerCase())
+		: true) &&
 		(filterMetric != ''
 			? $metrics.get(r.metricId)?.name?.toLowerCase()?.includes(filterMetric?.toLowerCase())
 			: true) && 
@@ -58,6 +55,54 @@ $: filteredResults = results.filter((r) => {
 			: true)
 	);
 });
+
+// getListOfControlCategories returns a string list of all metric categories
+function getListOfControlCategories(): String[] {
+	let categoryList: string[] = [];
+
+	for (var val of $controls) {
+		if (categoryList.includes(val.categoryName) == false) {
+			categoryList.push(val.categoryName)
+		}
+	}
+
+	return categoryList
+}
+
+// getListOfMetrics returns a string list of all metric_ids
+function getListOfMetricIds(): String[] {
+	let metricsList: string[] = [];
+
+	for (var val of $metrics.values()) {
+		if (metricsList.includes(val.id) == false) {
+			metricsList.push(val.id)
+		}
+	}
+
+	return metricsList
+}
+
+// getListOfResources returns a string list of all resource names of the given assessment_results
+function getListOfResources(): String[] {
+	let resourceList: string[] = [];
+
+	for (var val of results) {
+		const types = val.resourceTypes
+		console.log("types: ", types)
+		for (var elem of types) {
+			console.log("type: ", elem)
+			if (resourceList.includes(elem) == false) {
+				resourceList.push(elem)
+			}
+		}
+	}
+
+	return resourceList
+}
+
+const categoryList = getListOfControlCategories()
+const metricsList = getListOfMetricIds()
+const resourceList = getListOfResources()
 </script>
 
 <Card style="width: 800px" class="mt-2">
@@ -81,26 +126,36 @@ $: filteredResults = results.filter((r) => {
 					<Col>
 						<FormGroup>
 							<Label for="exampleEmail">Metric Category</Label>
-							<Input
-								type="text"
-								name="metric-category"
-								id="metricCateglory"
-								bind:value={filterMetricCategory}
-							/>
+							<Input type="select" name="metricCategory" id="metricCategory" bind:value={filterMetricCategory}>
+								<option />
+								{#each categoryList as value}
+									<option value={value}>{value}</option>
+								{/each}
+							</Input>
 						</FormGroup>
 					</Col>
 				</Row>
 				<Row>
 					<Col>
 						<FormGroup>
 							<Label for="exampleEmail">Metric</Label>
-							<Input type="text" name="metric" id="metric" bind:value={filterMetric} />
+							<Input type="select" name="metric" id="metric" bind:value={filterMetric}>
+								<option />
+								{#each metricsList as value}
+									<option value={value}>{value}</option>
+								{/each}
+							</Input>
 						</FormGroup>
 					</Col>
 					<Col>
 						<FormGroup>
-							<Label for="resourceType">Resource Type</Label>
-							<Input type="text" name="resourceType" id="resourceType" bind:value={filterResourceType} />
+							<Label for="exampleEmail">Resource Type</Label>
+							<Input type="select" name="resourceType" id="resourceType" bind:value={filterResourceType}>
+								<option />
+								{#each resourceList as value}
+									<option value={value}>{value}</option>
+								{/each}
+							</Input>
 						</FormGroup>
 					</Col>
 					<Col>

src/routes/cloud/[...id]/configuration/toe/+page.svelte

@@ -118,8 +118,28 @@ function getUsedCatalog(catalogID: string): Catalog {
 	return {} as any;
 }
 
+// Get only sub-controls from controls_in_scope
+// Note: That is not a really good approach and only can be used for the EUCS catalog, because we have no hierarchy in the controls_in_scope list.
+function getSubControls(): ControlInScope[][] {
+	const subControls: ControlInScope[][] = []
+	var i = 0
+
+	for (var scope of data.scopes) {
+		subControls[i] = []
+		for (var s of scope) {
+			if (s.controlId.includes(".")) {
+				subControls[i].push(s)
+			}
+		}
+		i++
+	}
+
+	return subControls
+}
+
 let open = false;
 const toggle = () => (open = !open);
+const subControls = getSubControls()
 </script>
 
 {#each data.targets as target, idx}
@@ -134,7 +154,7 @@ const toggle = () => (open = !open);
 			<Button color="primary" on:click={toggle}>Configure Controls in Scope</Button>
 			<Button color="danger" on:click={() => remove(target)}><Fa icon={faTrash} /></Button>
 			<ControlModal
-				scope={data.scopes[idx]}
+				scope={subControls[idx]}
 				{toggle}
 				{open}
 				{target}

src/routes/cloud/[...id]/metrics/+page.svelte

@@ -18,6 +18,7 @@ The following metrics are configured for the Cloud Service.
 		<thead>
 			<tr>
 				<th>#</th>
+				<th>Category</th>
 				<th>Description</th>
 				<th>Implementation</th>
 				<th>Configuration</th>
@@ -27,6 +28,7 @@ The following metrics are configured for the Cloud Service.
 			{#each data.metrics as metric, i}
 				<tr>
 					<td>{metric.id}</td>
+					<td>{metric.category}</td>
 					<td>{metric.description}</td>
 					<td>
 						{#await getMetricImplementation(metric.id) then impl}

src/routes/metrics/+page.svelte

@@ -16,6 +16,7 @@ The following metrics are configured in the Clouditor orchestrator.
 		<thead>
 			<tr>
 				<th>#</th>
+				<th>Category</th>
 				<th>Description</th>
 				<th>Implementation</th>
 			</tr>
@@ -24,6 +25,7 @@ The following metrics are configured in the Clouditor orchestrator.
 			{#each data.metrics as metric, i}
 				<tr>
 					<td>{metric.id}</td>
+					<td>{metric.category}</td>
 					<td>{metric.description}</td>
 					<td>
 						{#await getMetricImplementation(metric.id) then impl}