Initial version of discovery graph

package.json

@@ -18,13 +18,19 @@
     "@sveltejs/adapter-node": "^1.3.1",
     "@sveltejs/kit": "^1.27.0",
     "@tailwindcss/forms": "^0.5.3",
+    "@types/cytoscape": "^3.19.13",
+    "@types/cytoscape-dagre": "^2.3.2",
+    "@types/cytoscape-euler": "^1.2.2",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
     "autoprefixer": "^10.4.14",
     "chart.js": "^4.4.0",
+    "cytoscape": "^3.26.0",
+    "cytoscape-cola": "^2.5.1",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte": "^2.34.0",
+    "flat": "^6.0.1",
     "inter-ui": "^3.19.3",
     "oidc-client-ts": "^2.4.0",
     "postcss": "^8.4.31",
@@ -39,4 +45,4 @@
     "vite": "^4.5.0"
   },
   "type": "module"
-}
+}

src/lib/api/discovery.ts

@@ -1,5 +1,12 @@
 import { throwError } from './errors';
 import { clouditorize } from './util';
+
+export interface GraphEdge {
+  id: string
+  source: string
+  target: string
+}
+
 export interface StartDiscoveryResponse {
   successful: boolean
 }
@@ -8,6 +15,10 @@ export interface QueryResponse {
   results: Resource[]
 }
 
+export interface ListGraphEdgesResponse {
+  edges: GraphEdge[]
+}
+
 export interface ListResourcesRequest {
   filter?: Filter
   orderBy?: string
@@ -35,6 +46,7 @@ export interface ResourceProperties {
   type: string[]
   serviceId: string
   id: string
+  labels: object
 }
 
 export interface Resource {
@@ -70,8 +82,6 @@ export async function listResources(
     apiUrl += `&filter.type=${type}`
   }
 
-  const emptyResource: Resource[] = [];
-
   return fetch(apiUrl, {
     method: 'GET',
     headers: {
@@ -82,4 +92,20 @@ export async function listResources(
     .then((response: QueryResponse) => {
       return response.results;
     });
+}
+
+
+export async function listGraphEdges(fetch = window.fetch): Promise<GraphEdge[]> {
+  const apiUrl = clouditorize(`/v1experimental/discovery/graph/edges?&pageSize=1500`);
+
+  return fetch(apiUrl, {
+    method: 'GET',
+    headers: {
+      'Authorization': `Bearer ${localStorage.token}`,
+    }
+  }).then(throwError)
+    .then((res) => res.json())
+    .then((response: ListGraphEdgesResponse) => {
+      return response.edges;
+    });
 }

src/lib/api/orchestrator.ts

@@ -171,8 +171,8 @@ export async function getRuntimeInfo(fetch = window.fetch): Promise<Runtime> {
  * 
  * @returns an array of {@link AssessmentResult}s.
  */
-export async function listAssessmentResults(fetch = window.fetch): Promise<AssessmentResult[]> {
-  const apiUrl = clouditorize(`/v1/orchestrator/assessment_results?pageSize=1500&orderBy=timestamp&asc=false`);
+export async function listAssessmentResults(fetch = window.fetch, latestByResourceId = false): Promise<AssessmentResult[]> {
+  const apiUrl = clouditorize(`/v1/orchestrator/assessment_results?pageSize=1500&latestByResourceId=${latestByResourceId}&orderBy=timestamp&asc=false`);
 
   return fetch(apiUrl, {
     method: 'GET',

src/lib/components/AssessmentIcon.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { AssessmentResult } from '$lib/api/assessment';
+  import { CheckCircle, XCircle } from '@steeze-ui/heroicons';
+  import { Icon } from '@steeze-ui/svelte-icon';
+
+  export let result: AssessmentResult;
+</script>
+
+{#if result.compliant}
+  <Icon src={CheckCircle} theme="solid" class="h-5 w-5 mr-2 text-green-800" />
+{:else}
+  <Icon src={XCircle} theme="solid" class="h-5 w-5 mr-2 text-red-800" />
+{/if}