blob: 6881b6903da9cb647b8e0bcb6fbd622f5184d64f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
<template>
<div>
<span class="kvm-status">{{ $t('pageKvm.status') }}: {{ status }}</span>
<b-button
v-if="isConnected"
variant="link"
type="button"
class="button-launch button-ctrl-alt-delete"
@click="sendCtrlAltDel"
>
{{ $t('pageKvm.buttonCtrlAltDelete') }}
</b-button>
<div v-show="isConnected" id="terminal" ref="panel"></div>
</div>
</template>
<script>
import RFB from '@novnc/novnc/core/rfb';
export default {
name: 'KvmConsole',
data() {
return {
rfb: null,
isConnected: false,
status: this.$t('pageKvm.connecting')
};
},
mounted() {
this.openTerminal();
},
methods: {
sendCtrlAltDel() {
this.rfb.sendCtrlAltDel();
},
openTerminal() {
const token = this.$store.getters['authentication/token'];
this.rfb = new RFB(
this.$refs.panel,
`wss://${window.location.host}/kvm/0`,
{ wsProtocols: [token] }
);
this.rfb.scaleViewport = true;
const that = this;
this.rfb.addEventListener('connect', () => {
that.isConnected = true;
that.status = this.$t('pageKvm.connected');
});
this.rfb.addEventListener('disconnect', () => {
that.status = this.$t('pageKvm.disconnected');
});
}
}
};
</script>
<style scoped lang="scss">
#terminal {
height: calc(100vh - 42px);
}
.button-ctrl-alt-delete {
float: right;
}
.kvm-status {
padding-top: $spacer / 2;
padding-left: $spacer / 4;
display: inline-block;
}
</style>
|
