Develop SearchDialog & Update Explore Page to Use New API

README.md

@@ -1,8 +1,8 @@
 # ArunaWeb 5.0
 
-This is another total revised version for the Aruna website. Powered by [Vue 3](https://vuejs.org/), [Nuxt 3](https://nuxt.com/), [Tailwind CSS](https://tailwindcss.com/) and [Preline](https://preline.co/). 
+This is another total revised version for the Aruna website. Powered by [Vue 3](https://vuejs.org/), [Nuxt 3](https://nuxt.com/), [Tailwind CSS](https://tailwindcss.com/) and [shadcn-vue](https://www.shadcn-vue.com/). 
 
-This version is intended to be used with version **2.x.x** of Aruna, so to start a local test instance, you need a running Aruna instance and a running API Gateway to translate the RESTful http calls into native gRPC for the Aruna server.
+This version is intended to be used with version **3.x.x** of Aruna, so to start a local test instance, you need a running Aruna instance and a running API Gateway to translate the RESTful http calls into native gRPC for the Aruna server.
 
 1. How to start a local Aruna instance is described in the [Getting started instructions of the Aruna main repository](https://github.com/arunaengine/aruna?tab=readme-ov-file#getting-started) which guides you through the individual steps.
 

app.vue

@@ -1,19 +1,13 @@
 <script setup lang="ts">
-import {IconPlant} from "@tabler/icons-vue";
-import type {v2User} from "./composables/aruna_api_json";
 import EventBus from "~/composables/EventBus";
-import type {ArunaError} from "~/composables/ArunaError";
 import {parseJwt} from "~/composables/utils";
+import {useUser} from '~/composables/User'
 
-import {h} from 'vue';
-import Toaster from '@/components/ui/toast/Toaster.vue'
+import Toaster from '~/components/ui/toast/Toaster.vue'
 import RegistrationDialog from "~/components/custom-ui/dialog/RegistrationDialog.vue";
-import {useToast} from '@/components/ui/toast/use-toast'
 import Banner from "~/components/custom-ui/Banner.vue";
 import {addSeconds} from "date-fns";
 
-const {toast} = useToast()
-
 useHead({
   title: "Aruna | The data orchestration engine",
   meta: [
@@ -36,7 +30,7 @@ const bannerVisible = computed(() => {
     const validTo = Date.parse(bannerConf.validTo) || Number.MAX_SAFE_INTEGER
 
     // Check if in specified time range
-    if ((currentTimestamp-validFrom)*(currentTimestamp-validTo) <= 0) {
+    if ((currentTimestamp - validFrom) * (currentTimestamp - validTo) <= 0) {
       // Check if cookie is already present
       if (bannerCookie.value) {
         const cookieDate = Date.parse(bannerCookie.value)
@@ -61,87 +55,16 @@ function hideBanner() {
 }
 
 // Provide user object globally read-only
-const notRegistered = ref(false)
-const user: Ref<v2User | undefined> = ref(undefined)
+const {user, unregistered, refreshUser} = await useUser(useRuntimeConfig().public.maintenanceMode)
 provide('userRef', readonly(user))
 
-// Try to fetch user
-async function updateUser() {
-  // Only fetch user if not in maintenance mode
-  if (useRuntimeConfig().public.maintenanceMode)
-    return
-
-  await $fetch<v2User | ArunaError>('/api/user')
-      .then(response => {
-        if (typeof response === 'undefined') {
-          user.value = undefined
-          toast({
-            title: 'Error',
-            //description: 'Something went wrong. If this problem persists please contact an administrator.',
-            description: 'User fetch response is undefined. This should not be possible :/',
-            variant: 'destructive',
-            duration: 10000,
-          })
-        } else if (response.type === 'ArunaError') {
-          user.value = undefined
-          if ((response as ArunaError).message === 'Not registered') {
-            notRegistered.value = true
-          } else if ((response as ArunaError).code === 13) {
-            // gRPC code 13 = Internal
-            notRegistered.value = false
-            console.error(`${(response as ArunaError).code} - ${(response as ArunaError).message}`)
-          } else if ((response as ArunaError).code === 14) {
-            // gRPC code 14 = Unavailable
-            notRegistered.value = false
-            toast({
-              title: 'Error',
-              description: 'Aruna server is currently unavailable.',
-              variant: 'destructive',
-              duration: 10000,
-            })
-          } else if ((response as ArunaError).code === 16) {
-            // gRPC code 16 = Unauthorized
-            notRegistered.value = false
-          } else {
-            // Nuxt server-side error
-            notRegistered.value = false
-            console.error((response as ArunaError).message)
-          }
-        } else {
-          notRegistered.value = false
-          user.value = response as v2User
-
-          if (!user.value.active)
-            toast({
-              description: h('div',
-                  {class: 'flex space-x-2 items-center justify-center'},
-                  [
-                    h(IconPlant, {class: 'flex-shrink-0 size-5 text-green-400'}),
-                    h('span',
-                        {class: 'text-fuchsia-50'},
-                        ['Please wait until your account gets activated by an administrator.'])
-                  ]),
-              duration: 10000
-            })
-        }
-      }).catch(() => {
-        user.value = undefined
-        notRegistered.value = false
-        toast({
-          title: 'Error',
-          description: 'Something unexpected went wrong. If this problem persists please contact an administrator.',
-          variant: 'destructive',
-          duration: 10000,
-        })
-      })
-}
-
 // Re-fetch user on demand
-EventBus.on('updateUser', () => {
+EventBus.on('updateUser', async () => {
   console.log("Received user refresh event")
-  updateUser()
+  await refreshUser() //updateUser()
 })
 
+// Auto-refresh access/refresh token before expiry
 async function refreshTokens() {
   const refresh_token = useCookie<string>('refresh_token')
   const access_token = useCookie<string>('access_token')
@@ -165,16 +88,17 @@ async function refreshTokens() {
 }
 
 onBeforeMount(() => setInterval(refreshTokens, 30000))
-onBeforeMount(() => updateUser())
 </script>
 
 <template>
-  <RegistrationDialog @closeRegisterDialog="notRegistered=false" :withButton="false" :initialOpen="notRegistered"/>
+  <RegistrationDialog @closeRegisterDialog="refreshUser()" :withButton="false" :initialOpen="unregistered"/>
 
-  <!-- Header + Navigation -->
   <!-- Main body -->
   <div v-if="useRuntimeConfig().public.maintenanceMode"
-       class="h-[100vh] w-[100vw] bg-[url('/public/imgs/maintenance_sm.webp')] md:bg-[url('/public/imgs/maintenance_md.webp')] lg:bg-[url('/public/imgs/maintenance_lg.webp')] bg-no-repeat bg-center bg-cover to-transparent">
+       class="h-[100vh] w-[100vw] bg-no-repeat bg-center bg-cover to-transparent
+              bg-[url('/imgs/maintenance_sm.webp')]
+              md:bg-[url('/imgs/maintenance_md.webp')]
+              lg:bg-[url('/imgs/maintenance_lg.webp')]">
   </div>
 
   <div v-else
@@ -189,6 +113,7 @@ onBeforeMount(() => updateUser())
     <NuxtLoadingIndicator/>
     <NuxtPage/>
   </div>
+  <!-- End Main body -->
 
   <Toaster/>
 </template>

components/card/resource.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import {modelsv2Status, v2DataClass, type v2GenericResource, v2ResourceVariant,} from '~/composables/aruna_api_json';
+import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger,} from "@/components/ui/tooltip"
+
+import {ResourceVariant, VisibilityClass} from "~/types/aruna-v3-enums";
+
 
 /* ----- PROPERTIES ----- */
 interface ResourceCardProps {
-  resource: v2GenericResource
+  resource: Resource
 }
 
 const {resource} = defineProps<ResourceCardProps>()
-const entry = toSearchResult(resource)
 
 /* ----- END PROPERTIES ----- */
 
@@ -17,72 +19,88 @@ function displayDescription(description: string): string {
   }
   return description
 }
-function displayDataClass(dataClass: v2DataClass): string {
-  switch (dataClass) {
-    case v2DataClass.DATA_CLASS_PUBLIC: return 'Public'
-    case v2DataClass.DATA_CLASS_PRIVATE: return 'Private'
-    default: return 'Unspecified'
+
+function displayVisbility(visibility: VisibilityClass): string {
+  switch (visibility) {
+    case VisibilityClass.Public:
+      return 'Public';
+    case VisibilityClass.PublicMetadata:
+      return 'Public Metadata';
+    case VisibilityClass.Private:
+      return 'Private';
+    default:
+      return 'Unspecified'
   }
 }
-function dataClassCss(dataClass: v2DataClass): string {
-  switch (dataClass) {
-    case v2DataClass.DATA_CLASS_PUBLIC: return 'border-green-600 text-green-600'
-    case v2DataClass.DATA_CLASS_PRIVATE: return 'border-red-600/80 text-red-600/80'
-    case v2DataClass.DATA_CLASS_CONFIDENTIAL: return 'border-white text-white'
-    case v2DataClass.DATA_CLASS_WORKSPACE: return 'border-indigo-600 text-indigo-600'
-    default: return 'border-aruna-text/50 text-aruna-text/50'
+
+function visibilityCss(visibility: VisibilityClass): string {
+  switch (visibility) {
+    case VisibilityClass.Public:
+      return 'border-green-600 text-green-600';
+    case VisibilityClass.PublicMetadata:
+      return 'border-white text-white';
+    case VisibilityClass.Private:
+      return 'border-red-600/80 text-red-600/80';
+    default:
+      return 'border-aruna-text/50 text-aruna-text/50'
   }
 }
 </script>
 
 <template>
-  <div v-if="entry"
-       class="flex flex-auto my-3 p-4 gap-x-4 bg-aruna-bg/90 border border-l-4 border-l-aruna-highlight shadow-sm rounded-md border-aruna-text/50"
-       :class="{'border-l-destructive': entry.object_status === modelsv2Status.STATUS_DELETED}">
+  <div
+      class="flex flex-auto my-3 p-4 gap-x-4 bg-aruna-bg/90 border border-l-4 border-l-aruna-highlight shadow-sm rounded-md border-aruna-text/50"
+      :class="{'border-l-destructive': resource.deleted}">
     <div class="flex flex-col basis-1/3 gap-y-3 border-aruna-text/50">
-      <!-- Name and ID display with links -->
-      <NuxtLink :to="`/objects/${entry.id}`"
-                class="text-aruna-highlight font-bold">
-        <h3>{{ entry.name }}</h3>
-      </NuxtLink>
+      <!-- Name and ID display -->
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <NuxtLink :to="`/objects/${resource.id}`"
+                      class="text-aruna-highlight font-bold">
+              <h3>{{ resource.name }}</h3>
+            </NuxtLink>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{{ resource.id }}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
 
-      <NuxtLink :to="`/objects/${entry.id}`"
-                class="text-sm text-aruna-text-accent font-bold">
-        <h4>{{ entry.id }}</h4>
-      </NuxtLink>
-      <!-- END Name and ID display with links -->
+      <h4>{{ resource.type === "Resource" ? resource.variant : resource.type }}</h4>
+      <!-- END Name and ID display -->
 
       <!-- Badges -->
       <div class="flex flex-col md:flex-row mt-2 gap-x-2 gap-y-2">
         <!-- DataClass Badge -->
-        <Badge :class="cn('px-2 py-1 bg-transparent hover:bg-transparent border', dataClassCss(entry.data_class))">
-          {{ displayDataClass(entry.data_class) }}
+        <Badge :class="cn('px-2 py-1 bg-transparent hover:bg-transparent border', visibilityCss(resource.data_class))">
+          {{ displayVisbility(resource.visibility) }}
         </Badge>
         <!-- END DataClass -->
         <!-- Stats Badge -->
-        <Badge v-if="entry.variant !== v2ResourceVariant.RESOURCE_VARIANT_OBJECT"
+        <Badge v-if="resource.variant !== ResourceVariant.Object"
                class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
-          Children: {{ entry.stats.count }}
+          Children: {{ resource.count }}
         </Badge>
-        <Badge class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
-          {{ entry.stats.size ? formatBytes(+entry.stats.size) : "N/A Bytes" }}
+        <Badge v-if="resource.variant === ResourceVariant.Object"
+               class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
+          {{ resource.content_len ? formatBytes(+resource.content_len) : "N/A Bytes" }}
         </Badge>
         <!-- END Stats Badge -->
       </div>
       <!-- END Badges -->
     </div>
-
     <div class="mx-2 grow flex-col basis-2/3">
       <h4 class="text-sm my-3 uppercase text-aruna-text-accent">Description</h4>
-      <p v-if="entry.description.length > 0" class="mt-2 text-aruna-text">
-        {{ displayDescription(entry.description) }}
+      <p v-if="resource.description.length > 0" class="mt-2 text-aruna-text">
+        {{ displayDescription(resource.description) }}
       </p>
 
-      <hr v-if="entry.key_values.length > 0" class="my-4 text-aruna-text "/>
+      <hr v-if="resource.labels.length > 0" class="my-4 text-aruna-text "/>
 
       <!-- Basic Label Display -->
       <div class="flex flex-row flex-wrap">
-        <div v-for="label in entry.key_values" class="flex flex-row my-1 me-2 last:me-0">
+        <div v-for="label in resource.labels" class="flex flex-row my-1 me-2 last:me-0">
           <span
               :class="{ 'me-2 rounded-md': label.value === '' || label.value === undefined, 'rounded-l-md': label.value && label.value.length > 0 }"
               class="text-xs font-medium truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-l-md text-aruna-highlight border border-aruna-highlight">
@@ -93,6 +111,7 @@ function dataClassCss(dataClass: v2DataClass): string {
             {{ label.value }}</span>
         </div>
       </div>
+
     </div>
   </div>
 </template>