mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-02 20:15:24 +02:00
feat: admin maintenance and analytics stubs (#1107)
* add tail log viewer routes * add log viewer * add _mealie to ignore directories * add detailed breakdown of storage * generate types * add dialog to view breakdown * cleanup mobile UI * move migrations page * spelling * init analytics page * move route up * add remove temp files function * analytics API client * stub out analytics pages * generate types * stub out analytics routes * update names * ignore types * temporary remove analytics from sidebar
This commit is contained in:
Hayden
GitHub
parent
6f309d7a89
commit
1a23f867da
23 changed files with 536 additions and 59 deletions
240
frontend/pages/admin/maintenance/index.vue
Normal file
240
frontend/pages/admin/maintenance/index.vue
Normal file
|
|
@ -0,0 +1,240 @@
|
|||
<template>
|
||||
<v-container fluid class="narrow-container">
|
||||
<BaseDialog v-model="state.storageDetails" title="Storage Details" :icon="$globals.icons.folderOutline">
|
||||
<div class="py-2">
|
||||
<template v-for="(value, key, idx) in storageDetails">
|
||||
<v-list-item :key="`item-${key}`">
|
||||
<v-list-item-title>
|
||||
<div>{{ storageDetailsText(key) }}</div>
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle class="text-end"> {{ value }} </v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
<v-divider v-if="idx != 4" :key="`divider-${key}`" class="mx-2"></v-divider>
|
||||
</template>
|
||||
</div>
|
||||
</BaseDialog>
|
||||
|
||||
<BasePageTitle divider>
|
||||
<template #title> Site Maintenance </template>
|
||||
</BasePageTitle>
|
||||
|
||||
<div class="d-flex justify-end">
|
||||
<ButtonLink to="/admin/maintenance/logs" text="Logs" :icon="$globals.icons.file" />
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<BaseCardSectionTitle class="pb-0" :icon="$globals.icons.wrench" title="Summary"> </BaseCardSectionTitle>
|
||||
<div class="mb-6 ml-2 d-flex" style="gap: 0.3rem">
|
||||
<BaseButton color="info" @click="getSummary">
|
||||
<template #icon> {{ $globals.icons.tools }} </template>
|
||||
Get Summary
|
||||
</BaseButton>
|
||||
<BaseButton color="info" @click="openDetails">
|
||||
<template #icon> {{ $globals.icons.folderOutline }} </template>
|
||||
Details
|
||||
</BaseButton>
|
||||
</div>
|
||||
<v-card class="ma-2" :loading="state.fetchingInfo">
|
||||
<template v-for="(value, idx) in info">
|
||||
<v-list-item :key="`item-${idx}`">
|
||||
<v-list-item-title class="py-2">
|
||||
<div>{{ value.name }}</div>
|
||||
<v-list-item-subtitle class="text-end"> {{ value.value }} </v-list-item-subtitle>
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-divider :key="`divider-${idx}`" class="mx-2"></v-divider>
|
||||
</template>
|
||||
</v-card>
|
||||
</section>
|
||||
<section>
|
||||
<BaseCardSectionTitle class="pb-0 mt-8" :icon="$globals.icons.wrench" title="Actions">
|
||||
Maintenance actions are <b> destructive </b> and should be used with caution. Performing any of these actions is
|
||||
<b> irreversible </b>.
|
||||
</BaseCardSectionTitle>
|
||||
<v-card class="ma-2" :loading="state.actionLoading">
|
||||
<template v-for="(action, idx) in actions">
|
||||
<v-list-item :key="`item-${idx}`" class="py-1">
|
||||
<v-list-item-title>
|
||||
<div>{{ action.name }}</div>
|
||||
<v-list-item-subtitle class="wrap-word">
|
||||
{{ action.subtitle }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-title>
|
||||
<BaseButton color="info" @click="action.handler">
|
||||
<template #icon> {{ $globals.icons.robot }}</template>
|
||||
Run
|
||||
</BaseButton>
|
||||
</v-list-item>
|
||||
<v-divider :key="`divider-${idx}`" class="mx-2"></v-divider>
|
||||
</template>
|
||||
</v-card>
|
||||
</section>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, ref, defineComponent, reactive } from "@nuxtjs/composition-api";
|
||||
import { useAdminApi } from "~/composables/api";
|
||||
import { MaintenanceStorageDetails, MaintenanceSummary } from "~/types/api-types/admin";
|
||||
|
||||
export default defineComponent({
|
||||
layout: "admin",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
storageDetails: false,
|
||||
storageDetailsLoading: false,
|
||||
fetchingInfo: false,
|
||||
actionLoading: false,
|
||||
});
|
||||
|
||||
const adminApi = useAdminApi();
|
||||
|
||||
// ==========================================================================
|
||||
// General Info
|
||||
|
||||
const infoResults = ref<MaintenanceSummary>({
|
||||
dataDirSize: "unknown",
|
||||
logFileSize: "unknown",
|
||||
cleanableDirs: 0,
|
||||
cleanableImages: 0,
|
||||
});
|
||||
|
||||
async function getSummary() {
|
||||
state.fetchingInfo = true;
|
||||
const { data } = await adminApi.maintenance.getInfo();
|
||||
|
||||
infoResults.value = data ?? {
|
||||
dataDirSize: "unknown",
|
||||
logFileSize: "unknown",
|
||||
cleanableDirs: 0,
|
||||
cleanableImages: 0,
|
||||
};
|
||||
|
||||
state.fetchingInfo = false;
|
||||
}
|
||||
|
||||
const info = computed(() => {
|
||||
return [
|
||||
{
|
||||
name: "Data Directory Size",
|
||||
value: infoResults.value.dataDirSize,
|
||||
},
|
||||
{
|
||||
name: "Log File Size",
|
||||
value: infoResults.value.logFileSize,
|
||||
},
|
||||
{
|
||||
name: "Cleanable Directories",
|
||||
value: infoResults.value.cleanableDirs,
|
||||
},
|
||||
{
|
||||
name: "Cleanable Images",
|
||||
value: infoResults.value.cleanableImages,
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
// ==========================================================================
|
||||
// Storage Details
|
||||
|
||||
const storageTitles: { [key: string]: string } = {
|
||||
tempDirSize: "Temporary Directory (.temp)",
|
||||
backupsDirSize: "Backups Directory (backups)",
|
||||
groupsDirSize: "Groups Directory (groups)",
|
||||
recipesDirSize: "Recipes Directory (recipes)",
|
||||
userDirSize: "User Directory (user)",
|
||||
};
|
||||
|
||||
function storageDetailsText(key: string) {
|
||||
return storageTitles[key] ?? "unknown";
|
||||
}
|
||||
|
||||
const storageDetails = ref<MaintenanceStorageDetails | null>(null);
|
||||
|
||||
async function openDetails() {
|
||||
state.storageDetailsLoading = true;
|
||||
state.storageDetails = true;
|
||||
|
||||
const { data } = await adminApi.maintenance.getStorageDetails();
|
||||
|
||||
if (data) {
|
||||
storageDetails.value = data;
|
||||
}
|
||||
|
||||
state.storageDetailsLoading = true;
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Actions
|
||||
|
||||
async function handleDeleteLogFile() {
|
||||
state.actionLoading = true;
|
||||
await adminApi.maintenance.cleanLogFile();
|
||||
state.actionLoading = false;
|
||||
}
|
||||
|
||||
async function handleCleanDirectories() {
|
||||
state.actionLoading = true;
|
||||
await adminApi.maintenance.cleanRecipeFolders();
|
||||
state.actionLoading = false;
|
||||
}
|
||||
|
||||
async function handleCleanImages() {
|
||||
state.actionLoading = true;
|
||||
await adminApi.maintenance.cleanImages();
|
||||
state.actionLoading = false;
|
||||
}
|
||||
|
||||
async function handleCleanTemp() {
|
||||
state.actionLoading = true;
|
||||
await adminApi.maintenance.cleanTemp();
|
||||
state.actionLoading = false;
|
||||
}
|
||||
|
||||
const actions = [
|
||||
{
|
||||
name: "Delete Log Files",
|
||||
handler: handleDeleteLogFile,
|
||||
subtitle: "Deletes all the log files",
|
||||
},
|
||||
{
|
||||
name: "Clean Directories",
|
||||
handler: handleCleanDirectories,
|
||||
subtitle: "Removes all the recipe folders that are not valid UUIDs",
|
||||
},
|
||||
{
|
||||
name: "Clean Temporary Files",
|
||||
handler: handleCleanTemp,
|
||||
subtitle: "Removes all files and folders in the .temp directory",
|
||||
},
|
||||
{
|
||||
name: "Clean Images",
|
||||
handler: handleCleanImages,
|
||||
subtitle: "Removes all the images that don't end with .webp",
|
||||
},
|
||||
];
|
||||
|
||||
return {
|
||||
storageDetailsText,
|
||||
openDetails,
|
||||
storageDetails,
|
||||
state,
|
||||
info,
|
||||
getSummary,
|
||||
actions,
|
||||
};
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.$t("settings.site-settings") as string,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.wrap-word {
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
100
frontend/pages/admin/maintenance/logs.vue
Normal file
100
frontend/pages/admin/maintenance/logs.vue
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
<template>
|
||||
<v-container fluid>
|
||||
<BaseCardSectionTitle class="pb-0" :icon="$globals.icons.cog" title="Summary"> </BaseCardSectionTitle>
|
||||
<div class="mb-6 ml-2 d-flex" style="gap: 0.8rem">
|
||||
<BaseButton color="info" :loading="state.loading" @click="refreshLogs">
|
||||
<template #icon> {{ $globals.icons.refreshCircle }} </template>
|
||||
Refresh Logs
|
||||
</BaseButton>
|
||||
<AppButtonCopy :copy-text="copyText" />
|
||||
<div class="ml-auto" style="max-width: 150px">
|
||||
<v-text-field v-model="state.lines" type="number" label="Tail Lines" hide-details dense outlined>
|
||||
</v-text-field>
|
||||
</div>
|
||||
</div>
|
||||
<v-card outlined>
|
||||
<v-virtual-scroll
|
||||
v-scroll="scrollOptions"
|
||||
:bench="20"
|
||||
:items="logs.logs"
|
||||
height="800"
|
||||
item-height="20"
|
||||
class="keep-whitespace log-container"
|
||||
>
|
||||
<template #default="{ item }">
|
||||
<p class="log-text">
|
||||
{{ item }}
|
||||
</p>
|
||||
</template>
|
||||
</v-virtual-scroll>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from "@nuxtjs/composition-api";
|
||||
import { computed, onMounted, reactive } from "vue-demi";
|
||||
import { useAdminApi } from "~/composables/api";
|
||||
|
||||
export default defineComponent({
|
||||
layout: "admin",
|
||||
setup() {
|
||||
const adminApi = useAdminApi();
|
||||
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
lines: 500,
|
||||
autoRefresh: true,
|
||||
});
|
||||
|
||||
const scrollOptions = reactive({
|
||||
enable: true,
|
||||
always: false,
|
||||
smooth: false,
|
||||
notSmoothOnInit: true,
|
||||
});
|
||||
|
||||
const logs = ref({
|
||||
logs: [] as string[],
|
||||
});
|
||||
|
||||
async function refreshLogs() {
|
||||
state.loading = true;
|
||||
const { data } = await adminApi.maintenance.logs(state.lines);
|
||||
if (data) {
|
||||
logs.value = data;
|
||||
}
|
||||
state.loading = false;
|
||||
}
|
||||
onMounted(() => {
|
||||
refreshLogs();
|
||||
});
|
||||
|
||||
const copyText = computed(() => {
|
||||
return logs.value.logs.join("") || "";
|
||||
});
|
||||
return {
|
||||
copyText,
|
||||
scrollOptions,
|
||||
state,
|
||||
refreshLogs,
|
||||
logs,
|
||||
};
|
||||
},
|
||||
head: {
|
||||
title: "Mealie Logs",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.log-text {
|
||||
font: 0.8rem Inconsolata, monospace;
|
||||
}
|
||||
.log-container {
|
||||
background-color: var(--v-background-base) !important;
|
||||
}
|
||||
.keep-whitespace {
|
||||
white-space: pre;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue