mnl/VM-Operator
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 4 Wiki Activity Actions

Add busy spinner.
Some checks failed
Java CI with Gradle / build (push) Has been cancelled
Details

Browse source
This commit is contained in:
Michael Lipp 2024-06-09 22:40:03 +02:00
parent 4d5b6a58b7
commit b2e218c616
2 changed files with 46 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

60
org.jdrupes.vmoperator.vmviewer/src/org/jdrupes/vmoperator/vmviewer/browser/VmViewer-functions.ts
View file

@ -64,7 +64,16 @@ window.orgJDrupesVmOperatorVmViewer.initPreview = (previewDom: HTMLElement,
vmName: "",
vmDefinition: {}
});
const vmDef = computed(() => previewApi.vmDefinition);
const configured = computed(() => previewApi.vmDefinition.spec);
const startable = computed(() => previewApi.vmDefinition.spec &&
previewApi.vmDefinition.spec.vm.state !== 'Running'
&& !previewApi.vmDefinition.running);
const stoppable = computed(() => previewApi.vmDefinition.spec &&
previewApi.vmDefinition.spec.vm.state !== 'Stopped'
&& previewApi.vmDefinition.running);
const running = computed(() => previewApi.vmDefinition.running);
const permissions = computed(() => previewApi.vmDefinition.spec
? previewApi.vmDefinition.userPermissions : []);
watch(() => previewApi.vmName, (name: string) => {
if (name !== "") {
@ -74,51 +83,50 @@ window.orgJDrupesVmOperatorVmViewer.initPreview = (previewDom: HTMLElement,
provideApi(previewDom, previewApi);
const vmAction = (vmName: string, action: string) => {
const vmAction = (action: string) => {
JGConsole.notifyConletModel(conletId, action);
};
return { localize, resourceBase, vmDef, vmAction };
return { localize, resourceBase, vmAction, configured,
startable, stoppable, running, permissions };
},
template: `
<table>
<tbody>
<tr>
<td rowspan="2"><img role=button
:aria-disabled="!vmDef.running || !vmDef.userPermissions
|| !vmDef.userPermissions.includes('accessConsole')"
v-on:click="vmAction(vmDef.name, 'openConsole')"
:src="resourceBase + (vmDef.running
? 'computer.svg' : 'computer-off.svg')"
:title="localize('Open console')"></td>
<td v-if="vmDef.spec"
class="jdrupes-vmoperator-vmviewer-preview-action-list">
<td rowspan="2" style="position: relative"><span
style="position: absolute;"
:class="{ busy: configured && !startable && !stoppable }"
><img role=button :aria-disabled="!running
|| !permissions.includes('accessConsole')"
v-on:click="vmAction('openConsole')"
:src="resourceBase + (running
? 'computer.svg' : 'computer-off.svg')"
:title="localize('Open console')"></span><span
style="visibility: hidden;"><img
:src="resourceBase + 'computer.svg'"></span></td>
<td class="jdrupes-vmoperator-vmviewer-preview-action-list">
<span role="button"
v-if="vmDef.spec.vm.state != 'Running' && !vmDef.running"
:aria-disabled="!vmDef.userPermissions.includes('start')"
:aria-disabled="!startable || !permissions.includes('start')"
tabindex="0" class="fa fa-play" :title="localize('Start VM')"
v-on:click="vmAction(vmDef.name, 'start')"></span>
<span role="button" v-else class="fa fa-play"
aria-disabled="true" :title="localize('Start VM')"></span>
v-on:click="vmAction('start')"></span>
<span role="button"
v-if="vmDef.spec.vm.state != 'Stopped' && vmDef.running"
:aria-disabled="!vmDef.userPermissions.includes('stop')"
:aria-disabled="!stoppable || !permissions.includes('stop')"
tabindex="0" class="fa fa-stop" :title="localize('Stop VM')"
v-on:click="vmAction(vmDef.name, 'stop')"></span>
<span role="button" v-else class="fa fa-stop"
aria-disabled="true" :title="localize('Stop VM')"></span>
v-on:click="vmAction('stop')"></span>
<span role="button"
:aria-disabled="!vmDef.running || !vmDef.userPermissions.includes('reset')"
:aria-disabled="!running || !permissions.includes('reset')"
tabindex="0" class="svg-icon" :title="localize('Reset VM')"
v-on:click="vmAction(vmDef.name, 'reset')">
v-on:click="vmAction('reset')">
<svg viewBox="0 0 1541.33 1535.5083">
<path d="m 0,127.9968 v 448 c 0,35 29,64 64,64 h 448 c 35,0 64,-29 64,-64 0,-17 -6.92831,-33.07213 -19,-45 C 264.23058,241.7154 337.19508,314.89599 109,82.996795 c -11.999999,-12 -28,-19 -45,-19 -35,0 -64,29 -64,64.000005 z" />
<path d="m 772.97656,1535.5046 c 117.57061,0.3623 236.06134,-26.2848 345.77544,-81.4687 292.5708,-147.1572 459.8088,-465.37411 415.5214,-790.12504 C 1489.9861,339.15993 1243.597,77.463924 922.29883,14.342498 601.00067,-48.778928 274.05699,100.37563 110.62891,384.39133 c -34.855139,60.57216 -14.006492,137.9313 46.5664,172.78516 60.57172,34.85381 137.92941,14.00532 172.78321,-46.56641 109.97944,-191.12927 327.69604,-290.34657 543.53515,-247.94336 215.83913,42.40321 380.18953,216.77543 410.00973,435.44141 29.8203,218.66598 -81.8657,430.94957 -278.4863,529.84567 -196.6206,98.8962 -432.84043,61.8202 -589.90233,-92.6777 -24.91016,-24.5038 -85.48587,-83.3326 -119.02246,-52.9832 -24.01114,21.7292 -35.41741,29.5454 -59.9209,54.4559 -24.50381,24.9102 -35.33636,36.9034 -57.54543,60.4713 -38.1335,40.4667 34.10761,93.9685 59.01808,118.472 145.96311,143.5803 339.36149,219.2087 535.3125,219.8125 z"/>
</svg>
</span>
</td>
<td v-else>
</td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>`

12
org.jdrupes.vmoperator.vmviewer/src/org/jdrupes/vmoperator/vmviewer/browser/VmViewer-style.scss
View file

@ -61,6 +61,18 @@
.jdrupes-vmoperator-vmviewer-preview-action-list {
white-space: nowrap;
}
span.busy::before {
font: normal normal normal 14px/1 ForkAwesome;
font-size: 1.125em;
content: "\f1ce";
left: 1.45em;
top: 0.7em;
color: var(--info);
position: absolute;
animation: spin 2s linear infinite;
z-index: 100;
}
}
.jdrupes-vmoperator-vmviewer.jdrupes-vmoperator-vmviewer-edit {