More Vue modernization.
This commit is contained in:
Buster Neece
parent
4b72fbe3b7
commit
7044d12377
|
|
@ -1,25 +1,23 @@
|
|||
<template>
|
||||
<b-modal size="md" id="log_view_modal" ref="modal" :title="langTitle">
|
||||
<b-modal size="md" id="log_view_modal" ref="modal" :title="$gettext('Log Viewer')">
|
||||
<pre id="modal-log-view-contents" class="form-control log-viewer"
|
||||
style="height: 300px; overflow-y: auto;">{{ lastOutput }}</pre>
|
||||
</b-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AdminBackupsLastOutputModal',
|
||||
props: {
|
||||
lastOutput: String,
|
||||
},
|
||||
computed: {
|
||||
langTitle() {
|
||||
return this.$gettext('Log Viewer');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show() {
|
||||
this.$refs.modal.show();
|
||||
}
|
||||
}
|
||||
}
|
||||
<script setup>
|
||||
import {get, templateRef} from "@vueuse/core";
|
||||
|
||||
const props = defineProps({
|
||||
lastOutput: String,
|
||||
});
|
||||
|
||||
const $modal = templateRef('modal');
|
||||
const show = () => {
|
||||
get($modal).show();
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
show
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,79 +1,85 @@
|
|||
<template>
|
||||
<b-modal size="lg" centered id="cpu_stats_help_modal" ref="modal" :title="langTitle">
|
||||
<b-modal size="lg" centered id="cpu_stats_help_modal" ref="modal" :title="$gettext('CPU Stats Help')">
|
||||
<div class="mb-2">
|
||||
<h6>
|
||||
<b-badge pill variant="danger"> </b-badge>
|
||||
<translate key="lang_steal">Steal (St)</translate>
|
||||
:
|
||||
<translate
|
||||
key="lang_steal_1">Time stolen by other virtual machines on the same physical server.</translate>
|
||||
{{ $gettext('Steal (St)') }}:
|
||||
{{ $gettext('Time stolen by other virtual machines on the same physical server.') }}
|
||||
</h6>
|
||||
<div class="ml-4">
|
||||
<p>
|
||||
<translate key="lang_steal_2">Most hosting providers will put more Virtual Machines (VPSes) on a server than the hardware can handle when each VM is running at full CPU load. This is called over-provisioning, which can lead to other VMs on the server "stealing" CPU time from your VM and vice-versa.</translate>
|
||||
{{
|
||||
$gettext('Most hosting providers will put more Virtual Machines (VPSes) on a server than the hardware can handle when each VM is running at full CPU load. This is called over-provisioning, which can lead to other VMs on the server "stealing" CPU time from your VM and vice-versa.')
|
||||
}}
|
||||
</p>
|
||||
<p>
|
||||
<translate key="lang_steal_3">To alleviate this potential problem with shared CPU resources, hosts assign "credits" to a VPS which are used up according to an algorithm based on the CPU load as well as the time over which the CPU load is generated. If your VM's assigned credit is used up, they will take CPU time from your VM and assign it to other VMs on the machine. This is seen as the "Steal" or "St" value.</translate>
|
||||
{{
|
||||
$gettext('To alleviate this potential problem with shared CPU resources, hosts assign "credits" to a VPS which are used up according to an algorithm based on the CPU load as well as the time over which the CPU load is generated. If your VM\'s assigned credit is used up, they will take CPU time from your VM and assign it to other VMs on the machine. This is seen as the "Steal" or "St" value.')
|
||||
}}
|
||||
</p>
|
||||
<p>
|
||||
<translate key="lang_steal_4">Audio transcoding applications like Liquidsoap use a consistent amount of CPU over time, which gradually drains this available credit. If you regularly see stolen CPU time, you should consider migrating to a VM that has CPU resources dedicated to your instance.</translate>
|
||||
{{
|
||||
$gettext('Audio transcoding applications like Liquidsoap use a consistent amount of CPU over time, which gradually drains this available credit. If you regularly see stolen CPU time, you should consider migrating to a VM that has CPU resources dedicated to your instance.')
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<h6>
|
||||
<b-badge pill variant="warning"> </b-badge>
|
||||
<translate key="lang_wait">Wait (Wa)</translate>
|
||||
:
|
||||
<translate key="lang_wait_1">Time spent waiting for disk I/O to be completed.</translate>
|
||||
{{ $gettext('Wait (Wa)') }}:
|
||||
{{ $gettext('Time spent waiting for disk I/O to be completed.') }}
|
||||
</h6>
|
||||
<div class="ml-4">
|
||||
<p>
|
||||
<translate key="lang_wait_2">The I/O Wait is the percentage of time that the CPU is waiting for disk access before it can continue the work that depends on the result of this.</translate>
|
||||
{{
|
||||
$gettext('The I/O Wait is the percentage of time that the CPU is waiting for disk access before it can continue the work that depends on the result of this.')
|
||||
}}
|
||||
</p>
|
||||
<p>
|
||||
<translate key="lang_wait_3">High I/O Wait can indicate a bottleneck with the server's hard disk, a potentially failing hard disk, or heavy load on the hard disk.</translate>
|
||||
{{
|
||||
$gettext('High I/O Wait can indicate a bottleneck with the server\'s hard disk, a potentially failing hard disk, or heavy load on the hard disk.')
|
||||
}}
|
||||
</p>
|
||||
<p>
|
||||
<translate key="lang_wait_4">One important note on I/O Wait is that it can indicate a bottleneck or problem but also may be completely meaningless, depending on the workload and general available resources. A constantly high I/O Wait should prompt further investigation with more sophisticated tools.</translate>
|
||||
{{
|
||||
$gettext('One important note on I/O Wait is that it can indicate a bottleneck or problem but also may be completely meaningless, depending on the workload and general available resources. A constantly high I/O Wait should prompt further investigation with more sophisticated tools.')
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<h6>
|
||||
<b-badge pill variant="primary"> </b-badge>
|
||||
<translate key="lang_use">Use (Us)</translate>
|
||||
:
|
||||
<translate key="lang_use_1">The current CPU usage including I/O Wait and Steal.</translate>
|
||||
{{ $gettext('Use (Us)') }}:
|
||||
{{ $gettext('The current CPU usage including I/O Wait and Steal.') }}
|
||||
</h6>
|
||||
</div>
|
||||
|
||||
<template #modal-footer>
|
||||
<slot name="modal-footer">
|
||||
<b-button variant="default" type="button" @click="close">
|
||||
<translate key="lang_btn_close">Close</translate>
|
||||
{{ $gettext('Close') }}
|
||||
</b-button>
|
||||
</slot>
|
||||
</template>
|
||||
</b-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import {get, templateRef} from "@vueuse/core";
|
||||
|
||||
export default {
|
||||
name: 'CpuStatsHelpModal',
|
||||
computed: {
|
||||
langTitle() {
|
||||
return this.$gettext('CPU Stats Help');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
create() {
|
||||
this.$refs.modal.show();
|
||||
},
|
||||
close() {
|
||||
this.$refs.modal.hide();
|
||||
}
|
||||
}
|
||||
};
|
||||
const $modal = templateRef('modal');
|
||||
|
||||
const create = () => {
|
||||
get($modal).show();
|
||||
}
|
||||
const close = () => {
|
||||
get($modal).hide();
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
create,
|
||||
close
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,21 @@
|
|||
<template>
|
||||
<b-modal size="lg" centered id="cpu_stats_help_modal" ref="modal" :title="langTitle">
|
||||
<b-modal size="lg" centered id="cpu_stats_help_modal" ref="modal" :title="$gettext('Memory Stats Help')">
|
||||
<div class="mb-2">
|
||||
<h6>
|
||||
<b-badge pill variant="danger"> </b-badge>
|
||||
<translate key="lang_cached">Cached</translate>
|
||||
:
|
||||
<translate
|
||||
key="lang_cached_1">The amount of memory Linux is using for disk caching.</translate>
|
||||
{{ $gettext('Cached') }}:
|
||||
{{ $gettext('The amount of memory Linux is using for disk caching.') }}
|
||||
</h6>
|
||||
<div class="ml-4">
|
||||
<p>
|
||||
<translate key="lang_cached_2">This can make it look like your memory is low while it actually is not. Some monitoring solutions/panels include cached memory in their used memory statistics without indicating this.</translate>
|
||||
{{
|
||||
$gettext('This can make it look like your memory is low while it actually is not. Some monitoring solutions/panels include cached memory in their used memory statistics without indicating this.')
|
||||
}}
|
||||
</p>
|
||||
<p>
|
||||
<translate key="lang_cached_3">Disk caching makes a system much faster and more responsive in general. It does not take memory away from applications in any way since it will automatically be released by the operating system when needed.</translate>
|
||||
{{
|
||||
$gettext('Disk caching makes a system much faster and more responsive in general. It does not take memory away from applications in any way since it will automatically be released by the operating system when needed.')
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -21,38 +23,35 @@
|
|||
<div class="mb-2">
|
||||
<h6>
|
||||
<b-badge pill variant="primary"> </b-badge>
|
||||
<translate key="lang_used">Used</translate>
|
||||
:
|
||||
<translate key="lang_used_1">The current Memory usage excluding cached memory.</translate>
|
||||
{{ $gettext('Used') }}:
|
||||
{{ $gettext('The current Memory usage excluding cached memory.') }}
|
||||
</h6>
|
||||
</div>
|
||||
|
||||
<template #modal-footer>
|
||||
<slot name="modal-footer">
|
||||
<b-button variant="default" type="button" @click="close">
|
||||
<translate key="lang_btn_close">Close</translate>
|
||||
{{ $gettext('Close') }}
|
||||
</b-button>
|
||||
</slot>
|
||||
</template>
|
||||
</b-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import {get, templateRef} from "@vueuse/core";
|
||||
|
||||
export default {
|
||||
name: 'MemoryStatsHelpModal',
|
||||
computed: {
|
||||
langTitle() {
|
||||
return this.$gettext('Memory Stats Help');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
create() {
|
||||
this.$refs.modal.show();
|
||||
},
|
||||
close() {
|
||||
this.$refs.modal.hide();
|
||||
}
|
||||
}
|
||||
};
|
||||
const $modal = templateRef('modal');
|
||||
|
||||
const create = () => {
|
||||
get($modal).show();
|
||||
}
|
||||
const close = () => {
|
||||
get($modal).hide();
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
create,
|
||||
close
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
|
@ -5,24 +5,28 @@
|
|||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Avatar',
|
||||
props: {
|
||||
url: String,
|
||||
service: String,
|
||||
serviceUrl: String,
|
||||
width: {
|
||||
type: Number,
|
||||
default: 64
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
langAvatar() {
|
||||
let translated = this.$gettext('Avatars are retrieved based on your e-mail address from the %{service} service. Click to manage your %{service} settings.');
|
||||
return this.$gettextInterpolate(translated, {service: this.service});
|
||||
}
|
||||
}
|
||||
};
|
||||
<script setup>
|
||||
import gettext from "~/vendor/gettext";
|
||||
import {computed} from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
url: String,
|
||||
service: String,
|
||||
serviceUrl: String,
|
||||
width: {
|
||||
type: Number,
|
||||
default: 64
|
||||
}
|
||||
});
|
||||
|
||||
const {$gettext} = gettext;
|
||||
|
||||
const langAvatar = computed(() => {
|
||||
return $gettext(
|
||||
'Avatars are retrieved based on your e-mail address from the %{service} service. Click to manage your %{service} settings.',
|
||||
{
|
||||
service: props.service
|
||||
}
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,30 +1,25 @@
|
|||
<template>
|
||||
<i :class="iconClass" aria-hidden="true">{{ iconContent }}</i>
|
||||
<i :class="iconClass" aria-hidden="true">{{ icon }}</i>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Icon',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'md'
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
<script setup>
|
||||
import {computed} from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
default: 'md'
|
||||
},
|
||||
computed: {
|
||||
iconClass () {
|
||||
if (this.type === 'md') {
|
||||
return ['material-icons'];
|
||||
}
|
||||
return null;
|
||||
},
|
||||
iconContent () {
|
||||
return this.icon;
|
||||
}
|
||||
icon: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const iconClass = computed(() => {
|
||||
if (props.type === 'md') {
|
||||
return ['material-icons'];
|
||||
}
|
||||
return null;
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -9,11 +9,5 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from './Icon';
|
||||
|
||||
export default {
|
||||
name: 'InfoCard',
|
||||
components: { Icon }
|
||||
};
|
||||
</script>
|
||||
<script setup>
|
||||
import Icon from './Icon';</script>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,3 @@
|
|||
<template>
|
||||
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" tabindex="-1" aria-hidden="true"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'InvisibleSubmitButton'
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,71 +1,75 @@
|
|||
<template>
|
||||
<a href="#" @click.prevent="toggle" :title="langTitle">
|
||||
<icon :class="iconClass" :icon="icon"></icon>
|
||||
<icon :class="iconClass" :icon="iconText"></icon>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import Icon from "./Icon";
|
||||
|
||||
import {usePlayerStore} from "~/store";
|
||||
import {computed} from "vue";
|
||||
import {get} from "@vueuse/core";
|
||||
import gettext from "~/vendor/gettext";
|
||||
import getUrlWithoutQuery from "~/functions/getUrlWithoutQuery";
|
||||
|
||||
import {usePlayerStore} from '~/store.js';
|
||||
const props = defineProps({
|
||||
url: String,
|
||||
isStream: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isHls: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
iconClass: String
|
||||
});
|
||||
|
||||
export default {
|
||||
name: 'PlayButton',
|
||||
components: {Icon},
|
||||
setup() {
|
||||
return {
|
||||
store: usePlayerStore()
|
||||
}
|
||||
},
|
||||
props: {
|
||||
url: String,
|
||||
isStream: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isHls: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
iconClass: String
|
||||
},
|
||||
computed: {
|
||||
isPlaying() {
|
||||
return this.store.isPlaying;
|
||||
},
|
||||
current() {
|
||||
return this.store.current;
|
||||
},
|
||||
isThisPlaying() {
|
||||
if (!this.isPlaying) {
|
||||
return false;
|
||||
}
|
||||
const $store = usePlayerStore();
|
||||
const {$gettext} = gettext;
|
||||
|
||||
let playingUrl = getUrlWithoutQuery(this.current.url);
|
||||
let thisUrl = getUrlWithoutQuery(this.url);
|
||||
return playingUrl === thisUrl;
|
||||
},
|
||||
langTitle() {
|
||||
return this.isThisPlaying
|
||||
? this.$gettext('Stop')
|
||||
: this.$gettext('Play');
|
||||
},
|
||||
icon() {
|
||||
return this.isThisPlaying
|
||||
? 'stop_circle'
|
||||
: 'play_circle';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle() {
|
||||
this.store.toggle({
|
||||
url: this.url,
|
||||
isStream: this.isStream,
|
||||
isHls: this.isHls
|
||||
});
|
||||
}
|
||||
const isPlaying = computed(() => {
|
||||
return $store.isPlaying;
|
||||
});
|
||||
|
||||
const current = computed(() => {
|
||||
return $store.current;
|
||||
});
|
||||
|
||||
const isThisPlaying = computed(() => {
|
||||
if (!get(isPlaying)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
let playingUrl = getUrlWithoutQuery(get(current).url);
|
||||
let thisUrl = getUrlWithoutQuery(props.url);
|
||||
return playingUrl === thisUrl;
|
||||
});
|
||||
|
||||
const langTitle = computed(() => {
|
||||
return get(isThisPlaying)
|
||||
? $gettext('Stop')
|
||||
: $gettext('Play');
|
||||
});
|
||||
|
||||
const iconText = computed(() => {
|
||||
return get(isThisPlaying)
|
||||
? 'stop_circle'
|
||||
: 'play_circle';
|
||||
});
|
||||
|
||||
const toggle = () => {
|
||||
$store.toggle({
|
||||
url: props.url,
|
||||
isStream: props.isStream,
|
||||
isHls: props.isHls
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
current,
|
||||
isPlaying,
|
||||
isThisPlaying,
|
||||
toggle
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,30 @@
|
|||
import Swal from 'sweetalert2';
|
||||
import gettext from "~/vendor/gettext";
|
||||
|
||||
const {$gettext} = gettext;
|
||||
|
||||
const swalCustom = Swal.mixin({
|
||||
confirmButtonText: $gettext('Confirm'),
|
||||
cancelButtonText: $gettext('Cancel'),
|
||||
showCancelButton: true,
|
||||
});
|
||||
|
||||
export function showAlert(options = {}) {
|
||||
return swalCustom.fire(options);
|
||||
}
|
||||
|
||||
const swalConfirmDelete = swalCustom.mixin({
|
||||
title: $gettext('Delete Record?'),
|
||||
confirmButtonText: $gettext('Delete'),
|
||||
confirmButtonColor: '#e64942',
|
||||
focusCancel: true
|
||||
});
|
||||
|
||||
export function confirmDelete(options = {}) {
|
||||
return swalConfirmDelete.fire(options);
|
||||
}
|
||||
|
||||
export default function useSweetAlert(vueApp) {
|
||||
vueApp.config.globalProperties.$swal = function (options = {}) {
|
||||
return Swal.fire(options);
|
||||
};
|
||||
|
||||
vueApp.config.globalProperties.$confirmDelete = function (options = {}) {
|
||||
const defaults = {
|
||||
title: this.$gettext('Delete Record?'),
|
||||
confirmButtonText: this.$gettext('Delete'),
|
||||
confirmButtonColor: '#e64942',
|
||||
showCancelButton: true,
|
||||
focusCancel: true
|
||||
};
|
||||
|
||||
return this.$swal({...defaults, ...options});
|
||||
};
|
||||
vueApp.config.globalProperties.$swal = showAlert;
|
||||
vueApp.config.globalProperties.$confirmDelete = confirmDelete;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue