Girish Ramakrishnan
518 lines
17 KiB
Vue
518 lines
17 KiB
Vue
<script setup>
|
|
|
|
import { useI18n } from 'vue-i18n';
|
|
const i18n = useI18n();
|
|
const t = i18n.t;
|
|
|
|
import { ref, onMounted, onBeforeUnmount, useTemplateRef } from 'vue';
|
|
import { Button, ButtonGroup, ProgressBar, InputDialog } from '@cloudron/pankow';
|
|
import PostInstallDialog from '../components/PostInstallDialog.vue';
|
|
import SftpInfoDialog from '../components/SftpInfoDialog.vue';
|
|
import Access from '../components/app/Access.vue';
|
|
import Backups from '../components/app/Backups.vue';
|
|
import Cron from '../components/app/Cron.vue';
|
|
import Display from '../components/app/Display.vue';
|
|
import Email from '../components/app/Email.vue';
|
|
import Eventlog from '../components/app/Eventlog.vue';
|
|
import Graphs from '../components/app/Graphs.vue';
|
|
import Info from '../components/app/Info.vue';
|
|
import Location from '../components/app/Location.vue';
|
|
import Proxy from '../components/app/Proxy.vue';
|
|
import Resources from '../components/app/Resources.vue';
|
|
import Repair from '../components/app/Repair.vue';
|
|
import Security from '../components/app/Security.vue';
|
|
import Services from '../components/app/Services.vue';
|
|
import Storage from '../components/app/Storage.vue';
|
|
import Uninstall from '../components/app/Uninstall.vue';
|
|
import Updates from '../components/app/Updates.vue';
|
|
import AppsModel from '../models/AppsModel.js';
|
|
import TasksModel from '../models/TasksModel.js';
|
|
import { API_ORIGIN, APP_TYPES, ISTATES, RSTATES, HSTATES } from '../constants.js';
|
|
|
|
const appsModel = AppsModel.create();
|
|
const tasksModel = TasksModel.create();
|
|
const installationStateLabel = AppsModel.installationStateLabel;
|
|
|
|
const inputDialog = useTemplateRef('inputDialog');
|
|
|
|
const busy = ref(true);
|
|
const id = ref('');
|
|
const app = ref(null);
|
|
const currentView = ref('');
|
|
const link = ref('');
|
|
const infoMenu = ref([]);
|
|
const hasLocalStorage = ref(false);
|
|
const hasOptionalServices = ref(false);
|
|
const hasEmail = ref(false);
|
|
const busyStopTask = ref(false);
|
|
const postInstallDialog = useTemplateRef('postInstallDialog');
|
|
const sftpInfoDialog = useTemplateRef('sftpInfoDialog');
|
|
|
|
let refreshTimer = null;
|
|
async function refresh() {
|
|
const [error, result] = await appsModel.get(id.value);
|
|
if (error) {
|
|
if (error.status === 403) return window.location.hash = '/';
|
|
else if (error.status === 404) return window.location.hash = '/apps';
|
|
return console.error(error);
|
|
}
|
|
|
|
// prevent users who have no acces to
|
|
if (result.accessLevel !== 'admin' && result.accessLevel !== 'operator') return window.location.hash = '/';
|
|
|
|
app.value = result;
|
|
|
|
link.value = (result.installationState !== ISTATES.INSTALLED || result.health !== HSTATES.HEALTHY || result.runState === RSTATES.STOPPED) ? '' : `https://${result.fqdn}`;
|
|
hasLocalStorage.value = result.manifest && result.manifest.addons && result.manifest.addons.localstorage;
|
|
hasOptionalServices.value = result.manifest && result.manifest.addons && (result.manifest.addons.turn?.optional || result.manifest.addons.redis?.optional);
|
|
hasEmail.value = result.manifest && result.manifest.addons && (result.manifest.addons.sendmail || result.manifest.addons.recvmail);
|
|
|
|
infoMenu.value = [];
|
|
infoMenu.value.push({
|
|
label: t('app.docsAction'),
|
|
disabled: !result.manifest?.documentationUrl,
|
|
href: result.manifest.documentationUrl,
|
|
target: '_blank',
|
|
});
|
|
|
|
if (result.manifest?.postInstallMessage) {
|
|
infoMenu.value.push({
|
|
label: t('app.firstTimeSetupAction'),
|
|
action: () => postInstallDialog.value.open(app.value),
|
|
});
|
|
}
|
|
|
|
if (result.manifest?.configurePath) {
|
|
infoMenu.value.push({
|
|
label: t('app.adminPageAction'),
|
|
href: link.value + result.manifest.configurePath,
|
|
target: '_blank',
|
|
});
|
|
}
|
|
|
|
if (result.manifest?.addons?.localstorage?.ftp) {
|
|
infoMenu.value.push({
|
|
label: t('app.sftpInfoAction'),
|
|
action: () => sftpInfoDialog.value.open(app.value),
|
|
});
|
|
}
|
|
|
|
infoMenu.value.push({ separator: true });
|
|
infoMenu.value.push({
|
|
label: t('app.forumUrlAction'),
|
|
disabled: !result.manifest?.forumUrl,
|
|
href: result.manifest.forumUrl,
|
|
target: '_blank',
|
|
|
|
});
|
|
|
|
if (result.versionsUrl) {
|
|
infoMenu.value.push({ separator: true });
|
|
infoMenu.value.push({
|
|
label: 'Versions URL',
|
|
href: result.versionsUrl,
|
|
target: '_blank',
|
|
});
|
|
}
|
|
|
|
infoMenu.value.push({ separator: true });
|
|
infoMenu.value.push({
|
|
label: t('app.projectWebsiteAction'),
|
|
disabled: !result.manifest?.website,
|
|
href: result.manifest.website,
|
|
target: '_blank',
|
|
});
|
|
|
|
refreshTimer = setTimeout(refresh, 2000);
|
|
}
|
|
|
|
function isViewEnabled(view, errorState) {
|
|
if (!errorState) return true;
|
|
|
|
if (view === 'info' || view === 'uninstall' || view === 'eventlog') return true;
|
|
|
|
if (errorState === ISTATES.PENDING_INSTALL) return view === 'repair';
|
|
if (errorState === ISTATES.PENDING_UNINSTALL) return false;
|
|
if (errorState === ISTATES.PENDING_CLONE) return false;
|
|
|
|
if (view === 'display'
|
|
|| view === 'backups'
|
|
|| view === 'access'
|
|
|| view === 'proxy'
|
|
|| view === 'graphs'
|
|
|| view === 'security'
|
|
|| view === 'cron'
|
|
) return true;
|
|
|
|
if (view === 'location') {
|
|
return errorState === ISTATES.PENDING_LOCATION_CHANGE;
|
|
} else if (view === 'repair') {
|
|
return errorState === ISTATES.PENDING_RESTART || errorState === ISTATES.PENDING_CONFIGURE || ISTATES.PENDING_INSTALL || ISTATES.PENDING_DEBUG;
|
|
} else if (view === 'resources') {
|
|
return errorState === ISTATES.PENDING_RESIZE || errorState === ISTATES.PENDING_RECREATE_CONTAINER;
|
|
} else if (view === 'storage') {
|
|
return errorState === ISTATES.PENDING_DATA_DIR_MIGRATION || errorState === ISTATES.PENDING_RECREATE_CONTAINER;
|
|
} else if (view === 'services') {
|
|
return errorState === ISTATES.PENDING_SERVICES_CHANGE;
|
|
} else if (view === 'email') {
|
|
return errorState === ISTATES.PENDING_SERVICES_CHANGE;
|
|
} else if (view === 'updates') {
|
|
return errorState === ISTATES.PENDING_UPDATE;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
async function onStopAppTask() {
|
|
if (!app.value.taskId) return;
|
|
|
|
busyStopTask.value = true;
|
|
|
|
const [error] = await tasksModel.stop(app.value.taskId);
|
|
if (error) console.error(error);
|
|
|
|
busyStopTask.value = false;
|
|
}
|
|
|
|
const views = ref([]);
|
|
|
|
function hashChange() {
|
|
const tmp = window.location.hash.slice('#/app/'.length);
|
|
if (!tmp) return;
|
|
|
|
const parts = tmp.split('/');
|
|
if (parts.length !== 2) return;
|
|
|
|
const newView = parts[1] || 'info';
|
|
if (!isViewEnabled(newView, app.value.error?.installationState)) {
|
|
if (!currentView.value) {
|
|
currentView.value = 'info';
|
|
window.location.hash = `/app/${id.value}/info`;
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
currentView.value = newView;
|
|
window.location.hash = `/app/${id.value}/${newView}`;
|
|
}
|
|
|
|
const busyRestart = ref(false);
|
|
|
|
async function onRestartApp() {
|
|
if (app.value.runState === RSTATES.STOPPED) {
|
|
busyRestart.value = true;
|
|
|
|
const [error] = await appsModel.restart(id.value);
|
|
if (error) return console.error(error);
|
|
|
|
busyRestart.value = false;
|
|
return;
|
|
}
|
|
|
|
const confirmed = await inputDialog.value.confirm({
|
|
message: t('filemanager.toolbar.restartApp') + '?',
|
|
confirmLabel: t('main.action.restart'),
|
|
confirmStyle: 'danger',
|
|
rejectLabel: t('main.dialog.cancel'),
|
|
rejectStyle: 'secondary',
|
|
});
|
|
|
|
if (!confirmed) return;
|
|
|
|
busyRestart.value = true;
|
|
|
|
const [error] = await appsModel.restart(id.value);
|
|
if (error) return console.error(error);
|
|
|
|
busyRestart.value = false;
|
|
}
|
|
|
|
const busyStart = ref(false);
|
|
|
|
async function onStartApp() {
|
|
busyStart.value = true;
|
|
|
|
const [error] = await appsModel.start(id.value);
|
|
if (error) return console.error(error);
|
|
|
|
setTimeout(() => busyStart.value = false, 3000);
|
|
}
|
|
|
|
onMounted(async () => {
|
|
const tmp = window.location.hash.slice('#/app/'.length);
|
|
if (!tmp) return;
|
|
|
|
const parts = tmp.split('/');
|
|
if (parts.length !== 2) return;
|
|
|
|
id.value = parts[0];
|
|
|
|
await refresh();
|
|
if (!app.value) return;
|
|
|
|
let hasServices = false;
|
|
if (app.value.manifest.addons.turn && app.value.manifest.addons.turn.optional) hasServices = true;
|
|
if (app.value.manifest.addons.redis && app.value.manifest.addons.redis.optional) hasServices = true;
|
|
|
|
function buildMenuItem(id, label) {
|
|
return {
|
|
id: id,
|
|
disabled: () => !isViewEnabled(id, app.value.error?.installationState),
|
|
label: label,
|
|
href: `/#/app/${id.value}/${id}`,
|
|
};
|
|
}
|
|
|
|
views.value.push(buildMenuItem('info', t('app.infoTabTitle')));
|
|
views.value.push(buildMenuItem('display', t('app.displayTabTitle')));
|
|
if (app.value.accessLevel === 'admin') views.value.push(buildMenuItem('location', t('app.locationTabTitle')));
|
|
if (app.value.type === APP_TYPES.PROXIED) views.value.push(buildMenuItem('proxy', 'Proxy'));
|
|
if (app.value.accessLevel === 'admin') views.value.push(buildMenuItem('access', t('app.accessControlTabTitle')));
|
|
if (app.value.type !== APP_TYPES.PROXIED) views.value.push(buildMenuItem('resources', t('app.resourcesTabTitle')));
|
|
if (app.value.type !== APP_TYPES.PROXIED && hasServices) views.value.push(buildMenuItem('services', t('app.servicesTabTitle')));
|
|
if (app.value.accessLevel === 'admin' && app.value.type !== APP_TYPES.PROXIED) views.value.push(buildMenuItem('storage', t('app.storageTabTitle')));
|
|
if (app.value.type !== APP_TYPES.PROXIED) views.value.push(buildMenuItem('graphs', t('app.graphsTabTitle')));
|
|
views.value.push(buildMenuItem('security', t('app.securityTabTitle')));
|
|
if (app.value.accessLevel === 'admin' && hasEmail.value && app.value.type !== APP_TYPES.PROXIED) views.value.push(buildMenuItem('email', t('app.emailTabTitle')));
|
|
if (app.value.type !== APP_TYPES.PROXIED) views.value.push(buildMenuItem('cron', t('app.cronTabTitle')));
|
|
views.value.push(buildMenuItem('updates', t('app.updatesTabTitle')));
|
|
if (app.value.type !== APP_TYPES.PROXIED) views.value.push(buildMenuItem('backups', t('app.backupsTabTitle')));
|
|
views.value.push(buildMenuItem('repair', t('app.repairTabTitle')));
|
|
views.value.push(buildMenuItem('eventlog', t('app.eventlogTabTitle')));
|
|
if (app.value.accessLevel === 'admin') views.value.push(buildMenuItem('uninstall', t('app.uninstallTabTitle')));
|
|
|
|
hashChange();
|
|
window.addEventListener('hashchange', hashChange);
|
|
|
|
busy.value = false;
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
if (refreshTimer) clearTimeout(refreshTimer);
|
|
window.removeEventListener('hashchange', hashChange);
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="configure-outer">
|
|
<InputDialog ref="inputDialog" />
|
|
<PostInstallDialog ref="postInstallDialog"/>
|
|
<SftpInfoDialog ref="sftpInfoDialog"/>
|
|
|
|
<div class="configure-inner" v-if="!busy">
|
|
<div class="titlebar">
|
|
<div style="display: flex; flex-grow: 1; overflow: hidden;">
|
|
<img :src="app.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'" style="height: 64px; width: 64px; margin-right: 10px;"/>
|
|
<h2>
|
|
<a class="applink" :href="link || null" target="_blank">{{ app.label || app.fqdn }}</a>
|
|
<div class="statelabel" v-if="app.error">{{ installationStateLabel(app) }} - {{ app.error.message }}</div>
|
|
<div class="statelabel" v-else>{{ installationStateLabel(app) }} {{ app.message ? ' - ' + app.message : '' }}</div>
|
|
<ProgressBar v-if="app.progress" :busy="true" :show-track="false" slim :value="app.progress" :show-label="false" style="margin-top: 10px"/>
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="titlebar-toolbar">
|
|
<Button v-if="app.taskId" danger tool plain icon="fa-solid fa-xmark" v-tooltip="'Cancel Task'" :loading="busyStopTask" :disabled="busyStopTask" @click="onStopAppTask()"/>
|
|
<Button :menu="views" secondary class="pankow-no-desktop" tool>{{ views.find(v => v.id === currentView).label }}</Button>
|
|
|
|
<Button v-if="!app.progress && app.runState !== RSTATES.STOPPED" secondary tool icon="fa-solid fa-arrows-rotate" :loading="busyRestart" :disabled="busyRestart" v-tooltip="$t('filemanager.toolbar.restartApp')" @click="onRestartApp()"/>
|
|
<Button v-if="!app.progress && app.runState === RSTATES.STOPPED" secondary tool icon="fa-solid fa-circle-play" :loading="busyStart" :disabled="busyStart" v-tooltip="$t('app.start.action')" @click="onStartApp()"/>
|
|
|
|
<ButtonGroup>
|
|
<Button secondary tool :href="`/logs.html?appId=${app.id}`" target="_blank" v-tooltip="$t('app.logsActionTooltip')" icon="fa-solid fa-align-left" />
|
|
<Button secondary tool v-if="app.type !== APP_TYPES.PROXIED" :href="`/terminal.html?id=${app.id}`" target="_blank" v-tooltip="$t('app.terminalActionTooltip')" icon="fa fa-terminal" />
|
|
<Button secondary tool v-if="hasLocalStorage" :href="`/filemanager.html#/home/app/${app.id}`" target="_blank" v-tooltip="$t('app.filemanagerActionTooltip')" icon="fas fa-folder" />
|
|
</ButtonGroup>
|
|
|
|
<Button secondary tool icon="fa-solid fa-book" v-tooltip="$t('app.docsActionTooltip')" :menu="infoMenu" />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="configure-body">
|
|
<div class="configure-menu pankow-no-mobile">
|
|
<div v-for="view in views" :key="view.id" class="configure-menu-item" :active="currentView === view.id ? true : null" :disabled="isViewEnabled(view.id, app.error?.installationState) ? null : true">
|
|
<a v-if="isViewEnabled(view.id, app.error?.installationState)" :href="`/#/app/${app.id}/${view.id}`">{{ view.label }}</a>
|
|
<span v-else>{{ view.label }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="configure-content">
|
|
<Transition name="slide-fade" mode="out-in">
|
|
<Info v-if="currentView === 'info'" :app="app"/>
|
|
<Display v-else-if="currentView === 'display'" :app="app"/>
|
|
<Location v-else-if="currentView === 'location'" :app="app"/>
|
|
<Proxy v-else-if="currentView === 'proxy'" :app="app"/>
|
|
<Access v-else-if="currentView === 'access'" :app="app"/>
|
|
<Resources v-else-if="currentView === 'resources'" :app="app"/>
|
|
<Services v-else-if="currentView === 'services'" :app="app"/>
|
|
<Storage v-else-if="currentView === 'storage'" :app="app"/>
|
|
<Graphs v-else-if="currentView === 'graphs'" :app="app"/>
|
|
<Security v-else-if="currentView === 'security'" :app="app"/>
|
|
<Email v-else-if="currentView === 'email'" :app="app"/>
|
|
<Cron v-else-if="currentView === 'cron'" :app="app"/>
|
|
<Updates v-else-if="currentView === 'updates'" :app="app"/>
|
|
<Backups v-else-if="currentView === 'backups'" :app="app"/>
|
|
<Repair v-else-if="currentView === 'repair'" :app="app"/>
|
|
<Eventlog v-else-if="currentView === 'eventlog'" :app="app"/>
|
|
<Uninstall v-else-if="currentView === 'uninstall'" :app="app"/>
|
|
</Transition>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.applink {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--pankow-text-color);
|
|
}
|
|
|
|
.applink:focus,
|
|
.applink:hover {
|
|
color: var(--pankow-color-primary);
|
|
}
|
|
|
|
.applink:not([href]) {
|
|
cursor: not-allowed;
|
|
color: var(--pankow-text-color) !important;
|
|
}
|
|
|
|
.titlebar {
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.titlebar {
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
.titlebar h2 {
|
|
overflow: hidden;
|
|
flex-grow: 1;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.titlebar-toolbar {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.titlebar-toolbar {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
.statelabel {
|
|
font-size: 12px;
|
|
margin-top: 6px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
text-wrap: nowrap;
|
|
}
|
|
|
|
.configure-outer {
|
|
width: 100%;
|
|
margin: auto;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.configure-inner {
|
|
width: 100%;
|
|
max-width: 900px;
|
|
margin: auto;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.apptask-progress {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 5px;
|
|
text-align: center;
|
|
border-radius: 10px;
|
|
color: var(--pankow-text-color);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.apptask-progress-filled {
|
|
background-color: var(--pankow-color-primary);
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
border-radius: 10px;
|
|
z-index: 1;
|
|
background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
|
|
background-size: 40px 40px;
|
|
animation: apptask-progress-bar-stripes 1s linear infinite;
|
|
transition: width 300ms;
|
|
}
|
|
|
|
@keyframes apptask-progress-bar-stripes {
|
|
from {
|
|
background-position: 40px 0;
|
|
}
|
|
to {
|
|
background-position: 0 0;
|
|
}
|
|
}
|
|
|
|
.configure-body {
|
|
margin-top: 20px;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
overflow-wrap: hidden;
|
|
}
|
|
|
|
.configure-menu-item {
|
|
display: block;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
margin-right: 60px;
|
|
}
|
|
|
|
.configure-menu-item > a,
|
|
.configure-menu-item > span {
|
|
padding: 4px 4px 4px 4px;
|
|
display: block;
|
|
color: var(--pankow-text-color);
|
|
}
|
|
|
|
.configure-menu-item[active] > a,
|
|
.configure-menu-item[active] > span {
|
|
color: var(--pankow-color-primary-active);
|
|
font-weight: var(--pankow-font-weight-bold);
|
|
}
|
|
|
|
.configure-menu-item:hover > a,
|
|
.configure-menu-item:hover > span {
|
|
color: var(--pankow-color-primary-hover);
|
|
}
|
|
|
|
.configure-menu-item[disabled] > a,
|
|
.configure-menu-item[disabled] > span {
|
|
color: gray;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.configure-content {
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
</style>
|