feat(lite): add new UiStatusPanel component (#7227)

@xen-orchestra/lite/CHANGELOG.md

@@ -6,6 +6,7 @@
 - Ability to override host address with `master` URL query param (PR [#7187](https://github.com/vatesfr/xen-orchestra/pull/7187))
 - Added tooltip on CPU provisioning warning icon (PR [#7223](https://github.com/vatesfr/xen-orchestra/pull/7223))
 - Add indeterminate state on FormToggle component (PR [#7230](https://github.com/vatesfr/xen-orchestra/pull/7230))
+- Add new UiStatusPanel component (PR [#7227](https://github.com/vatesfr/xen-orchestra/pull/7227))
 
 ## **0.1.6** (2023-11-30)
 

@xen-orchestra/lite/src/components/PageUnderConstruction.vue

@@ -1,49 +1,28 @@
 <template>
-  <div class="page-under-construction">
-    <img alt="Under construction" src="@/assets/under-construction.svg" />
-    <p class="title">{{ $t("xo-lite-under-construction") }}</p>
-    <p class="subtitle">{{ $t("new-features-are-coming") }}</p>
+  <UiStatusPanel
+    :image-source="underConstruction"
+    :subtitle="$t('new-features-are-coming')"
+    :title="$t('xo-lite-under-construction')"
+  >
     <p class="contact">
       {{ $t("do-you-have-needs") }}
       <a
         href="https://xcp-ng.org/forum/topic/5018/xo-lite-building-an-embedded-ui-in-xcp-ng"
-        target="_blank"
         rel="noopener noreferrer"
+        target="_blank"
       >
         {{ $t("here") }} →
       </a>
     </p>
-  </div>
+  </UiStatusPanel>
 </template>
 
+<script lang="ts" setup>
+import underConstruction from "@/assets/under-construction.svg";
+import UiStatusPanel from "@/components/ui/UiStatusPanel.vue";
+</script>
+
 <style lang="postcss" scoped>
-.page-under-construction {
-  width: 100%;
-  min-height: 76.5vh;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-extra-blue-base);
-}
-
-img {
-  margin-bottom: 40px;
-  width: 30%;
-}
-.title {
-  font-weight: 400;
-  font-size: 36px;
-  text-align: center;
-}
-
-.subtitle {
-  font-weight: 500;
-  font-size: 24px;
-  margin: 21px 0;
-  text-align: center;
-}
 .contact {
   font-weight: 400;
   font-size: 20px;

@xen-orchestra/lite/src/components/ui/UiStatusPanel.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="ui-status-panel">
+    <img :src="imageSource" alt="" class="image" />
+    <p v-if="title !== undefined" class="title">{{ title }}</p>
+    <p v-if="subtitle !== undefined" class="subtitle">{{ subtitle }}</p>
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  imageSource: string;
+  title?: string;
+  subtitle?: string;
+}>();
+</script>
+
+<style lang="postcss" scoped>
+.ui-status-panel {
+  width: 100%;
+  min-height: 76.5vh;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-extra-blue-base);
+}
+
+.title {
+  font-weight: 400;
+  font-size: 36px;
+  text-align: center;
+}
+
+.subtitle {
+  font-weight: 500;
+  font-size: 24px;
+  margin: 21px 0;
+  text-align: center;
+}
+
+.image {
+  margin-bottom: 40px;
+  width: 30%;
+}
+</style>

@xen-orchestra/lite/src/views/vm/VmConsoleView.vue

@@ -2,16 +2,17 @@
   <div :class="{ 'no-ui': !uiStore.hasUi }" class="vm-console-view">
     <div v-if="hasError">{{ $t("error-occurred") }}</div>
     <UiSpinner v-else-if="!isReady" class="spinner" />
-    <div v-else-if="!isVmRunning" class="not-running">
-      <div><img alt="" src="@/assets/monitor.svg" /></div>
-      {{ $t("power-on-for-console") }}
-    </div>
+    <UiStatusPanel
+      v-else-if="!isVmRunning"
+      :image-source="monitor"
+      :title="$t('power-on-for-console')"
+    />
     <template v-else-if="vm && vmConsole">
       <AppMenu horizontal>
         <MenuItem
+          v-if="uiStore.hasUi"
           :icon="faArrowUpRightFromSquare"
           @click="openInNewTab"
-          v-if="uiStore.hasUi"
         >
           {{ $t("open-console-in-new-tab") }}
         </MenuItem>
@@ -44,10 +45,12 @@
 </template>
 
 <script lang="ts" setup>
+import monitor from "@/assets/monitor.svg";
 import AppMenu from "@/components/menu/AppMenu.vue";
 import MenuItem from "@/components/menu/MenuItem.vue";
 import RemoteConsole from "@/components/RemoteConsole.vue";
 import UiSpinner from "@/components/ui/UiSpinner.vue";
+import UiStatusPanel from "@/components/ui/UiStatusPanel.vue";
 import { VM_OPERATION, VM_POWER_STATE } from "@/libs/xen-api/xen-api.enums";
 import type { XenApiVm } from "@/libs/xen-api/xen-api.types";
 import { usePageTitleStore } from "@/stores/page-title.store";
@@ -158,7 +161,6 @@ const openInNewTab = () => {
   height: 100%;
 }
 
-.not-running,
 .not-available {
   display: flex;
   align-items: center;