@xen-orchestra/web-core 0.0.1 → 0.0.3

package/lib/components/card/CardSubtitle.vue

@@ -0,0 +1,24 @@
+<!-- v1.0 -->
+<template>
+  <div class="card-subtitle">
+    <span class="typo h7-semi-bold"><slot /></span>
+    <span v-if="$slots.info" class="typo p3-medium"><slot name="info" /></span>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineSlots<{
+  default: () => void
+  info: () => void
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.card-subtitle {
+  color: var(--color-purple-base);
+  border-bottom: 0.1rem solid var(--color-purple-base);
+  display: flex;
+  justify-content: space-between;
+  gap: 0.8rem;
+}
+</style>

package/lib/components/card/CardTitle.vue

@@ -0,0 +1,52 @@
+<!-- v1.0 -->
+<template>
+  <div class="card-title">
+    <div class="main-content">
+      <div class="title typo h6-medium"><slot /></div>
+
+      <div v-if="$slots.info" class="info typo h7-semi-bold"><slot name="info" /></div>
+    </div>
+    <p v-if="$slots.description" class="description typo p3-regular">
+      <slot name="description" />
+    </p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineSlots<{
+  default: () => void
+  info: () => void
+  description: () => void
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.card-title {
+  display: flex;
+  flex-direction: column;
+}
+
+.main-content {
+  display: flex;
+  gap: 1.6rem;
+  align-items: center;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: 1.6rem;
+}
+
+.info {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  color: var(--color-purple-base);
+}
+
+.description {
+  color: var(--color-grey-300);
+}
+</style>

package/lib/components/chip/UiChip.vue

@@ -25,8 +25,8 @@ withDefaults(
 )
 
 const emit = defineEmits<{
-  (event: 'edit'): void
-  (event: 'remove'): void
+  edit: []
+  remove: []
 }>()
 </script>
 

package/lib/components/console/RemoteConsole.vue

@@ -0,0 +1,119 @@
+<template>
+  <div :class="uiStore.isMobile ? 'mobile' : undefined" class="remote-console">
+    <div ref="consoleContainer" class="console" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useUiStore } from '@core/stores/ui.store'
+import VncClient from '@novnc/novnc/core/rfb'
+import { promiseTimeout } from '@vueuse/shared'
+import { fibonacci } from 'iterable-backoff'
+import { onBeforeUnmount, ref, watchEffect } from 'vue'
+
+const props = defineProps<{
+  url: URL
+}>()
+
+const N_TOTAL_TRIES = 8
+const FIBONACCI_MS_ARRAY: number[] = Array.from(fibonacci().toMs().take(N_TOTAL_TRIES))
+
+const consoleContainer = ref<HTMLDivElement | null>(null)
+
+let vncClient: VncClient | undefined
+let nConnectionAttempts = 0
+
+const handleDisconnectionEvent = () => {
+  clearVncClient()
+
+  nConnectionAttempts++
+
+  if (nConnectionAttempts > N_TOTAL_TRIES) {
+    console.error('The number of reconnection attempts has been exceeded for:', props.url)
+    return
+  }
+
+  console.error(
+    `Connection lost for the remote console: ${props.url}. New attempt in ${
+      FIBONACCI_MS_ARRAY[nConnectionAttempts - 1]
+    }ms`
+  )
+  createVncConnection()
+}
+
+const handleConnectionEvent = () => (nConnectionAttempts = 0)
+
+const clearVncClient = () => {
+  if (vncClient === undefined) {
+    return
+  }
+
+  vncClient.removeEventListener('disconnect', handleDisconnectionEvent)
+  vncClient.removeEventListener('connect', handleConnectionEvent)
+  vncClient.disconnect()
+
+  vncClient = undefined
+}
+
+const createVncConnection = async () => {
+  if (nConnectionAttempts !== 0) {
+    await promiseTimeout(FIBONACCI_MS_ARRAY[nConnectionAttempts - 1])
+
+    if (vncClient !== undefined) {
+      // New VNC Client may have been created in the meantime
+      return
+    }
+  }
+
+  vncClient = new VncClient(consoleContainer.value!, props.url.toString(), {
+    wsProtocols: ['binary'],
+  })
+  vncClient.scaleViewport = true
+  vncClient.background = 'transparent'
+
+  vncClient.addEventListener('disconnect', handleDisconnectionEvent)
+  vncClient.addEventListener('connect', handleConnectionEvent)
+}
+
+watchEffect(() => {
+  if (consoleContainer.value === null) {
+    return
+  }
+
+  nConnectionAttempts = 0
+
+  clearVncClient()
+  createVncConnection()
+})
+
+onBeforeUnmount(() => {
+  clearVncClient()
+})
+
+const uiStore = useUiStore()
+</script>
+
+<style lang="postcss" scoped>
+.remote-console {
+  --padding: 0.8rem;
+  --height: 80rem;
+  --width: 100%;
+
+  &.mobile {
+    --padding: 0.8rem 0;
+    --height: 100%;
+    --width: 95vw;
+  }
+}
+
+.remote-console {
+  padding: var(--padding);
+  height: var(--height);
+  width: var(--width);
+  max-width: 100%;
+}
+
+.console {
+  height: 100%;
+}
+</style>

package/lib/components/dropdown/DropdownTitle.vue

@@ -9,8 +9,12 @@
       <slot />
     </div>
     <div v-if="onToggleSelectAll" class="buttons">
-      <span v-if="selected !== 'all'" @click="emit('toggleSelectAll', true)">Select all</span>
-      <span v-if="selected !== 'none'" @click="emit('toggleSelectAll', false)">Deselect all</span>
+      <span v-if="selected !== 'all'" @click="emit('toggleSelectAll', true)">
+        {{ $t('core.select.all') }}
+      </span>
+      <span v-if="selected !== 'none'" @click="emit('toggleSelectAll', false)">
+        {{ $t('core.select.none') }}
+      </span>
     </div>
   </div>
 </template>
@@ -29,7 +33,7 @@ withDefaults(
 )
 
 const emit = defineEmits<{
-  (event: 'toggleSelectAll', value: boolean): void
+  toggleSelectAll: [value: boolean]
 }>()
 </script>
 

package/lib/components/icon/VmIcon.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script lang="ts" setup>
-import PowerStateIcon from '@core/components/PowerStateIcon.vue'
 import UiIcon from '@core/components/icon/UiIcon.vue'
+import PowerStateIcon from '@core/components/PowerStateIcon.vue'
 import type { POWER_STATE } from '@core/types/power-state.type'
 import { faDisplay } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome'

package/lib/components/menu/MenuItem.vue

@@ -25,8 +25,8 @@
 
 <script lang="ts" setup>
 import UiIcon from '@core/components/icon/UiIcon.vue'
-import MenuTrigger from '@core/components/menu/MenuTrigger.vue'
 import MenuList from '@core/components/menu/MenuList.vue'
+import MenuTrigger from '@core/components/menu/MenuTrigger.vue'
 import { useContext } from '@core/composables/context.composable'
 import { DisabledContext } from '@core/context'
 import { IK_CLOSE_MENU, IK_MENU_HORIZONTAL } from '@core/utils/injection-keys.util'

package/lib/components/menu/MenuList.vue

@@ -12,9 +12,13 @@
 import { useContext } from '@core/composables/context.composable'
 import { DisabledContext } from '@core/context'
 import { IK_CLOSE_MENU, IK_MENU_HORIZONTAL, IK_MENU_TELEPORTED } from '@core/utils/injection-keys.util'
+import { onClickOutside, unrefElement, whenever } from '@vueuse/core'
 import placementJs, { type Options } from 'placement.js'
 import { computed, inject, nextTick, provide, ref, useSlots } from 'vue'
-import { onClickOutside, unrefElement, whenever } from '@vueuse/core'
+
+defineOptions({
+  inheritAttrs: false,
+})
 
 const props = withDefaults(
   defineProps<{
@@ -26,10 +30,6 @@ const props = withDefaults(
   { disabled: undefined }
 )
 
-defineOptions({
-  inheritAttrs: false,
-})
-
 const slots = useSlots()
 const isOpen = ref(false)
 const menu = ref()

package/lib/components/stacked-bar/StackedBar.vue

@@ -0,0 +1,49 @@
+<!-- v1.0 -->
+<template>
+  <div class="stacked-bar">
+    <StackedBarSegment
+      v-for="(segment, index) in computedSegments"
+      :key="index"
+      :color="segment.color"
+      :percentage="segment.percentage"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import StackedBarSegment from '@core/components/stacked-bar/StackedBarSegment.vue'
+import type { Color } from '@core/types/color.type'
+import { computed } from 'vue'
+
+type Segment = {
+  value: number
+  color: Color
+}
+
+const props = defineProps<{
+  segments: Segment[]
+  maxValue?: number
+}>()
+
+const totalValue = computed(() => props.segments.reduce((acc, bar) => acc + bar.value, 0))
+
+const max = computed(() => Math.max(props.maxValue ?? 0, totalValue.value))
+
+const computedSegments = computed(() => {
+  return props.segments.map(segment => ({
+    ...segment,
+    percentage: (segment.value / max.value) * 100,
+  }))
+})
+</script>
+
+<style lang="postcss" scoped>
+.stacked-bar {
+  width: 100%;
+  display: flex;
+  height: 4rem;
+  border-radius: 0.8rem;
+  overflow: hidden;
+  background-color: var(--background-color-purple-10);
+}
+</style>

package/lib/components/stacked-bar/StackedBarSegment.vue

@@ -0,0 +1,73 @@
+<template>
+  <div
+    v-tooltip="{ selector: '.ellipsis' }"
+    :class="color"
+    :style="{ width: percentage + '%' }"
+    class="stacked-bar-segment typo c4-semi-bold"
+  >
+    <div ref="ellipsisElement" :class="{ hidden }" class="ellipsis">
+      {{ $n(percentage / 100, 'percent') }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { Color } from '@core/types/color.type'
+import { hasEllipsis } from '@core/utils/has-ellipsis.util'
+import { useResizeObserver } from '@vueuse/core'
+import { ref } from 'vue'
+
+defineProps<{
+  color: Color
+  percentage: number
+}>()
+
+const hidden = ref(false)
+const ellipsisElement = ref<HTMLElement | null>(null)
+
+useResizeObserver(ellipsisElement, ([entry]) => {
+  hidden.value = hasEllipsis(entry.target)
+})
+</script>
+
+<style lang="postcss" scoped>
+/* COLOR VARIANT */
+.stacked-bar-segment {
+  &.info {
+    --background-color: var(--color-purple-base);
+  }
+
+  &.success {
+    --background-color: var(--color-green-base);
+  }
+
+  &.warning {
+    --background-color: var(--color-orange-base);
+  }
+
+  &.error {
+    --background-color: var(--color-red-base);
+  }
+}
+
+/* IMPLEMENTATION */
+.stacked-bar-segment {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+  color: var(--color-grey-600);
+  background-color: var(--background-color);
+}
+
+.ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.hidden {
+  visibility: hidden;
+}
+</style>

package/lib/components/state-hero/ComingSoonHero.vue

@@ -0,0 +1,9 @@
+<template>
+  <StateHero image="under-construction" class="coming-soon-hero">
+    {{ $t('coming-soon') }}
+  </StateHero>
+</template>
+
+<script lang="ts" setup>
+import StateHero from '@core/components/state-hero/StateHero.vue'
+</script>

package/lib/components/state-hero/LoadingHero.vue

@@ -0,0 +1,9 @@
+<template>
+  <StateHero busy class="loading-hero">
+    {{ $t('loading-in-progress') }}
+  </StateHero>
+</template>
+
+<script lang="ts" setup>
+import StateHero from '@core/components/state-hero/StateHero.vue'
+</script>

package/lib/components/state-hero/ObjectNotFoundHero.vue

@@ -0,0 +1,13 @@
+<template>
+  <StateHero image="no-result" class="object-not-found-hero">
+    {{ $t('object-not-found', { id }) }}
+  </StateHero>
+</template>
+
+<script lang="ts" setup>
+import StateHero from '@core/components/state-hero/StateHero.vue'
+
+defineProps<{
+  id: string
+}>()
+</script>

package/lib/components/state-hero/StateHero.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="state-hero">
+    <UiSpinner v-if="busy" class="spinner" />
+    <img v-else-if="imageSrc" :src="imageSrc" alt="" class="image" />
+    <p v-if="$slots.default" class="typo h2-black text">
+      <slot />
+    </p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UiSpinner from '@core/components/UiSpinner.vue'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  busy?: boolean
+  image?: 'no-result' | 'under-construction' // TODO: 'offline' | 'no-data' |  'not-found' | 'all-good' | 'all-done' | 'error'
+}>()
+
+const imageSrc = computed(() => {
+  try {
+    return new URL(`../../assets/${props.image}.svg`, import.meta.url).href
+  } catch {
+    return undefined
+  }
+})
+</script>
+
+<style lang="postcss" scoped>
+.state-hero {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4.2rem;
+}
+
+.image {
+  width: 90%;
+  max-width: 55rem;
+}
+
+.spinner {
+  color: var(--color-purple-base);
+  font-size: 10rem;
+}
+
+.text {
+  color: var(--color-purple-base);
+  margin-top: 4rem;
+}
+</style>

package/lib/components/table/ColumnTitle.vue

@@ -0,0 +1,150 @@
+<!-- v1.0 -->
+<template>
+  <MenuList :disabled placement="bottom-start" shadow>
+    <template #trigger="{ open, isOpen }">
+      <th
+        :class="{ interactive, disabled, focus: isOpen }"
+        class="column-header"
+        @click="ev => (interactive ? open(ev) : noop())"
+      >
+        <div class="content">
+          <span class="label">
+            <UiIcon :icon />
+            <slot />
+          </span>
+          <UiIcon :icon="currentInteraction?.icon" />
+        </div>
+      </th>
+    </template>
+    <MenuItem
+      v-for="interaction in interactions"
+      :key="interaction.id"
+      v-tooltip="$t('coming-soon')"
+      :disabled="interaction.disabled"
+      :on-click="() => updateInteraction(interaction)"
+    >
+      <UiIcon :icon="interaction.icon" />{{ interaction.label }}
+      <i v-if="currentInteraction?.id === interaction.id" class="current-interaction typo p3-regular-italic">
+        {{ $t('core.current').toLowerCase() }}
+      </i>
+    </MenuItem>
+  </MenuList>
+</template>
+
+<script lang="ts" setup>
+import UiIcon from '@core/components/icon/UiIcon.vue'
+import MenuItem from '@core/components/menu/MenuItem.vue'
+import MenuList from '@core/components/menu/MenuList.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { faArrowDown, faArrowUp, faEyeSlash, faFilter, faLayerGroup } from '@fortawesome/free-solid-svg-icons'
+import { noop } from '@vueuse/core'
+import { computed, inject } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+type InteractionId = 'sort-asc' | 'sort-desc' | 'group' | 'filter' | 'hide'
+type Interaction = {
+  disabled?: boolean
+  id: InteractionId
+  icon: IconDefinition
+  label: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    icon?: IconDefinition
+    interactive?: boolean
+    disabled?: boolean
+  }>(),
+  {
+    disabled: false,
+    interactive: true,
+  }
+)
+const { t } = useI18n()
+const router = useRouter()
+
+const interactions = computed<Interaction[]>(() => [
+  { id: 'sort-asc', icon: faArrowDown, label: t('core.sort.ascending'), disabled: true },
+  { id: 'sort-desc', icon: faArrowUp, label: t('core.sort.descending'), disabled: true },
+  { id: 'group', icon: faLayerGroup, label: t('core.group'), disabled: true },
+  { id: 'filter', icon: faFilter, label: t('core.filter'), disabled: true },
+  { id: 'hide', icon: faEyeSlash, label: t('core.hide'), disabled: true },
+])
+
+const tableName = inject<string>('tableName')
+
+const currentInteraction = computed(() =>
+  interactions.value.find(interaction => router.currentRoute.value.query[columnName] === interaction.id)
+)
+
+const columnName = `${tableName}__${props.id}`
+
+const updateInteraction = (interaction: Interaction) => {
+  router.replace({
+    query: {
+      [columnName]: interaction.id,
+    },
+  })
+}
+</script>
+
+<style lang="postcss" scoped>
+/* COLOR VARIANTS */
+.column-header.interactive {
+  --color: var(--color-purple-base);
+  --background-color: var(--background-color-primary);
+
+  &.focus {
+    --color: var(--color-purple-base);
+    --background-color: var(--background-color-purple-10);
+  }
+
+  &:hover {
+    --color: var(--color-purple-d20);
+    --background-color: var(--background-color-purple-20);
+  }
+
+  &:active {
+    --color: var(--color-purple-d40);
+    --background-color: var(--background-color-purple-30);
+  }
+
+  &.disabled {
+    --color: var(--color-grey-400);
+    --background-color: var(--background-color-secondary);
+  }
+}
+/* IMPLEMENTATION */
+.column-header.interactive {
+  cursor: pointer;
+  color: var(--color);
+  background-color: var(--background-color);
+  &.disabled {
+    cursor: not-allowed;
+  }
+}
+
+.current-interaction {
+  color: var(--color-grey-300);
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.label {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.filter-icon {
+  cursor: pointer;
+}
+</style>