@xen-orchestra/web-core 0.0.3 → 0.0.4

package/lib/components/task/QuickTaskButton.vue

@@ -0,0 +1,62 @@
+<template>
+  <ButtonIcon
+    ref="buttonRef"
+    v-tooltip="{ content: $t('tasks.quick-view'), placement: 'bottom-end' }"
+    :dot="hasNewTask"
+    :icon="faBarsProgress"
+    size="large"
+    @click="isPanelOpen = true"
+  />
+  <Teleport v-if="isPanelOpen" to="body">
+    <Backdrop @click="isPanelOpen = false" />
+    <QuickTaskPanel ref="panelRef" :loading :tasks />
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import Backdrop from '@core/components/backdrop/Backdrop.vue'
+import ButtonIcon from '@core/components/button/ButtonIcon.vue'
+import QuickTaskPanel from '@core/components/task/QuickTaskPanel.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { Task } from '@core/types/task.type'
+import { faBarsProgress } from '@fortawesome/free-solid-svg-icons'
+import { unrefElement, watchArray, whenever } from '@vueuse/core'
+import placementJs from 'placement.js'
+import { computed, nextTick, ref } from 'vue'
+
+const props = defineProps<{
+  tasks: Task[]
+  loading?: boolean
+}>()
+
+const ids = computed(() => props.tasks.map(task => task.id))
+
+const isPanelOpen = ref(false)
+const hasNewTask = ref(false)
+
+watchArray(ids, (_newList, _oldList, addedIds) => {
+  if (addedIds.length > 0 && !isPanelOpen.value) {
+    hasNewTask.value = true
+  }
+})
+
+const buttonRef = ref<HTMLButtonElement | null>(null)
+const panelRef = ref<HTMLDivElement | null>(null)
+
+whenever(isPanelOpen, async () => {
+  await nextTick()
+
+  const button = unrefElement(buttonRef)
+  const panel = unrefElement(panelRef)
+
+  if (!button || !panel) {
+    return
+  }
+
+  placementJs(button, panel, {
+    placement: 'bottom-end',
+  })
+
+  hasNewTask.value = false
+})
+</script>

package/lib/components/task/QuickTaskItem.vue

