@xen-orchestra/web-core 0.36.0 → 0.37.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,229 @@
|
|
|
1
|
+
<!-- v10 -->
|
|
2
|
+
<template>
|
|
3
|
+
<li class="ui-task-item" :data-depth="depth">
|
|
4
|
+
<div class="container">
|
|
5
|
+
<div class="tree-section">
|
|
6
|
+
<div class="tree-lines">
|
|
7
|
+
<div v-for="index in depth - 1" :key="index" class="tree-line">
|
|
8
|
+
<div class="tree-line-vertical" />
|
|
9
|
+
</div>
|
|
10
|
+
</div>
|
|
11
|
+
<UiButtonIcon
|
|
12
|
+
v-if="hasSubTasks"
|
|
13
|
+
v-tooltip="expanded ? t('core.close') : t('core.open')"
|
|
14
|
+
accent="brand"
|
|
15
|
+
:icon="expanded ? 'fa:angle-down' : 'fa:angle-right'"
|
|
16
|
+
size="small"
|
|
17
|
+
:target-scale="{ x: 1.5, y: 2 }"
|
|
18
|
+
@click="emit('expand')"
|
|
19
|
+
/>
|
|
20
|
+
<div v-else class="h-space" />
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
<div class="main-content">
|
|
24
|
+
<div v-if="task.name" class="content-left">
|
|
25
|
+
<UiLink size="medium">
|
|
26
|
+
{{ task.name }}
|
|
27
|
+
</UiLink>
|
|
28
|
+
<div v-if="shouldShowInfos || hasSubTasks" class="infos">
|
|
29
|
+
<UiCounter v-if="hasSubTasks" :value="subTasksCount" accent="brand" variant="secondary" size="small" />
|
|
30
|
+
<UiInfo v-if="hasInfos" accent="info" />
|
|
31
|
+
<UiInfo v-if="hasWarnings" accent="warning" />
|
|
32
|
+
<UiInfo v-if="isError" accent="danger" />
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
<div class="content-right typo-body-regular-small">
|
|
37
|
+
<span v-if="task.end">
|
|
38
|
+
{{ `${t('task.ended')} ${end}` }}
|
|
39
|
+
</span>
|
|
40
|
+
<div class="progress">
|
|
41
|
+
<UiCircleProgressBar
|
|
42
|
+
v-if="task.progress !== undefined"
|
|
43
|
+
:accent="progressAccent"
|
|
44
|
+
size="small"
|
|
45
|
+
:value="task.progress"
|
|
46
|
+
/>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="actions">
|
|
49
|
+
<UiButtonIcon icon="fa:eye" size="medium" accent="brand" @click="emit('select')" />
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
<template v-if="hasSubTasks && expanded">
|
|
55
|
+
<UiTaskList :tasks="subTasks" :depth />
|
|
56
|
+
</template>
|
|
57
|
+
</li>
|
|
58
|
+
</template>
|
|
59
|
+
|
|
60
|
+
<script lang="ts" setup>
|
|
61
|
+
import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
|
|
62
|
+
import UiCircleProgressBar from '@core/components/ui/circle-progress-bar/UiCircleProgressBar.vue'
|
|
63
|
+
import UiCounter from '@core/components/ui/counter/UiCounter.vue'
|
|
64
|
+
import UiInfo from '@core/components/ui/info/UiInfo.vue'
|
|
65
|
+
import UiLink from '@core/components/ui/link/UiLink.vue'
|
|
66
|
+
import UiTaskList from '@core/components/ui/task-list/UiTaskList.vue'
|
|
67
|
+
import { useTimeAgo } from '@core/composables/locale-time-ago.composable.ts'
|
|
68
|
+
import { vTooltip } from '@core/directives/tooltip.directive'
|
|
69
|
+
import { logicOr } from '@vueuse/math'
|
|
70
|
+
import { computed } from 'vue'
|
|
71
|
+
import { useI18n } from 'vue-i18n'
|
|
72
|
+
|
|
73
|
+
export type Task = {
|
|
74
|
+
id: string
|
|
75
|
+
infos?: { data: unknown; message: string }[]
|
|
76
|
+
name?: string
|
|
77
|
+
progress?: number
|
|
78
|
+
end?: number
|
|
79
|
+
status: 'failure' | 'interrupted' | 'pending' | 'success'
|
|
80
|
+
tasks?: Task[]
|
|
81
|
+
warning?: { data: unknown; message: string }[]
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
const { task } = defineProps<{
|
|
85
|
+
task: Task
|
|
86
|
+
depth: number
|
|
87
|
+
expanded?: boolean
|
|
88
|
+
}>()
|
|
89
|
+
|
|
90
|
+
const emit = defineEmits<{
|
|
91
|
+
expand: []
|
|
92
|
+
select: []
|
|
93
|
+
}>()
|
|
94
|
+
|
|
95
|
+
const { t } = useI18n()
|
|
96
|
+
|
|
97
|
+
const subTasks = computed(() => task.tasks ?? [])
|
|
98
|
+
|
|
99
|
+
const subTasksCount = computed(() => subTasks.value.length)
|
|
100
|
+
|
|
101
|
+
const hasSubTasks = computed(() => subTasksCount.value > 0)
|
|
102
|
+
|
|
103
|
+
const isError = computed(() => task.status === 'failure' || task.status === 'interrupted')
|
|
104
|
+
|
|
105
|
+
const end = useTimeAgo(() => task.end ?? 0)
|
|
106
|
+
|
|
107
|
+
const hasWarnings = computed(() => task.warning && task.warning.length > 0)
|
|
108
|
+
|
|
109
|
+
const hasInfos = computed(() => task.infos && task.infos.length > 0)
|
|
110
|
+
|
|
111
|
+
const shouldShowInfos = logicOr(isError, hasWarnings, hasInfos)
|
|
112
|
+
|
|
113
|
+
const progressAccent = computed(() => (isError.value ? 'danger' : 'info'))
|
|
114
|
+
</script>
|
|
115
|
+
|
|
116
|
+
<style lang="postcss" scoped>
|
|
117
|
+
.ui-task-item {
|
|
118
|
+
&[data-depth='1']:last-child {
|
|
119
|
+
border-bottom: 0.1rem solid var(--color-neutral-border);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.container {
|
|
123
|
+
display: flex;
|
|
124
|
+
min-height: 4.8rem;
|
|
125
|
+
position: relative;
|
|
126
|
+
|
|
127
|
+
&::after {
|
|
128
|
+
content: '';
|
|
129
|
+
width: 100%;
|
|
130
|
+
position: absolute;
|
|
131
|
+
clip-path: inset(0 0 0 calc(4rem * v-bind(depth - 1)));
|
|
132
|
+
height: 0.1rem;
|
|
133
|
+
background: var(--color-neutral-border);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.tree-section {
|
|
137
|
+
display: flex;
|
|
138
|
+
align-items: center;
|
|
139
|
+
padding-left: 1.6rem;
|
|
140
|
+
gap: 0.4rem;
|
|
141
|
+
|
|
142
|
+
.tree-lines {
|
|
143
|
+
display: flex;
|
|
144
|
+
align-self: stretch;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.tree-line {
|
|
148
|
+
flex: 0 0 2.8rem;
|
|
149
|
+
display: flex;
|
|
150
|
+
align-items: center;
|
|
151
|
+
justify-content: center;
|
|
152
|
+
|
|
153
|
+
.tree-line-vertical {
|
|
154
|
+
width: 0.1rem;
|
|
155
|
+
background: var(--color-brand-txt-base);
|
|
156
|
+
height: 100%;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.h-space {
|
|
161
|
+
width: 2.4rem;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.main-content {
|
|
166
|
+
display: flex;
|
|
167
|
+
flex-direction: row;
|
|
168
|
+
flex: 1;
|
|
169
|
+
min-width: 0;
|
|
170
|
+
gap: 1.6rem;
|
|
171
|
+
padding: 0.4rem 1.6rem;
|
|
172
|
+
justify-content: space-between;
|
|
173
|
+
align-items: center;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.content-left {
|
|
177
|
+
display: flex;
|
|
178
|
+
gap: 1.6rem;
|
|
179
|
+
align-items: center;
|
|
180
|
+
flex-wrap: wrap;
|
|
181
|
+
color: var(--color-neutral-txt-secondary);
|
|
182
|
+
word-break: break-word;
|
|
183
|
+
|
|
184
|
+
.infos {
|
|
185
|
+
display: flex;
|
|
186
|
+
align-items: center;
|
|
187
|
+
gap: 0.8rem;
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.content-right {
|
|
192
|
+
display: flex;
|
|
193
|
+
align-items: center;
|
|
194
|
+
gap: 1.6rem;
|
|
195
|
+
color: var(--color-neutral-txt-secondary);
|
|
196
|
+
flex-shrink: 0;
|
|
197
|
+
|
|
198
|
+
.progress {
|
|
199
|
+
display: flex;
|
|
200
|
+
width: 4rem;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.actions {
|
|
204
|
+
display: flex;
|
|
205
|
+
gap: 1.6rem;
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
@media (max-width: 768px) {
|
|
211
|
+
.container {
|
|
212
|
+
.main-content {
|
|
213
|
+
flex-direction: column;
|
|
214
|
+
align-items: flex-start;
|
|
215
|
+
gap: 0.8rem;
|
|
216
|
+
padding: 0.8rem;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.content-right {
|
|
220
|
+
gap: 0.8rem;
|
|
221
|
+
|
|
222
|
+
.actions {
|
|
223
|
+
gap: 0.8rem;
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
</style>
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<ul>
|
|
3
|
+
<UiTaskItem
|
|
4
|
+
v-for="task of tasksItems"
|
|
5
|
+
:key="task.id"
|
|
6
|
+
:task="task.source"
|
|
7
|
+
:expanded="task.flags.expanded"
|
|
8
|
+
:depth="depth + 1"
|
|
9
|
+
@select="emit('select', task.id)"
|
|
10
|
+
@expand="task.toggleFlag('expanded')"
|
|
11
|
+
/>
|
|
12
|
+
</ul>
|
|
13
|
+
</template>
|
|
14
|
+
|
|
15
|
+
<script lang="ts" setup>
|
|
16
|
+
import UiTaskItem, { type Task } from '@core/components/ui/task-item/UiTaskItem.vue'
|
|
17
|
+
import { useCollection } from '@core/packages/collection'
|
|
18
|
+
|
|
19
|
+
const { tasks, depth = 0 } = defineProps<{
|
|
20
|
+
tasks: Task[]
|
|
21
|
+
depth?: number
|
|
22
|
+
}>()
|
|
23
|
+
|
|
24
|
+
const emit = defineEmits<{
|
|
25
|
+
select: [id: string]
|
|
26
|
+
}>()
|
|
27
|
+
|
|
28
|
+
const { items: tasksItems } = useCollection(() => tasks, {
|
|
29
|
+
flags: ['expanded'],
|
|
30
|
+
})
|
|
31
|
+
</script>
|
|
@@ -7,12 +7,7 @@
|
|
|
7
7
|
v-bind="attrs"
|
|
8
8
|
>
|
|
9
9
|
<template v-if="depth > 1">
|
|
10
|
-
<VtsTreeLine
|
|
11
|
-
v-for="i in depth - 1"
|
|
12
|
-
:key="i"
|
|
13
|
-
:half-height="(!hasToggle && i === depth - 1) || !isExpanded"
|
|
14
|
-
:right="i === depth - 1"
|
|
15
|
-
/>
|
|
10
|
+
<VtsTreeLine v-for="i in depth - 1" :key="i" />
|
|
16
11
|
</template>
|
|
17
12
|
<UiButtonIcon
|
|
18
13
|
v-if="hasToggle"
|
|
@@ -116,7 +111,6 @@ const depth = inject(IK_TREE_LIST_DEPTH, 0)
|
|
|
116
111
|
|
|
117
112
|
.h-line {
|
|
118
113
|
width: 2rem;
|
|
119
|
-
border-bottom: 0.1rem solid var(--color-brand-txt-base);
|
|
120
114
|
margin-left: -0.4rem;
|
|
121
115
|
}
|
|
122
116
|
|
package/lib/locales/en.json
CHANGED
|
@@ -222,6 +222,7 @@
|
|
|
222
222
|
"enabled": "Enabled",
|
|
223
223
|
"end-date": "End date",
|
|
224
224
|
"end-of-life": "End of life",
|
|
225
|
+
"ended": "Ended",
|
|
225
226
|
"engines-off": "Engines off, orbit stable",
|
|
226
227
|
"eol": "EOL",
|
|
227
228
|
"error": "Error | Errors",
|
|
@@ -533,17 +534,17 @@
|
|
|
533
534
|
"pools-status.unknown.tooltip": "Servers currently connecting or in an unknown state",
|
|
534
535
|
"pools-status.unreachable": "Unreachable",
|
|
535
536
|
"pools-status.unreachable.tooltip": "Configured servers that cannot be reached",
|
|
536
|
-
"power-on-host-for-console": "Power on your host to access its console",
|
|
537
|
-
"power-on-mode": "Power on mode",
|
|
538
|
-
"power-on-vm-for-console": "Power on your VM to access its console",
|
|
539
|
-
"power-state": "Power state",
|
|
540
537
|
"popup-first-connection-default-interface": "From now on, this new version will be your default interface. If you prefer to keep XO 5 as your default for now, you can {documentationLink} to do so.",
|
|
541
538
|
"popup-first-connection-early-release": "Please note that this is an early release of an ongoing project. You’ll notice that some familiar pages from XO 5 are not yet available and that most features are currently read-only.",
|
|
539
|
+
"popup-first-connection-feedback": "Before we move forward, we’d love to hear your {feedbackLink} on the current state of XO 6. You can switch back to the previous version anytime by clicking the “XO 5” link in the top-right corner of any page.",
|
|
542
540
|
"popup-first-connection-feedback-and-impressions": "feedback and impressions",
|
|
543
541
|
"popup-first-connection-follow-this-guide": "follow this guide",
|
|
544
542
|
"popup-first-connection-introduction": "We’re excited to introduce the first official release of Xen Orchestra 6.",
|
|
545
543
|
"popup-first-connection-upcoming-release": "In the upcoming releases, we’ll be adding actions on all objects, user management, backup features, and much more. We hope you’ll enjoy exploring this brand-new interface!",
|
|
546
|
-
"
|
|
544
|
+
"power-on-host-for-console": "Power on your host to access its console",
|
|
545
|
+
"power-on-mode": "Power on mode",
|
|
546
|
+
"power-on-vm-for-console": "Power on your VM to access its console",
|
|
547
|
+
"power-state": "Power state",
|
|
547
548
|
"pro-support": "{name} pro support",
|
|
548
549
|
"professional-support": "Professional support",
|
|
549
550
|
"properties": "Properties",
|
|
@@ -676,9 +677,10 @@
|
|
|
676
677
|
"table-actions": "Table actions",
|
|
677
678
|
"tags": "Tags",
|
|
678
679
|
"task": "Task",
|
|
680
|
+
"task.ended": "@:ended",
|
|
679
681
|
"task.estimated-end": "Estimated end",
|
|
680
682
|
"task.progress": "Progress",
|
|
681
|
-
"task.started": "
|
|
683
|
+
"task.started": "@:started",
|
|
682
684
|
"tasks": "Tasks",
|
|
683
685
|
"tasks.n-subtasks": "{n} subtask | {n} subtasks",
|
|
684
686
|
"tasks.no-tasks": "No tasks",
|
package/lib/locales/fr.json
CHANGED
|
@@ -222,6 +222,7 @@
|
|
|
222
222
|
"enabled": "Activé",
|
|
223
223
|
"end-date": "Date de fin",
|
|
224
224
|
"end-of-life": "Fin de vie",
|
|
225
|
+
"ended": "Terminé",
|
|
225
226
|
"engines-off": "Moteurs arrêtés, orbite stable",
|
|
226
227
|
"eol": "EOL",
|
|
227
228
|
"error": "Erreur | Erreurs",
|
|
@@ -533,17 +534,17 @@
|
|
|
533
534
|
"pools-status.unknown.tooltip": "Serveurs en cours de connexion ou dans un état inconnu",
|
|
534
535
|
"pools-status.unreachable": "Injoignables",
|
|
535
536
|
"pools-status.unreachable.tooltip": "Serveurs configurés mais non joignables",
|
|
536
|
-
"power-on-host-for-console": "Allumez votre hôte pour accéder à sa console",
|
|
537
|
-
"power-on-mode": "Mode d'alimentation",
|
|
538
|
-
"power-on-vm-for-console": "Allumez votre VM pour accéder à sa console",
|
|
539
|
-
"power-state": "État d'alimentation",
|
|
540
537
|
"popup-first-connection-default-interface": "Désormais, cette nouvelle version sera votre interface par défaut. Si vous préférez conserver XO 5 comme version par défaut pour le moment, vous pouvez {documentationLink}.",
|
|
541
538
|
"popup-first-connection-early-release": "Veuillez noter qu’il s’agit d’une version préliminaire d’un projet en cours. Vous constaterez que certaines pages familières de XO 5 ne sont pas encore disponibles et que la plupart des fonctionnalités sont actuellement en lecture seule.",
|
|
539
|
+
"popup-first-connection-feedback": "Avant de poursuivre, nous aimerions recueillir vos {feedbackLink} sur l’état actuel de XO 6. Vous pouvez revenir à la version précédente à tout moment en cliquant sur le lien « XO 5 » en haut à droite de n’importe quelle page.",
|
|
542
540
|
"popup-first-connection-feedback-and-impressions": "retours et impressions",
|
|
543
541
|
"popup-first-connection-follow-this-guide": "suivre ce guide",
|
|
544
542
|
"popup-first-connection-introduction": "Nous sommes ravis de vous présenter la première version officielle de Xen Orchestra 6.",
|
|
545
543
|
"popup-first-connection-upcoming-release": "Dans les prochaines versions, nous ajouterons des actions sur tous les objets, la gestion des utilisateurs, des fonctionnalités de sauvegarde et bien plus encore. Nous espérons que vous apprécierez découvrir cette toute nouvelle interface !",
|
|
546
|
-
"
|
|
544
|
+
"power-on-host-for-console": "Allumez votre hôte pour accéder à sa console",
|
|
545
|
+
"power-on-mode": "Mode d'alimentation",
|
|
546
|
+
"power-on-vm-for-console": "Allumez votre VM pour accéder à sa console",
|
|
547
|
+
"power-state": "État d'alimentation",
|
|
547
548
|
"pro-support": "Support pro {name}",
|
|
548
549
|
"professional-support": "Support professionnel",
|
|
549
550
|
"properties": "Propriétés",
|
|
@@ -676,9 +677,10 @@
|
|
|
676
677
|
"table-actions": "Actions du tableau",
|
|
677
678
|
"tags": "Tags",
|
|
678
679
|
"task": "Tâche",
|
|
680
|
+
"task.ended": "Terminée",
|
|
679
681
|
"task.estimated-end": "Fin estimée",
|
|
680
682
|
"task.progress": "Progression",
|
|
681
|
-
"task.started": "
|
|
683
|
+
"task.started": "Démarrée",
|
|
682
684
|
"tasks": "Tâches",
|
|
683
685
|
"tasks.n-subtasks": "{n} sous-tâche | {n} sous-tâches",
|
|
684
686
|
"tasks.no-tasks": "Aucune tâche",
|