Skip to content

W
wiki-js
Unverified Commit 07d274ca authored by NGPixel's avatar NGPixel
Browse files
Options

refactor: admin system info to vue3 comp api

parent 464f55cf
Show whitespace changes
Inline Side-by-side
Showing with 197 additions and 169 deletions
ux/src/pages/AdminGeneral.vue
View file @ 07d274ca
...@@ -589,8 +589,8 @@ async function save () { ...@@ -589,8 +589,8 @@ async function save () {
type: 'positive', type: 'positive',
message: t('admin.general.saveSuccess') message: t('admin.general.saveSuccess')
}) })
if (adminStore.currentSiteId === siteStore.id) {
await adminStore.fetchSites() await adminStore.fetchSites()
if (adminStore.currentSiteId === siteStore.id) {
siteStore.$patch({ siteStore.$patch({
title: state.config.title, title: state.config.title,
description: state.config.description, description: state.config.description,
......
ux/src/pages/AdminSystem.vue
View file @ 07d274ca
...@@ -4,8 +4,8 @@ q-page.admin-system ...@@ -4,8 +4,8 @@ q-page.admin-system
.col-auto .col-auto
img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-processor.svg') img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-processor.svg')
.col.q-pl-md .col.q-pl-md
.text-h5.text-primary.animated.fadeInLeft {{ $t('admin.system.title') }} .text-h5.text-primary.animated.fadeInLeft {{ t('admin.system.title') }}
.text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ $t('admin.system.subtitle') }} .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.system.subtitle') }}
.col-auto .col-auto
q-btn.q-mr-sm.acrylic-btn( q-btn.q-mr-sm.acrylic-btn(
icon='las la-question-circle' icon='las la-question-circle'
...@@ -16,20 +16,20 @@ q-page.admin-system ...@@ -16,20 +16,20 @@ q-page.admin-system
type='a' type='a'
) )
q-btn.q-mr-sm.acrylic-btn( q-btn.q-mr-sm.acrylic-btn(
icon='las la-redo-alt' icon='fa-solid fa-rotate'
flat flat
color='secondary' color='secondary'
:loading='loading > 0' :loading='state.loading > 0'
@click='load' @click='load'
) )
q-btn.acrylic-btn( q-btn.acrylic-btn(
ref='copySysInfoBtn' ref='copySysInfoBtn'
flat flat
icon='las la-clipboard' icon='fa-regular fa-clipboard'
label='Copy System Info' label='Copy System Info'
color='primary' color='primary'
@click='' @click=''
:disabled='loading > 0' :disabled='state.loading > 0'
) )
q-separator(inset) q-separator(inset)
.row.q-pa-md.q-col-gutter-md .row.q-pa-md.q-col-gutter-md
...@@ -43,18 +43,18 @@ q-page.admin-system ...@@ -43,18 +43,18 @@ q-page.admin-system
q-item q-item
blueprint-icon(icon='breakable', :hue-rotate='-45') blueprint-icon(icon='breakable', :hue-rotate='-45')
q-item-section q-item-section
q-item-label {{ $t('admin.system.currentVersion') }} q-item-label {{ t('admin.system.currentVersion') }}
q-item-label(caption) {{$t('admin.system.currentVersionHint')}} q-item-label(caption) {{t('admin.system.currentVersionHint')}}
q-item-section q-item-section
q-item-label.dark-value(caption) {{ info.currentVersion }} q-item-label.dark-value(caption) {{ state.info.currentVersion }}
q-separator(inset) q-separator(inset)
q-item q-item
blueprint-icon(icon='cloud-checked', :hue-rotate='-45') blueprint-icon(icon='cloud-checked', :hue-rotate='-45')
q-item-section q-item-section
q-item-label {{ $t('admin.system.latestVersion') }} q-item-label {{ t('admin.system.latestVersion') }}
q-item-label(caption) {{$t('admin.system.latestVersionHint')}} q-item-label(caption) {{t('admin.system.latestVersionHint')}}
q-item-section q-item-section
q-item-label.dark-value(caption) {{ info.latestVersion }} q-item-label.dark-value(caption) {{ state.info.latestVersion }}
//- ----------------------- //- -----------------------
//- CLIENT //- CLIENT
...@@ -62,44 +62,44 @@ q-page.admin-system ...@@ -62,44 +62,44 @@ q-page.admin-system
q-no-ssr q-no-ssr
q-card.q-mt-md.q-pb-sm.shadow-1 q-card.q-mt-md.q-pb-sm.shadow-1
q-card-section q-card-section
.text-subtitle1 {{$t('admin.system.client')}} .text-subtitle1 {{t('admin.system.client')}}
q-item q-item
blueprint-icon(icon='navigation-toolbar-top', :hue-rotate='-45') blueprint-icon(icon='navigation-toolbar-top', :hue-rotate='-45')
q-item-section q-item-section
q-item-label {{$t('admin.system.browser')}} q-item-label {{t('admin.system.browser')}}
q-item-label(caption) {{$t('admin.system.browserHint')}} q-item-label(caption) {{t('admin.system.browserHint')}}
q-item-section q-item-section
q-item-label.dark-value(caption) {{ clientBrowser }} q-item-label.dark-value(caption) {{ clientBrowser }}
q-separator(inset) q-separator(inset)
q-item q-item
blueprint-icon(icon='computer', :hue-rotate='-45') blueprint-icon(icon='computer', :hue-rotate='-45')
q-item-section q-item-section
q-item-label {{$t('admin.system.clientPlatform')}} q-item-label {{t('admin.system.clientPlatform')}}
q-item-label(caption) {{$t('admin.system.clientPlatformHint')}} q-item-label(caption) {{t('admin.system.clientPlatformHint')}}
q-item-section q-item-section
q-item-label.dark-value(caption) {{ clientPlatform }} q-item-label.dark-value(caption) {{ clientPlatform }}
q-separator(inset) q-separator(inset)
q-item q-item
blueprint-icon(icon='translation', :hue-rotate='-45') blueprint-icon(icon='translation', :hue-rotate='-45')
q-item-section q-item-section
q-item-label {{$t('admin.system.clientLanguage')}} q-item-label {{t('admin.system.clientLanguage')}}
q-item-label(caption) {{$t('admin.system.clientLanguageHint')}} q-item-label(caption) {{t('admin.system.clientLanguageHint')}}
q-item-section q-item-section
q-item-label.dark-value(caption) {{ clientLanguage }} q-item-label.dark-value(caption) {{ clientLanguage }}
q-separator(inset) q-separator(inset)
q-item q-item
blueprint-icon(icon='cookies', :hue-rotate='-45') blueprint-icon(icon='cookies', :hue-rotate='-45')
q-item-section q-item-section
q-item-label {{$t('admin.system.clientCookies')}} q-item-label {{t('admin.system.clientCookies')}}
q-item-label(caption) {{$t('admin.system.clientCookiesHint')}} q-item-label(caption) {{t('admin.system.clientCookiesHint')}}
q-item-section q-item-section
q-item-label.dark-value(caption) {{ clientCookies }} q-item-label.dark-value(caption) {{ clientCookies }}
q-separator(inset) q-separator(inset)
q-item q-item
blueprint-icon(icon='widescreen', :hue-rotate='-45') blueprint-icon(icon='widescreen', :hue-rotate='-45')
q-item-section q-item-section
q-item-label {{$t('admin.system.clientViewport')}} q-item-label {{t('admin.system.clientViewport')}}
q-item-label(caption) {{$t('admin.system.clientViewportHint')}} q-item-label(caption) {{t('admin.system.clientViewportHint')}}
q-item-section q-item-section
q-item-label.dark-value(caption) {{ clientViewport }} q-item-label.dark-value(caption) {{ clientViewport }}
...@@ -109,86 +109,86 @@ q-page.admin-system ...@@ -109,86 +109,86 @@ q-page.admin-system
//- ----------------------- //- -----------------------
q-card.q-pb-sm.shadow-1 q-card.q-pb-sm.shadow-1
q-card-section q-card-section
.text-subtitle1 {{$t('admin.system.engines')}} .text-subtitle1 {{t('admin.system.engines')}}
q-item q-item
blueprint-icon(icon='nodejs', :hue-rotate='-45') blueprint-icon(icon='nodejs', :hue-rotate='-45')
q-item-section q-item-section
q-item-label Node.js q-item-label Node.js
q-item-label(caption) {{$t('admin.system.nodejsHint')}} q-item-label(caption) {{t('admin.system.nodejsHint')}}
q-item-section q-item-section
q-item-label.dark-value(caption) {{ info.nodeVersion }} q-item-label.dark-value(caption) {{ state.info.nodeVersion }}
q-separator(inset) q-separator(inset)
q-item q-item
blueprint-icon(icon='postgresql', :hue-rotate='-45') blueprint-icon(icon='postgresql', :hue-rotate='-45')
q-item-section q-item-section
q-item-label {{$t('admin.system.database')}} q-item-label {{t('admin.system.database')}}
q-item-label(caption) {{$t('admin.system.databaseHint')}} q-item-label(caption) {{t('admin.system.databaseHint')}}
q-item-section q-item-section
q-item-label.dark-value(caption) PostgreSQL {{dbVersion}} q-item-label.dark-value(caption) PostgreSQL {{dbVersion}}
q-separator(inset) q-separator(inset)
q-item q-item
blueprint-icon(icon='database', :hue-rotate='-45') blueprint-icon(icon='database', :hue-rotate='-45')
q-item-section q-item-section
q-item-label {{$t('admin.system.databaseHost')}} q-item-label {{t('admin.system.databaseHost')}}
q-item-label(caption) {{$t('admin.system.databaseHostHint')}} q-item-label(caption) {{t('admin.system.databaseHostHint')}}
q-item-section q-item-section
q-item-label.dark-value(caption) {{ info.dbHost }} q-item-label.dark-value(caption) {{ state.info.dbHost }}
//- ----------------------- //- -----------------------
//- HOST INFORMATION //- HOST INFORMATION
//- ----------------------- //- -----------------------
q-card.q-mt-md.q-pb-sm.shadow-1 q-card.q-mt-md.q-pb-sm.shadow-1
q-card-section q-card-section
.text-subtitle1 {{ $t('admin.system.hostInfo') }} .text-subtitle1 {{ t('admin.system.hostInfo') }}
q-item q-item
blueprint-icon(:icon='platformLogo', :hue-rotate='-45') blueprint-icon(:icon='platformLogo', :hue-rotate='-45')
q-item-section q-item-section
q-item-label {{ $t('admin.system.os') }} q-item-label {{ t('admin.system.os') }}
q-item-label(caption) {{$t('admin.system.osHint')}} q-item-label(caption) {{t('admin.system.osHint')}}
q-item-section q-item-section
q-item-label.dark-value(caption) {{ (info.platform === 'docker') ? 'Docker Container (Linux)' : info.operatingSystem }} q-item-label.dark-value(caption) {{ (state.info.platform === 'docker') ? 'Docker Container (Linux)' : state.info.operatingSystem }}
q-separator(inset) q-separator(inset)
q-item q-item
blueprint-icon(icon='server', :hue-rotate='-45') blueprint-icon(icon='server', :hue-rotate='-45')
q-item-section q-item-section
q-item-label {{ $t('admin.system.hostname') }} q-item-label {{ t('admin.system.hostname') }}
q-item-label(caption) {{$t('admin.system.hostnameHint')}} q-item-label(caption) {{t('admin.system.hostnameHint')}}
q-item-section q-item-section
q-item-label.dark-value(caption) {{ info.hostname }} q-item-label.dark-value(caption) {{ state.info.hostname }}
q-separator(inset) q-separator(inset)
q-item q-item
blueprint-icon(icon='processor', :hue-rotate='-45') blueprint-icon(icon='processor', :hue-rotate='-45')
q-item-section q-item-section
q-item-label {{ $t('admin.system.cpuCores') }} q-item-label {{ t('admin.system.cpuCores') }}
q-item-label(caption) {{$t('admin.system.cpuCoresHint')}} q-item-label(caption) {{t('admin.system.cpuCoresHint')}}
q-item-section q-item-section
q-item-label.dark-value(caption) {{ info.cpuCores }} q-item-label.dark-value(caption) {{ state.info.cpuCores }}
q-separator(inset) q-separator(inset)
q-item q-item
blueprint-icon(icon='memory-slot', :hue-rotate='-45') blueprint-icon(icon='memory-slot', :hue-rotate='-45')
q-item-section q-item-section
q-item-label {{ $t('admin.system.totalRAM') }} q-item-label {{ t('admin.system.totalRAM') }}
q-item-label(caption) {{$t('admin.system.totalRAMHint')}} q-item-label(caption) {{t('admin.system.totalRAMHint')}}
q-item-section q-item-section
q-item-label.dark-value(caption) {{ info.ramTotal }} q-item-label.dark-value(caption) {{ state.info.ramTotal }}
q-separator(inset) q-separator(inset)
q-item q-item
blueprint-icon(icon='program', :hue-rotate='-45') blueprint-icon(icon='program', :hue-rotate='-45')
q-item-section q-item-section
q-item-label {{ $t('admin.system.workingDirectory') }} q-item-label {{ t('admin.system.workingDirectory') }}
q-item-label(caption) {{$t('admin.system.workingDirectoryHint')}} q-item-label(caption) {{t('admin.system.workingDirectoryHint')}}
q-item-section q-item-section
q-item-label.dark-value(caption) {{ info.workingDirectory }} q-item-label.dark-value(caption) {{ state.info.workingDirectory }}
q-separator(inset) q-separator(inset)
q-item q-item
blueprint-icon(icon='automation', :hue-rotate='-45') blueprint-icon(icon='automation', :hue-rotate='-45')
q-item-section q-item-section
q-item-label {{ $t('admin.system.configFile') }} q-item-label {{ t('admin.system.configFile') }}
q-item-label(caption) {{$t('admin.system.configFileHint')}} q-item-label(caption) {{t('admin.system.configFileHint')}}
q-item-section q-item-section
q-item-label.dark-value(caption) {{ info.configFile }} q-item-label.dark-value(caption) {{ state.info.configFile }}
//- v-list-item-action-text {{ $t('admin.system.published') }} {{ info.latestVersionReleaseDate | moment('from') }} //- v-list-item-action-text {{ t('admin.system.published') }} {{ state.info.latestVersionReleaseDate | moment('from') }}
//- v-card-actions(v-if='info.upgradeCapable && !isLatestVersion && info.platform === `docker`', :class='$vuetify.theme.dark ? `grey darken-3-d5` : `indigo lighten-5`') //- v-card-actions(v-if='info.upgradeCapable && !isLatestVersion && info.platform === `docker`', :class='$vuetify.theme.dark ? `grey darken-3-d5` : `indigo lighten-5`')
//- .caption.indigo--text.pl-3(:class='$vuetify.theme.dark ? `text--lighten-4` : ``') Wiki.js can perform the upgrade to the latest version for you. //- .caption.indigo--text.pl-3(:class='$vuetify.theme.dark ? `text--lighten-4` : ``') Wiki.js can perform the upgrade to the latest version for you.
//- v-spacer //- v-spacer
...@@ -226,28 +226,47 @@ q-page.admin-system ...@@ -226,28 +226,47 @@ q-page.admin-system
//- ) //- )
</template> </template>
<script> <script setup>
import _get from 'lodash/get'
import cloneDeep from 'lodash/cloneDeep' import cloneDeep from 'lodash/cloneDeep'
import gql from 'graphql-tag' import gql from 'graphql-tag'
import { createMetaMixin } from 'quasar' import { useI18n } from 'vue-i18n'
import { useMeta, useQuasar } from 'quasar'
import { computed, onMounted, reactive, ref, watch } from 'vue'
import ClipboardJS from 'clipboard' import ClipboardJS from 'clipboard'
// import { SelfBuildingSquareSpinner } from 'epic-spinners' import { useAdminStore } from 'src/stores/admin'
import { useSiteStore } from 'src/stores/site'
import { useDataStore } from 'src/stores/data'
import { useRoute, useRouter } from 'vue-router'
export default { // QUASAR
mixins: [
createMetaMixin(function () { const $q = useQuasar()
return {
title: this.$t('admin.system.title') // STORES
}
}) const adminStore = useAdminStore()
], const siteStore = useSiteStore()
components: { const dataStore = useDataStore()
// SelfBuildingSquareSpinner
}, // ROUTER
data () {
return { const router = useRouter()
const route = useRoute()
// I18N
const { t } = useI18n()
// META
useMeta({
title: t('admin.system.title')
})
// DATA
const state = reactive({
clip: null, clip: null,
loading: 0, loading: 0,
isUpgrading: false, isUpgrading: false,
...@@ -256,14 +275,19 @@ export default { ...@@ -256,14 +275,19 @@ export default {
info: { info: {
platform: '' platform: ''
} }
} })
},
computed: { // REFS
dbVersion () {
return _get(this.info, 'dbVersion', '').replace(/(?:\r\n|\r|\n)/g, ', ') const copySysInfoBtn = ref(null)
},
platformLogo () { // COMPUTED
switch (this.info.platform) {
const dbVersion = computed(() => {
return state.info?.dbVersion?.replace(/(?:\r\n|\r|\n)/g, ', ')
})
const platformLogo = computed(() => {
switch (state.info.platform) {
case 'docker': case 'docker':
return 'docker-container' return 'docker-container'
case 'darwin': case 'darwin':
...@@ -279,58 +303,32 @@ export default { ...@@ -279,58 +303,32 @@ export default {
default: default:
return 'washing-machine' return 'washing-machine'
} }
}, })
isLatestVersion () { const isLatestVersion = computed(() => {
return this.info.currentVersion === this.info.latestVersion return state.info.currentVersion === state.info.latestVersion
}, })
clientBrowser () { const clientBrowser = computed(() => {
return !import.meta.env.SSR ? navigator.userAgent : '' return !import.meta.env.SSR ? navigator.userAgent : ''
}, })
clientPlatform () { const clientPlatform = computed(() => {
return !import.meta.env.SSR ? navigator.platform : '' return !import.meta.env.SSR ? navigator.platform : ''
}, })
clientLanguage () { const clientLanguage = computed(() => {
return !import.meta.env.SSR ? navigator.language : '' return !import.meta.env.SSR ? navigator.language : ''
}, })
clientCookies () { const clientCookies = computed(() => {
return !import.meta.env.SSR ? navigator.cookieEnabled : '' return !import.meta.env.SSR ? navigator.cookieEnabled : ''
}, })
clientViewport () { const clientViewport = computed(() => {
return !import.meta.env.SSR ? `${document.documentElement.clientWidth}x${document.documentElement.clientHeight}` : '' return !import.meta.env.SSR ? `${document.documentElement.clientWidth}x${document.documentElement.clientHeight}` : ''
} })
},
mounted () {
this.load()
this.clip = new ClipboardJS(this.$refs.copySysInfoBtn.$el, {
text: () => {
return `Wiki.js ${this.info.currentVersion}
Postgres ${this.dbVersion}
Node.js ${this.info.nodeVersion}
OS: ${this.info.operatingSystem}
Platform: ${this.info.platform}
CPU Cores: ${this.info.cpuCores}
Total RAM: ${this.info.ramTotal}`
}
})
this.clip.on('success', () => { // METHODS
this.$q.notify({
message: 'Info copied successfully', async function load () {
icon: 'las la-clipboard' state.loading++
}) $q.loading.show()
}) const resp = await APOLLO_CLIENT.query({
this.clip.on('error', () => {
this.$q.notify({
type: 'negative',
message: 'Failed to copy to system info'
})
})
},
methods: {
async load () {
this.loading++
this.$q.loading.show()
const resp = await this.$apollo.query({
query: gql` query: gql`
query getSystemInfo { query getSystemInfo {
systemInfo { systemInfo {
...@@ -353,53 +351,83 @@ Total RAM: ${this.info.ramTotal}` ...@@ -353,53 +351,83 @@ Total RAM: ${this.info.ramTotal}`
`, `,
fetchPolicy: 'network-only' fetchPolicy: 'network-only'
}) })
this.info = cloneDeep(resp?.data?.systemInfo) state.info = cloneDeep(resp?.data?.systemInfo)
this.$q.loading.hide() $q.loading.hide()
this.loading-- state.loading--
}, }
async performUpgrade () {
this.isUpgrading = true // async function performUpgrade () {
this.isUpgradingStarted = false // state.isUpgrading = true
this.upgradeProgress = 0 // state.isUpgradingStarted = false
this.$store.commit('loadingStart', 'admin-system-upgrade') // state.upgradeProgress = 0
try { // this.$store.commit('loadingStart', 'admin-system-upgrade')
const respRaw = await this.$apollo.mutate({ // try {
mutation: gql` // const respRaw = await APOLLO_CLIENT.mutate({
mutation performUpdate { // mutation: gql`
system { // mutation performUpdate {
performUpgrade { // system {
responseResult { // performUpgrade {
succeeded // responseResult {
errorCode // succeeded
slug // errorCode
message // slug
} // message
} // }
} // }
// }
// }
// `
// })
// const resp = _get(respRaw, 'data.system.performUpgrade.responseResult', {})
// if (resp.succeeded) {
// this.isUpgradingStarted = true
// const progressInterval = setInterval(() => {
// this.upgradeProgress += 0.83
// }, 500)
// setTimeout(() => {
// clearInterval(progressInterval)
// window.location.reload(true)
// }, 60000)
// } else {
// throw new Error(resp.message)
// }
// } catch (err) {
// this.$store.commit('pushGraphError', err)
// this.$store.commit('loadingStop', 'admin-system-upgrade')
// this.isUpgrading = false
// }
// }
// MOUNTED
onMounted(() => {
load()
const clip = new ClipboardJS(copySysInfoBtn.value.$el, {
text: () => {
return `Wiki.js ${state.info.currentVersion}
Postgres ${dbVersion.value}
Node.js ${state.info.nodeVersion}
OS: ${state.info.operatingSystem}
Platform: ${state.info.platform}
CPU Cores: ${state.info.cpuCores}
Total RAM: ${state.info.ramTotal}`
} }
`
}) })
const resp = _get(respRaw, 'data.system.performUpgrade.responseResult', {})
if (resp.succeeded) { clip.on('success', () => {
this.isUpgradingStarted = true $q.notify({
const progressInterval = setInterval(() => { message: 'Info copied successfully',
this.upgradeProgress += 0.83 icon: 'las la-clipboard'
}, 500) })
setTimeout(() => { })
clearInterval(progressInterval) clip.on('error', () => {
window.location.reload(true) $q.notify({
}, 60000) type: 'negative',
} else { message: 'Failed to copy to system info'
throw new Error(resp.message) })
} })
} catch (err) { })
this.$store.commit('pushGraphError', err)
this.$store.commit('loadingStop', 'admin-system-upgrade')
this.isUpgrading = false
}
}
}
}
</script> </script>
<style lang='scss'> <style lang='scss'>
......
ux/src/router/routes.js
View file @ 07d274ca
...@@ -48,7 +48,7 @@ const routes = [ ...@@ -48,7 +48,7 @@ const routes = [
// { path: 'extensions', component: () => import('../pages/AdminExtensions.vue') }, // { path: 'extensions', component: () => import('../pages/AdminExtensions.vue') },
// { path: 'mail', component: () => import('../pages/AdminMail.vue') }, // { path: 'mail', component: () => import('../pages/AdminMail.vue') },
// { path: 'security', component: () => import('../pages/AdminSecurity.vue') }, // { path: 'security', component: () => import('../pages/AdminSecurity.vue') },
// { path: 'system', component: () => import('../pages/AdminSystem.vue') }, { path: 'system', component: () => import('../pages/AdminSystem.vue') },
// { path: 'utilities', component: () => import('../pages/AdminUtilities.vue') }, // { path: 'utilities', component: () => import('../pages/AdminUtilities.vue') },
// { path: 'webhooks', component: () => import('../pages/AdminWebhooks.vue') }, // { path: 'webhooks', component: () => import('../pages/AdminWebhooks.vue') },
{ path: 'flags', component: () => import('../pages/AdminFlags.vue') } { path: 'flags', component: () => import('../pages/AdminFlags.vue') }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment