Merge pull request #745 from gabrielengel/new-badges

New Badges components: destination, public, status, teams

apps/ui/src/lib/common.ts

@@ -3,6 +3,8 @@ import { addToast } from '$lib/store';
 export const asyncSleep = (delay: number) =>
 	new Promise((resolve) => setTimeout(resolve, delay));
 
+export let initials = (str:string) => (str||'').split(' ').map( (wrd) => wrd[0]).join('')
+
 export function errorNotification(error: any | { message: string }): void {
 	if (error.message) {
 		if (error.message === 'Cannot read properties of undefined (reading \'postMessage\')') {
@@ -87,4 +89,4 @@ export function handlerNotFoundLoad(error: any, url: URL) {
 
 export function getRndInteger(min: number, max: number) {
 	return Math.floor(Math.random() * (max - min + 1)) + min;
-}
+}

apps/ui/src/lib/components/badges/DestinationBadge.svelte

@@ -0,0 +1,15 @@
+<script>
+	import Tooltip from "../Tooltip.svelte";
+  import {initials} from '$lib/common';
+  export let name;
+  export let thingId;
+  let id = 'destination' + thingId;
+  
+</script>
+
+{#if (name||'').length > 0}
+  <span class="badge rounded uppercase text-xs	" id={id}>
+    {initials(name)}
+  </span>
+  <Tooltip triggeredBy="#{id}" placement="right">{name}</Tooltip>
+{/if}

apps/ui/src/lib/components/badges/PublicBadge.svelte

@@ -0,0 +1,19 @@
+<div title="Public">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="h-6 w-6 "
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <circle cx="12" cy="12" r="9" />
+    <line x1="3.6" y1="9" x2="20.4" y2="9" />
+    <line x1="3.6" y1="15" x2="20.4" y2="15" />
+    <path d="M11.5 3a17 17 0 0 0 0 18" />
+    <path d="M12.5 3a17 17 0 0 1 0 18" />
+  </svg>
+</div>

apps/ui/src/lib/components/badges/StatusBadge.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import {getStatus} from '$lib/container/status'
+
+	import { onDestroy, onMount } from 'svelte';
+  export let thing:any;
+  let getting = getStatus(thing)
+  let refreshing:any;
+  let status:any;
+  // AutoUpdates Status every 5 seconds
+  onMount( ()=>{
+    refreshing = setInterval( () =>{
+      getStatus(thing).then( (r) => status = r )
+    }, 5000)
+  })
+  onDestroy( () =>{
+    clearInterval(refreshing);
+  })
+</script>
+{#await getting}
+  <span class="badge badge-lg rounded uppercase">...</span>
+{:then status}
+  <span class="badge badge-lg rounded uppercase badge-status-{status}">
+    {status}
+  </span>
+{/await}

apps/ui/src/lib/components/badges/TeamsBadge.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Tooltip from "../Tooltip.svelte";
+  import {initials} from '$lib/common';
+  export let teams:any;
+  export let thing:any;
+  let id = 'teams' + thing.id;
+</script>
+
+<span>
+  🏢
+  {#each teams as team}
+    <a href={`/iam/teams/${team.id}`} {id} style="color: #99f8; text-decoration: none;">
+			{initials(team.name)}
+    </a>
+    <Tooltip triggeredBy="#{id}" placement="right" color="bg-sky-500/50">{team.name}</Tooltip>
+  {/each}
+</span>

apps/ui/src/lib/container/status.ts

@@ -0,0 +1,73 @@
+//
+// Maps Container ID x Operation Status
+//
+// Example response of $status => {'123asdf': 'degraded', '124asdf': 'running'}
+
+import { writable, get as getStore } from 'svelte/store';
+import { get } from '$lib/api';
+
+export let containerStatus = writable({});
+
+let PERMITED_STATUS = ['loading', 'running', 'healthy', 'building', 'degraded', 'stopped', 'error'];
+
+// refreshStatus([{id}])
+export async function refreshStatus(list:Array<any>) {
+  for (const item of list) {
+    setStatus(item.id, 'loading');
+    getStatus(item, true);
+  }
+}
+
+export async function getStatus(resource: any, force: boolean = false) {
+  const { id, buildPack, dualCerts, engine } = resource;
+  let newStatus = 'stopped';
+
+  // Already set and we're not forcing
+  if (getStore(containerStatus)[id] && !force) return getStore(containerStatus)[id];
+
+  try {
+    if (buildPack) { // Application
+      const response = await get(`/applications/${id}/status`);
+      newStatus = parseApplicationsResponse(response);
+    } else if (typeof dualCerts !== 'undefined') { // Service
+      const response = await get(`/services/${id}/status`);
+      newStatus = parseServiceResponse(response);
+    } else if (typeof engine !== 'undefined'){ // Destination/Server
+      const response = await get(`/destinations/${id}/status`);
+      newStatus = response.isRunning ? 'running' : 'stopped';
+    } else { // Database
+      const response = await get(`/databases/${id}/status`);
+      newStatus = response.isRunning ? 'running' : 'stopped';
+    }
+  } catch (error) {
+    newStatus = 'error';
+  }
+
+  setStatus(id, newStatus);
+  // console.log("GOT:", id, newStatus)
+  return newStatus
+}
+
+const setStatus = (thingId, newStatus) => {
+  if(!PERMITED_STATUS.includes(newStatus))
+    throw(`Change to ${newStatus} is not permitted. Try: ${PERMITED_STATUS.join(', ')}`);
+  containerStatus.update(n => Object.assign(n, {thingId: newStatus}));
+};
+
+// -- Response Parsing
+
+function parseApplicationsResponse(list:Array<any>){
+  if (list.length === 0) return 'stopped';
+  if (list.length === 1) return list[0].status.isRunning ? 'running' : 'stopped';
+  return allWorking(list.map( (el:any) => el.status.isRunning ))
+}
+
+function parseServiceResponse(response:any){
+  if (Object.keys(response).length === 0) return 'stopped';
+  let list = Object.keys(response).map((el) => el.status.isRunning)
+  return allWorking(list) ? 'running' : 'degraded'
+}
+
+function allWorking(list:Array<any>){
+  return list.reduce((acum:boolean,res:boolean) => acum && res) ? 'running' : 'degraded';
+}