@@ -0,0 +1,91 @@
+<template>
+  <li class="vts-quick-task-item">
+    <div v-if="hasSubTasks" class="toggle" @click="toggleExpand()">
+      <ButtonIcon :icon="isExpanded ? faAngleDown : faAngleRight" size="small" />
+    </div>
+    <div class="content">
+      <div class="typo p1-medium">
+        {{ task.name }}
+      </div>
+      <div class="informations">
+        <div class="line-1">
+          <UiTag v-if="task.tag" color="grey">{{ task.tag }}</UiTag>
+          <div v-if="hasSubTasks" class="subtasks">
+            <UiIcon :icon="faCircleNotch" />
+            <span class="typo p4-medium">{{ $t('tasks.n-subtasks', { n: subTasksCount }) }}</span>
+          </div>
+        </div>
+        <div v-if="task.start" class="line-2 typo p4-regular">
+          {{ $d(task.start, 'datetime_short') }}
+          <template v-if="task.end">
+            <UiIcon :icon="faArrowRight" />
+            {{ $d(new Date(task.end), 'datetime_short') }}
+          </template>
+        </div>
+      </div>
+      <QuickTaskList v-if="hasSubTasks && isExpanded" :tasks="subTasks" sublist />
+    </div>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import ButtonIcon from '@core/components/button/ButtonIcon.vue'
+import UiIcon from '@core/components/icon/UiIcon.vue'
+import QuickTaskList from '@core/components/task/QuickTaskList.vue'
+import UiTag from '@core/components/UiTag.vue'
+import type { Task } from '@core/types/task.type'
+import { faAngleDown, faAngleRight, faArrowRight, faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+import { useToggle } from '@vueuse/core'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  task: Task
+}>()
+
+const [isExpanded, toggleExpand] = useToggle()
+
+const subTasks = computed(() => props.task.subtasks ?? [])
+const subTasksCount = computed(() => subTasks.value.length)
+const hasSubTasks = computed(() => subTasksCount.value > 0)
+</script>
+
+<style lang="postcss" scoped>
+.vts-quick-task-item {
+  display: flex;
+
+  &:not(:last-child) {
+    border-bottom: 0.1rem solid var(--color-grey-500);
+  }
+}
+
+.toggle {
+  padding: 0.4rem 0;
+}
+
+.content {
+  flex: 1;
+  padding: 0.4rem 0.4rem 0.4rem 0.8rem;
+}
+
+.informations {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.line-1 {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem 0.8rem;
+}
+
+.line-2 {
+  color: var(--color-grey-200);
+}
+
+.subtasks {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+</style>

package/lib/components/task/QuickTaskList.vue

@@ -0,0 +1,48 @@
+<template>
+  <ul :class="{ sublist }" class="vts-quick-task-list">
+    <li v-if="loading">
+      <div class="loading">
+        <UiSpinner />
+        <div>{{ $t('loading-in-progress') }}</div>
+      </div>
+    </li>
+    <template v-else>
+      <li v-if="tasks.length === 0" class="typo p1-medium">{{ $t('tasks.no-tasks') }}</li>
+      <QuickTaskItem v-for="task of tasks" :key="task.id" :task />
+    </template>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import QuickTaskItem from '@core/components/task/QuickTaskItem.vue'
+import UiSpinner from '@core/components/UiSpinner.vue'
+import type { Task } from '@core/types/task.type'
+
+defineProps<{
+  tasks: Task[]
+  sublist?: boolean
+  loading?: boolean
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.vts-quick-task-list {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--background-color-primary);
+  padding: 1rem 0;
+
+  &:not(.sublist) {
+    padding: 1.6rem 2rem;
+    max-height: 40rem;
+    overflow: auto;
+  }
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+</style>

package/lib/components/task/QuickTaskPanel.vue

@@ -0,0 +1,65 @@
+<template>
+  <div :class="{ mobile: isMobile }" class="vts-quick-tasks">
+    <QuickTaskTabBar
+      v-model="currentTab"
+      :failure-count="failureTasks.length"
+      :loading
+      :pending-count="pendingTasks.length"
+      :success-count="successTasks.length"
+    />
+    <QuickTaskList :loading :tasks="currentTasks" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import QuickTaskList from '@core/components/task/QuickTaskList.vue'
+import QuickTaskTabBar from '@core/components/task/QuickTaskTabBar.vue'
+import { useUiStore } from '@core/stores/ui.store'
+import type { Task, TaskTab } from '@core/types/task.type'
+import { computed, ref } from 'vue'
+
+const props = defineProps<{
+  tasks: Task[]
+  loading?: boolean
+}>()
+
+const { isMobile } = useUiStore()
+
+const currentTab = ref<TaskTab>('pending')
+
+const pendingTasks = computed(() => props.tasks.filter(task => task.status === 'pending'))
+const successTasks = computed(() => props.tasks.filter(task => task.status === 'success'))
+const failureTasks = computed(() => props.tasks.filter(task => task.status === 'failure'))
+
+const currentTasks = computed(() => {
+  switch (currentTab.value) {
+    case 'pending':
+      return pendingTasks.value
+    case 'success':
+      return successTasks.value
+    case 'failure':
+      return failureTasks.value
+    case 'all':
+      return props.tasks
+    default:
+      return []
+  }
+})
+</script>
+
+<style lang="postcss" scoped>
+.vts-quick-tasks {
+  width: fit-content;
+  min-width: 65rem;
+  border-radius: 0.8rem;
+  overflow: hidden;
+  border: 0.1rem solid var(--color-grey-500);
+  z-index: 1001;
+
+  &.mobile {
+    width: 100%;
+    min-width: 0;
+    border-radius: 0;
+  }
+}
+</style>

package/lib/components/task/QuickTaskTabBar.vue

@@ -0,0 +1,46 @@
+<template>
+  <TabList :disabled="loading">
+    <TabItem v-bind="tabs.pending.bindings">
+      {{ $t('tasks.quick-view.in-progress') }}
+      <UiCounter v-if="pendingCount !== undefined" :value="pendingCount" color="info" />
+    </TabItem>
+    <TabItem v-bind="tabs.success.bindings">
+      {{ $t('tasks.quick-view.done') }}
+      <UiCounter v-if="successCount !== undefined" :value="successCount" color="success" />
+    </TabItem>
+    <TabItem v-bind="tabs.failure.bindings">
+      {{ $t('tasks.quick-view.failed') }}
+      <UiCounter v-if="failureCount !== undefined" :value="failureCount" color="danger" />
+    </TabItem>
+    <Divider type="tab" />
+    <TabItem v-bind="tabs.all.bindings">
+      {{ $t('tasks.quick-view.all') }}
+    </TabItem>
+    <!--
+    TODO
+    <UiButton :right-icon="faAngleRight" class="see-all" level="tertiary" size="extra-small">
+      {{ $t('see-all') }}
+    </UiButton>
+    -->
+  </TabList>
+</template>
+
+<script lang="ts" setup>
+import Divider from '@core/components/divider/Divider.vue'
+import TabItem from '@core/components/tab/TabItem.vue'
+import TabList from '@core/components/tab/TabList.vue'
+import UiCounter from '@core/components/UiCounter.vue'
+import { useTabList } from '@core/composables/tab-list.composable'
+import type { TaskTab } from '@core/types/task.type'
+
+defineProps<{
+  loading?: boolean
+  pendingCount?: number
+  successCount?: number
+  failureCount?: number
+}>()
+
+const currentTab = defineModel<TaskTab>({ required: true })
+
+const { tabs } = useTabList<TaskTab>(['pending', 'success', 'failure', 'all'], currentTab)
+</script>

package/lib/components/tree/TreeItem.vue

@@ -2,22 +2,23 @@
 <template>
   <li class="tree-item">
     <slot />
-    <slot v-if="isExpanded" name="sublist" />
+    <slot v-if="expanded" name="sublist" />
   </li>
 </template>
 
 <script lang="ts" setup>
-import { IK_TREE_ITEM_EXPANDED, IK_TREE_ITEM_HAS_CHILDREN, IK_TREE_ITEM_TOGGLE } from '@core/utils/injection-keys.util'
-import { useToggle } from '@vueuse/core'
-import { onBeforeMount, onBeforeUpdate, provide, ref, useSlots } from 'vue'
+import { IK_TREE_ITEM_EXPANDED, IK_TREE_ITEM_HAS_CHILDREN } from '@core/utils/injection-keys.util'
+import { onBeforeMount, onBeforeUpdate, provide, ref, toRef, useSlots } from 'vue'
+
+const props = defineProps<{
+  expanded?: boolean
+}>()
 
 defineSlots<{
   default: () => void
   sublist: () => void
 }>()
 
-const [isExpanded, toggle] = useToggle(true)
-
 const hasChildren = ref(false)
 
 const updateHasChildren = () => {
@@ -29,6 +30,5 @@ onBeforeMount(() => updateHasChildren())
 onBeforeUpdate(() => updateHasChildren())
 
 provide(IK_TREE_ITEM_HAS_CHILDREN, hasChildren)
-provide(IK_TREE_ITEM_TOGGLE, toggle)
-provide(IK_TREE_ITEM_EXPANDED, isExpanded)
+provide(IK_TREE_ITEM_EXPANDED, toRef(props, 'expanded'))
 </script>

package/lib/components/tree/TreeItemLabel.vue

@@ -1,8 +1,8 @@
 <!-- v1.1 -->
 <template>
-  <RouterLink v-slot="{ isExactActive, href, navigate }" :to="route" custom>
+  <RouterLink v-slot="{ isExactActive, isActive, href, navigate }" :to="route" custom>
     <div
-      :class="isExactActive ? 'exact-active' : active ? 'active' : undefined"
+      :class="isExactActive ? 'exact-active' : active || isActive ? 'active' : undefined"
       class="tree-item-label"
       v-bind="$attrs"
     >
@@ -17,16 +17,17 @@
       <ButtonIcon
         v-if="hasToggle"
         v-tooltip="isExpanded ? $t('core.close') : $t('core.open')"
+        class="toggle"
         :icon="isExpanded ? faAngleDown : faAngleRight"
         size="small"
-        @click="toggle()"
+        @click="emit('toggle')"
       />
-      <TreeLine v-else-if="!noIndent" />
+      <div v-else class="h-line" />
       <a v-tooltip="{ selector: '.text' }" :href class="link typo p2-medium" @click="navigate">
         <slot name="icon">
           <UiIcon :icon class="icon" />
         </slot>
-        <div class="text">
+        <div class="text text-ellipsis">
           <slot />
         </div>
       </a>
@@ -40,12 +41,7 @@ import ButtonIcon from '@core/components/button/ButtonIcon.vue'
 import UiIcon from '@core/components/icon/UiIcon.vue'
 import TreeLine from '@core/components/tree/TreeLine.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import {
-  IK_TREE_ITEM_EXPANDED,
-  IK_TREE_ITEM_HAS_CHILDREN,
-  IK_TREE_ITEM_TOGGLE,
-  IK_TREE_LIST_DEPTH,
-} from '@core/utils/injection-keys.util'
+import { IK_TREE_ITEM_EXPANDED, IK_TREE_ITEM_HAS_CHILDREN, IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons'
 import { inject, ref } from 'vue'
@@ -59,12 +55,14 @@ defineProps<{
   icon?: IconDefinition
   route: RouteLocationRaw
   active?: boolean
-  noIndent?: boolean
+}>()
+
+const emit = defineEmits<{
+  toggle: []
 }>()
 
 const hasToggle = inject(IK_TREE_ITEM_HAS_CHILDREN, ref(false))
 
-const toggle = inject(IK_TREE_ITEM_TOGGLE, () => undefined)
 const isExpanded = inject(IK_TREE_ITEM_EXPANDED, ref(true))
 
 const depth = inject(IK_TREE_LIST_DEPTH, 0)
@@ -120,13 +118,27 @@ const depth = inject(IK_TREE_LIST_DEPTH, 0)
 }
 
 .text {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   padding-inline-end: 0.4rem;
 }
 
 .icon {
   font-size: 1.6rem;
 }
+
+.h-line {
+  width: 2rem;
+  border-bottom: 0.1rem solid var(--color-purple-base);
+  margin-left: -0.4rem;
+}
+
+/*
+ * Increase the size of the clickable area,
+ * without changing the padding of the ButtonIcon component
+ */
+.toggle::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: scale(1.5, 2);
+}
 </style>

package/lib/composables/tab-list.composable.ts

@@ -0,0 +1,33 @@
+import type { Tab, TabList } from '@core/types/tab.type'
+import { computed, type MaybeRefOrGetter, type Ref, toRef } from 'vue'
+
+export function useTabList<TName extends string>(names: TName[], initialTab?: MaybeRefOrGetter<TName>) {
+  const currentTab = toRef(initialTab) as Ref<TName | undefined>
+
+  const activate = (name: TName | undefined) => {
+    currentTab.value = name
+  }
+
+  const isActive = (name: TName) => currentTab.value === name
+
+  const tabs = computed(() => {
+    return Object.fromEntries(
+      names.map(name => [
+        name,
+        {
+          isActive: isActive(name),
+          activate: () => activate(name),
+          bindings: {
+            onClick: (event: MouseEvent) => {
+              event.preventDefault()
+              activate(name)
+            },
+            active: isActive(name),
+          },
+        },
+      ])
+    ) as Record<TName, Tab>
+  })
+
+  return { currentTab, activate, isActive, tabs } as TabList<TName>
+}

package/lib/composables/tree/branch.ts

@@ -40,7 +40,11 @@ export class Branch<
   }
 
   get failsFilterDownwards(): boolean {
-    return this.passesFilter !== true && this.rawChildren.every(child => child.failsFilterDownwards)
+    if (this.passesFilter !== undefined) {
+      return !this.passesFilter
+    }
+
+    return this.rawChildren.length > 0 && this.rawChildren.every(child => child.failsFilterDownwards)
   }
 
   get isExcluded() {
@@ -48,10 +52,6 @@ export class Branch<
       return true
     }
 
-    if (!this.hasChildren) {
-      return true
-    }
-
     if (this.passesFilterUpwards || this.passesFilterDownwards) {
       return false
     }

package/lib/i18n.ts

@@ -21,6 +21,10 @@ export const locales: Locales = {
     code: 'de',
     name: 'Deutsch',
   },
+  fa: {
+    code: 'fa',
+    name: 'Persian',
+  },
 }
 
 export default createI18n({
@@ -163,6 +167,48 @@ export default createI18n({
         minute: '2-digit',
       },
     },
+    fa: {
+      date_short: {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+      },
+      date_medium: {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      },
+      date_long: {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      },
+      datetime_short: {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+      datetime_medium: {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+      datetime_long: {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+      time: {
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+    },
   },
   numberFormats: {
     en: {
@@ -186,5 +232,12 @@ export default createI18n({
         maximumFractionDigits: 2,
       },
     },
+    fa: {
+      percent: {
+        style: 'percent',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2,
+      },
+    },
   },
 })

package/lib/layouts/CoreLayout.vue

@@ -14,11 +14,7 @@
       <slot name="app-header" />
     </header>
     <div class="container">
-      <div
-        v-if="sidebarStore.isExpanded && !sidebarStore.isLocked"
-        class="sidebar-close-backdrop"
-        @click="sidebarStore.toggleExpand(false)"
-      />
+      <Backdrop v-if="sidebarStore.isExpanded && !sidebarStore.isLocked" @click="sidebarStore.toggleExpand(false)" />
       <LayoutSidebar class="sidebar">
         <template #header>
           <slot name="sidebar-header" />
@@ -38,6 +34,7 @@
 </template>
 
 <script lang="ts" setup>
+import Backdrop from '@core/components/backdrop/Backdrop.vue'
 import UiButtonIcon from '@core/components/button/ButtonIcon.vue'
 import LayoutSidebar from '@core/components/layout/LayoutSidebar.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
@@ -48,12 +45,6 @@ const sidebarStore = useSidebarStore()
 </script>
 
 <style lang="postcss" scoped>
-.sidebar-close-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-}
-
 .core-layout {
   display: flex;
   height: 100dvh;

package/lib/locales/de.json

@@ -19,9 +19,11 @@
 
   "dashboard": "Dashboard",
   "documentation-name": "{name} Dokumentation",
+  "hosts": "Hosts",
   "loading-in-progress": "Ladevorgang läuft…",
   "log-out": "Abmelden",
   "master": "Primärer Host",
+  "n-vms": "1 VM | {n} VMs",
   "network": "Netzwerk",
   "object-not-found": "Objekt {id} wurde nicht gefunden…",
   "power-on-for-console": "Konsole ist nach Start der VM verfügbar",
@@ -29,5 +31,9 @@
   "storage": "Speicher",
   "support-name": "{name} pro support",
   "system": "System",
-  "tasks": "Aufgaben"
+
+  "tasks": "Aufgaben",
+  "tasks.quick-view": "Schnellansicht der Aufgaben",
+
+  "vms": "VMs"
 }

package/lib/locales/en.json

@@ -8,6 +8,8 @@
   "coming-soon": "Coming soon!",
   "console": "Console",
 
+  "core.copied": "Copied",
+  "core.copy-id": "Copy ID",
   "core.close": "Close",
   "core.current": "Current",
   "core.filter": "Filter",
@@ -16,6 +18,12 @@
   "core.open": "Open",
   "core.quick-actions": "Quick actions",
 
+  "core.search": "Search",
+
+  "core.search-bar.label": "Search Engine",
+  "core.search-bar.placeholder": "Write your query…",
+  "core.search-bar.use-query-builder": "Use query builder",
+
   "core.select.all": "Select all",
   "core.select.none": "Select none",
 
@@ -33,15 +41,28 @@
 
   "dashboard": "Dashboard",
   "documentation-name": "{name} documentation",
+  "hosts": "Hosts",
   "loading-in-progress": "Loading in progress…",
   "log-out": "Log out",
   "master": "Primary host",
+  "n-vms": "1 VM | {n} VMs",
   "network": "Network",
   "object-not-found": "Object {id} can't be found…",
   "power-on-for-console": "Power on your VM to access its console",
+  "see-all": "See all",
   "stats": "Stats",
   "storage": "Storage",
   "support-name": "{name} pro support",
   "system": "System",
-  "tasks": "Tasks"
+
+  "tasks": "Tasks",
+  "tasks.n-subtasks": "{n} subtask | {n} subtasks",
+  "tasks.no-tasks": "No tasks",
+  "tasks.quick-view": "Tasks' quick view",
+  "tasks.quick-view.all": "All",
+  "tasks.quick-view.done": "Done",
+  "tasks.quick-view.failed": "Failed",
+  "tasks.quick-view.in-progress": "In progress",
+
+  "vms": "VMs"
 }