✨ Implements frontend work for Rebuild App functionality
This commit is contained in:
Alicia Sykes
@@ -11,7 +11,7 @@
|
||||
</a>
|
||||
<button class="config-button center" @click="goToEdit()">
|
||||
<EditIcon class="button-icon"/>
|
||||
Edit Sections
|
||||
Edit Config
|
||||
</button>
|
||||
<button class="config-button center" @click="goToMetaEdit()">
|
||||
<MetaDataIcon class="button-icon"/>
|
||||
@@ -25,6 +25,10 @@
|
||||
<CloudIcon class="button-icon"/>
|
||||
{{backupId ? 'Edit Cloud Sync' : 'Enable Cloud Sync'}}
|
||||
</button>
|
||||
<button class="config-button center" @click="openRebuildAppModal()">
|
||||
<RebuildIcon class="button-icon"/>
|
||||
Rebuild Application
|
||||
</button>
|
||||
<button class="config-button center" @click="resetLocalSettings()">
|
||||
<DeleteIcon class="button-icon"/>
|
||||
Reset Local Settings
|
||||
@@ -40,8 +44,10 @@
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Rebuild App Modal -->
|
||||
<RebuildApp />
|
||||
</TabItem>
|
||||
<TabItem name="Backup Config" class="code-container">
|
||||
<TabItem name="View Config" class="code-container">
|
||||
<pre id="conf-yaml">{{this.jsonParser(this.config)}}</pre>
|
||||
<div class="yaml-action-buttons">
|
||||
<h2>Actions</h2>
|
||||
@@ -50,7 +56,7 @@
|
||||
<a class="yaml-button reset" @click="resetLocalSettings()">Reset Config</a>
|
||||
</div>
|
||||
</TabItem>
|
||||
<TabItem name="Edit Sections">
|
||||
<TabItem name="Edit Config">
|
||||
<JsonEditor :config="config" />
|
||||
</TabItem>
|
||||
<TabItem name="Edit Site Meta">
|
||||
@@ -73,12 +79,15 @@ import { localStorageKeys, modalNames } from '@/utils/defaults';
|
||||
import EditSiteMeta from '@/components/Configuration/EditSiteMeta';
|
||||
import JsonEditor from '@/components/Configuration/JsonEditor';
|
||||
import CustomCssEditor from '@/components/Configuration/CustomCss';
|
||||
import RebuildApp from '@/components/Configuration/RebuildApp';
|
||||
|
||||
import DownloadIcon from '@/assets/interface-icons/config-download-file.svg';
|
||||
import DeleteIcon from '@/assets/interface-icons/config-delete-local.svg';
|
||||
import EditIcon from '@/assets/interface-icons/config-edit-json.svg';
|
||||
import MetaDataIcon from '@/assets/interface-icons/config-meta-data.svg';
|
||||
import CustomCssIcon from '@/assets/interface-icons/config-custom-css.svg';
|
||||
import CloudIcon from '@/assets/interface-icons/cloud-backup-restore.svg';
|
||||
import RebuildIcon from '@/assets/interface-icons/application-rebuild.svg';
|
||||
|
||||
export default {
|
||||
name: 'ConfigContainer',
|
||||
@@ -100,12 +109,14 @@ export default {
|
||||
EditSiteMeta,
|
||||
JsonEditor,
|
||||
CustomCssEditor,
|
||||
RebuildApp,
|
||||
DownloadIcon,
|
||||
DeleteIcon,
|
||||
EditIcon,
|
||||
CloudIcon,
|
||||
MetaDataIcon,
|
||||
CustomCssIcon,
|
||||
RebuildIcon,
|
||||
},
|
||||
methods: {
|
||||
/* Seletcs the edit tab of the tab view */
|
||||
@@ -121,6 +132,9 @@ export default {
|
||||
const itemToSelect = this.$refs.tabView.navItems[4];
|
||||
this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
|
||||
},
|
||||
openRebuildAppModal() {
|
||||
this.$modal.show(modalNames.REBUILD_APP);
|
||||
},
|
||||
openCloudSync() {
|
||||
this.$modal.show(modalNames.CLOUD_BACKUP);
|
||||
},
|
||||
|
||||
169
src/components/Configuration/RebuildApp.vue
Normal file
169
src/components/Configuration/RebuildApp.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<modal :name="modalName" :resizable="true" width="50%" height="60%" classes="dashy-modal">
|
||||
<div class="rebuild-app-container">
|
||||
<!-- Title, intro and start button -->
|
||||
<h3 class="rebuild-app-title">Rebuild Application</h3>
|
||||
<p>
|
||||
A rebuild is required for changes written to the conf.yml file to take effect.
|
||||
This should happen automatically, but if it hasn't, you can manually trigger it here.<br>
|
||||
This is not required for modifications stored locally.
|
||||
</p>
|
||||
<Button :click="startBuild" :disabled="loading">
|
||||
<template v-slot:text>{{ loading ? 'Building...' : 'Start Build' }}</template>
|
||||
<template v-slot:icon><RebuildIcon /></template>
|
||||
</Button>
|
||||
<!-- Loading animation and text (shown while build is happening) -->
|
||||
<div v-if="loading" class="loader-info">
|
||||
<LoadingAnimation class="loader" />
|
||||
<p class="loading-message">This may take a few minutes...</p>
|
||||
</div>
|
||||
<!-- Build response, and next actions (shown after build is done) -->
|
||||
<div class="rebuild-response" v-if="success !== undefined">
|
||||
<p v-if="success" class="response-status success">✅ Build completed succesfully</p>
|
||||
<p v-else class="response-status failure">❌ Build operation failed</p>
|
||||
<pre class="output"><code>{{ output || error }}</code></pre>
|
||||
<p class="rebuild-message">{{ message }}</p>
|
||||
<p v-if="success" class="rebuild-message">
|
||||
A page reload is now required for changes to take effect
|
||||
</p>
|
||||
<Button :click="refreshPage" v-if="success">
|
||||
<template v-slot:text>Reload Page</template>
|
||||
<template v-slot:icon><ReloadIcon /></template>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import Button from '@/components/FormElements/Button';
|
||||
import { modalNames } from '@/utils/defaults';
|
||||
import RebuildIcon from '@/assets/interface-icons/application-rebuild.svg';
|
||||
import ReloadIcon from '@/assets/interface-icons/application-reload.svg';
|
||||
import LoadingAnimation from '@/assets/interface-icons/loader.svg';
|
||||
|
||||
export default {
|
||||
name: 'RebuildApp',
|
||||
components: {
|
||||
Button,
|
||||
RebuildIcon,
|
||||
ReloadIcon,
|
||||
LoadingAnimation,
|
||||
},
|
||||
data: () => ({
|
||||
modalName: modalNames.REBUILD_APP,
|
||||
loading: false,
|
||||
success: undefined,
|
||||
error: '',
|
||||
output: '',
|
||||
message: '',
|
||||
}),
|
||||
methods: {
|
||||
startBuild() {
|
||||
const baseUrl = process.env.VUE_APP_DOMAIN || window.location.origin;
|
||||
const endpoint = `${baseUrl}/config-manager/rebuild`;
|
||||
this.loading = true;
|
||||
axios.get(endpoint)
|
||||
.then((response) => {
|
||||
this.finished(response.data || false);
|
||||
})
|
||||
.catch((error) => {
|
||||
this.finished({ success: false, error });
|
||||
});
|
||||
},
|
||||
finished(responseData) {
|
||||
this.loading = false;
|
||||
if (responseData) {
|
||||
const {
|
||||
success, output, error, message,
|
||||
} = responseData;
|
||||
this.success = success;
|
||||
this.output = output;
|
||||
this.message = message;
|
||||
this.error = error;
|
||||
}
|
||||
this.$toasted.show(
|
||||
(this.success ? '✅ Build Completed Succesfully' : '❌ Build Failed'),
|
||||
{ className: `toast-${this.success ? 'success' : 'error'}` },
|
||||
);
|
||||
},
|
||||
refreshPage() {
|
||||
location.reload(); // eslint-disable-line no-restricted-globals
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.rebuild-app-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 1rem;
|
||||
color: var(--config-settings-color);
|
||||
background: var(--config-settings-background);
|
||||
overflow: auto;
|
||||
|
||||
button {
|
||||
background: var(--config-settings-background);
|
||||
color: var(--config-settings-color);
|
||||
}
|
||||
|
||||
h3.rebuild-app-title {
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
div.loader-info {
|
||||
margin: 0.2rem auto;
|
||||
text-align: center;
|
||||
svg.loader {
|
||||
width: 100px;
|
||||
}
|
||||
p.loading-message {
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
opacity: var(--dimming-factor);
|
||||
animation: 3s fadeIn;
|
||||
animation-fill-mode: forwards;
|
||||
opacity: 0;
|
||||
@keyframes fadeIn {
|
||||
90% { opacity: 0; }
|
||||
95% { opacity: 0.8; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
}
|
||||
}
|
||||
div.rebuild-response {
|
||||
width: 80%;
|
||||
margin: 0 auto 4rem auto;
|
||||
text-align: center;
|
||||
p.response-status {
|
||||
font-size: 1rem;
|
||||
text-align: left;
|
||||
&.success {
|
||||
color: var(--success);
|
||||
}
|
||||
&.failure {
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
pre.output {
|
||||
padding: 1rem;
|
||||
font-size: 0.75rem;
|
||||
border-radius: var(--curve-factor-small);
|
||||
text-align: left;
|
||||
color: var(--white);
|
||||
background: var(--black);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
p.rebuild-message {
|
||||
font-size: 1rem;
|
||||
text-align: left;
|
||||
margin: 0.8rem 0;
|
||||
color: var(--config-settings-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user