msb-public
/
wiki
mirror of https://github.com/requarks/wiki
1
0
Code Issues Projects Releases Wiki Activity

refactor: admin system info to vue3 comp api

Browse Source
pull/5698/head
NGPixel 3 years ago
parent 464f55cf46
commit 07d274ca6c
No known key found for this signature in database
GPG Key ID: 8FDA2F1757F60D63
3 changed files with 244 additions and 216 deletions
Show Stats Download Patch File Download Diff File

2
ux/src/pages/AdminGeneral.vue
Unescape View File

@ -589,8 +589,8 @@ async function save () {
type: 'positive',
message: t('admin.general.saveSuccess')
})
await adminStore.fetchSites()
if (adminStore.currentSiteId === siteStore.id) {
await adminStore.fetchSites()
siteStore.$patch({
title: state.config.title,
description: state.config.description,

456
ux/src/pages/AdminSystem.vue
Unescape View File

@ -4,8 +4,8 @@ q-page.admin-system
.col-auto
img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-processor.svg')
.col.q-pl-md
.text-h5.text-primary.animated.fadeInLeft {{ $t('admin.system.title') }}
.text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ $t('admin.system.subtitle') }}
.text-h5.text-primary.animated.fadeInLeft {{ t('admin.system.title') }}
.text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.system.subtitle') }}
.col-auto
q-btn.q-mr-sm.acrylic-btn(
icon='las la-question-circle'
@ -16,20 +16,20 @@ q-page.admin-system
type='a'
)
q-btn.q-mr-sm.acrylic-btn(
icon='las la-redo-alt'
icon='fa-solid fa-rotate'
flat
color='secondary'
:loading='loading > 0'
:loading='state.loading > 0'
@click='load'
)
q-btn.acrylic-btn(
ref='copySysInfoBtn'
flat
icon='las la-clipboard'
icon='fa-regular fa-clipboard'
label='Copy System Info'
color='primary'
@click=''
:disabled='loading > 0'
:disabled='state.loading > 0'
)
q-separator(inset)
.row.q-pa-md.q-col-gutter-md
@ -43,18 +43,18 @@ q-page.admin-system
q-item
blueprint-icon(icon='breakable', :hue-rotate='-45')
q-item-section
q-item-label {{ $t('admin.system.currentVersion') }}
q-item-label(caption) {{$t('admin.system.currentVersionHint')}}
q-item-label {{ t('admin.system.currentVersion') }}
q-item-label(caption) {{t('admin.system.currentVersionHint')}}
q-item-section
q-item-label.dark-value(caption) {{ info.currentVersion }}
q-item-label.dark-value(caption) {{ state.info.currentVersion }}
q-separator(inset)
q-item
blueprint-icon(icon='cloud-checked', :hue-rotate='-45')
q-item-section
q-item-label {{ $t('admin.system.latestVersion') }}
q-item-label(caption) {{$t('admin.system.latestVersionHint')}}
q-item-label {{ t('admin.system.latestVersion') }}
q-item-label(caption) {{t('admin.system.latestVersionHint')}}
q-item-section
q-item-label.dark-value(caption) {{ info.latestVersion }}
q-item-label.dark-value(caption) {{ state.info.latestVersion }}
//- -----------------------
//- CLIENT
@ -62,44 +62,44 @@ q-page.admin-system
q-no-ssr
q-card.q-mt-md.q-pb-sm.shadow-1
q-card-section
.text-subtitle1 {{$t('admin.system.client')}}
.text-subtitle1 {{t('admin.system.client')}}
q-item
blueprint-icon(icon='navigation-toolbar-top', :hue-rotate='-45')
q-item-section
q-item-label {{$t('admin.system.browser')}}
q-item-label(caption) {{$t('admin.system.browserHint')}}
q-item-label {{t('admin.system.browser')}}
q-item-label(caption) {{t('admin.system.browserHint')}}
q-item-section
q-item-label.dark-value(caption) {{ clientBrowser }}
q-separator(inset)
q-item
blueprint-icon(icon='computer', :hue-rotate='-45')
q-item-section
q-item-label {{$t('admin.system.clientPlatform')}}
q-item-label(caption) {{$t('admin.system.clientPlatformHint')}}
q-item-label {{t('admin.system.clientPlatform')}}
q-item-label(caption) {{t('admin.system.clientPlatformHint')}}
q-item-section
q-item-label.dark-value(caption) {{ clientPlatform }}
q-separator(inset)
q-item
blueprint-icon(icon='translation', :hue-rotate='-45')
q-item-section
q-item-label {{$t('admin.system.clientLanguage')}}
q-item-label(caption) {{$t('admin.system.clientLanguageHint')}}
q-item-label {{t('admin.system.clientLanguage')}}
q-item-label(caption) {{t('admin.system.clientLanguageHint')}}
q-item-section
q-item-label.dark-value(caption) {{ clientLanguage }}
q-separator(inset)
q-item
blueprint-icon(icon='cookies', :hue-rotate='-45')
q-item-section
q-item-label {{$t('admin.system.clientCookies')}}
q-item-label(caption) {{$t('admin.system.clientCookiesHint')}}
q-item-label {{t('admin.system.clientCookies')}}
q-item-label(caption) {{t('admin.system.clientCookiesHint')}}
q-item-section
q-item-label.dark-value(caption) {{ clientCookies }}
q-separator(inset)
q-item
blueprint-icon(icon='widescreen', :hue-rotate='-45')
q-item-section
q-item-label {{$t('admin.system.clientViewport')}}
q-item-label(caption) {{$t('admin.system.clientViewportHint')}}
q-item-label {{t('admin.system.clientViewport')}}
q-item-label(caption) {{t('admin.system.clientViewportHint')}}
q-item-section
q-item-label.dark-value(caption) {{ clientViewport }}
@ -109,86 +109,86 @@ q-page.admin-system
//- -----------------------
q-card.q-pb-sm.shadow-1
q-card-section
.text-subtitle1 {{$t('admin.system.engines')}}
.text-subtitle1 {{t('admin.system.engines')}}
q-item
blueprint-icon(icon='nodejs', :hue-rotate='-45')
q-item-section
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-label.dark-value(caption) {{ info.nodeVersion }}
q-item-label.dark-value(caption) {{ state.info.nodeVersion }}
q-separator(inset)
q-item
blueprint-icon(icon='postgresql', :hue-rotate='-45')
q-item-section
q-item-label {{$t('admin.system.database')}}
q-item-label(caption) {{$t('admin.system.databaseHint')}}
q-item-label {{t('admin.system.database')}}
q-item-label(caption) {{t('admin.system.databaseHint')}}
q-item-section
q-item-label.dark-value(caption) PostgreSQL {{dbVersion}}
q-separator(inset)
q-item
blueprint-icon(icon='database', :hue-rotate='-45')
q-item-section
q-item-label {{$t('admin.system.databaseHost')}}
q-item-label(caption) {{$t('admin.system.databaseHostHint')}}
q-item-label {{t('admin.system.databaseHost')}}
q-item-label(caption) {{t('admin.system.databaseHostHint')}}
q-item-section
q-item-label.dark-value(caption) {{ info.dbHost }}
q-item-label.dark-value(caption) {{ state.info.dbHost }}
//- -----------------------
//- HOST INFORMATION
//- -----------------------
q-card.q-mt-md.q-pb-sm.shadow-1
q-card-section
.text-subtitle1 {{ $t('admin.system.hostInfo') }}
.text-subtitle1 {{ t('admin.system.hostInfo') }}
q-item
blueprint-icon(:icon='platformLogo', :hue-rotate='-45')
q-item-section
q-item-label {{ $t('admin.system.os') }}
q-item-label(caption) {{$t('admin.system.osHint')}}
q-item-label {{ t('admin.system.os') }}
q-item-label(caption) {{t('admin.system.osHint')}}
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-item
blueprint-icon(icon='server', :hue-rotate='-45')
q-item-section
q-item-label {{ $t('admin.system.hostname') }}
q-item-label(caption) {{$t('admin.system.hostnameHint')}}
q-item-label {{ t('admin.system.hostname') }}
q-item-label(caption) {{t('admin.system.hostnameHint')}}
q-item-section
q-item-label.dark-value(caption) {{ info.hostname }}
q-item-label.dark-value(caption) {{ state.info.hostname }}
q-separator(inset)
q-item
blueprint-icon(icon='processor', :hue-rotate='-45')
q-item-section
q-item-label {{ $t('admin.system.cpuCores') }}
q-item-label(caption) {{$t('admin.system.cpuCoresHint')}}
q-item-label {{ t('admin.system.cpuCores') }}
q-item-label(caption) {{t('admin.system.cpuCoresHint')}}
q-item-section
q-item-label.dark-value(caption) {{ info.cpuCores }}
q-item-label.dark-value(caption) {{ state.info.cpuCores }}
q-separator(inset)
q-item
blueprint-icon(icon='memory-slot', :hue-rotate='-45')
q-item-section
q-item-label {{ $t('admin.system.totalRAM') }}
q-item-label(caption) {{$t('admin.system.totalRAMHint')}}
q-item-label {{ t('admin.system.totalRAM') }}
q-item-label(caption) {{t('admin.system.totalRAMHint')}}
q-item-section
q-item-label.dark-value(caption) {{ info.ramTotal }}
q-item-label.dark-value(caption) {{ state.info.ramTotal }}
q-separator(inset)
q-item
blueprint-icon(icon='program', :hue-rotate='-45')
q-item-section
q-item-label {{ $t('admin.system.workingDirectory') }}
q-item-label(caption) {{$t('admin.system.workingDirectoryHint')}}
q-item-label {{ t('admin.system.workingDirectory') }}
q-item-label(caption) {{t('admin.system.workingDirectoryHint')}}
q-item-section
q-item-label.dark-value(caption) {{ info.workingDirectory }}
q-item-label.dark-value(caption) {{ state.info.workingDirectory }}
q-separator(inset)
q-item
blueprint-icon(icon='automation', :hue-rotate='-45')
q-item-section
q-item-label {{ $t('admin.system.configFile') }}
q-item-label(caption) {{$t('admin.system.configFileHint')}}
q-item-label {{ t('admin.system.configFile') }}
q-item-label(caption) {{t('admin.system.configFileHint')}}
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`')
//- .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
@ -226,180 +226,208 @@ q-page.admin-system
//- )
</template>
<script>
import _get from 'lodash/get'
<script setup>
import cloneDeep from 'lodash/cloneDeep'
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 { 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 {
mixins: [
createMetaMixin(function () {
return {
title: this.$t('admin.system.title')
}
})
],
components: {
// SelfBuildingSquareSpinner
},
data () {
return {
clip: null,
loading: 0,
isUpgrading: false,
isUpgradingStarted: false,
upgradeProgress: 0,
info: {
platform: ''
// QUASAR
const $q = useQuasar()
// STORES
const adminStore = useAdminStore()
const siteStore = useSiteStore()
const dataStore = useDataStore()
// ROUTER
const router = useRouter()
const route = useRoute()
// I18N
const { t } = useI18n()
// META
useMeta({
title: t('admin.system.title')
})
// DATA
const state = reactive({
clip: null,
loading: 0,
isUpgrading: false,
isUpgradingStarted: false,
upgradeProgress: 0,
info: {
platform: ''
}
})
// REFS
const copySysInfoBtn = ref(null)
// COMPUTED
const dbVersion = computed(() => {
return state.info?.dbVersion?.replace(/(?:\r\n|\r|\n)/g, ', ')
})
const platformLogo = computed(() => {
switch (state.info.platform) {
case 'docker':
return 'docker-container'
case 'darwin':
return 'apple-logo'
case 'linux':
if (this.info.operatingSystem.indexOf('Ubuntu') >= 0) {
return 'ubuntu'
} else {
return 'linux'
}
}
},
computed: {
dbVersion () {
return _get(this.info, 'dbVersion', '').replace(/(?:\r\n|\r|\n)/g, ', ')
},
platformLogo () {
switch (this.info.platform) {
case 'docker':
return 'docker-container'
case 'darwin':
return 'apple-logo'
case 'linux':
if (this.info.operatingSystem.indexOf('Ubuntu') >= 0) {
return 'ubuntu'
} else {
return 'linux'
}
case 'win32':
return 'windows8'
default:
return 'washing-machine'
case 'win32':
return 'windows8'
default:
return 'washing-machine'
}
})
const isLatestVersion = computed(() => {
return state.info.currentVersion === state.info.latestVersion
})
const clientBrowser = computed(() => {
return !import.meta.env.SSR ? navigator.userAgent : ''
})
const clientPlatform = computed(() => {
return !import.meta.env.SSR ? navigator.platform : ''
})
const clientLanguage = computed(() => {
return !import.meta.env.SSR ? navigator.language : ''
})
const clientCookies = computed(() => {
return !import.meta.env.SSR ? navigator.cookieEnabled : ''
})
const clientViewport = computed(() => {
return !import.meta.env.SSR ? `${document.documentElement.clientWidth}x${document.documentElement.clientHeight}` : ''
})
// METHODS
async function load () {
state.loading++
$q.loading.show()
const resp = await APOLLO_CLIENT.query({
query: gql`
query getSystemInfo {
systemInfo {
configFile
cpuCores
currentVersion
dbHost
dbVersion
hostname
latestVersion
latestVersionReleaseDate
nodeVersion
operatingSystem
platform
ramTotal
upgradeCapable
workingDirectory
}
}
},
isLatestVersion () {
return this.info.currentVersion === this.info.latestVersion
},
clientBrowser () {
return !import.meta.env.SSR ? navigator.userAgent : ''
},
clientPlatform () {
return !import.meta.env.SSR ? navigator.platform : ''
},
clientLanguage () {
return !import.meta.env.SSR ? navigator.language : ''
},
clientCookies () {
return !import.meta.env.SSR ? navigator.cookieEnabled : ''
},
clientViewport () {
return !import.meta.env.SSR ? `${document.documentElement.clientWidth}x${document.documentElement.clientHeight}` : ''
`,
fetchPolicy: 'network-only'
})
state.info = cloneDeep(resp?.data?.systemInfo)
$q.loading.hide()
state.loading--
}
// async function performUpgrade () {
// state.isUpgrading = true
// state.isUpgradingStarted = false
// state.upgradeProgress = 0
// this.$store.commit('loadingStart', 'admin-system-upgrade')
// try {
// const respRaw = await APOLLO_CLIENT.mutate({
// mutation: gql`
// mutation performUpdate {
// system {
// performUpgrade {
// responseResult {
// succeeded
// errorCode
// 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}`
}
},
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', () => {
this.$q.notify({
message: 'Info copied successfully',
icon: 'las la-clipboard'
})
clip.on('success', () => {
$q.notify({
message: 'Info copied successfully',
icon: 'las la-clipboard'
})
this.clip.on('error', () => {
this.$q.notify({
type: 'negative',
message: 'Failed to copy to system info'
})
})
clip.on('error', () => {
$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 getSystemInfo {
systemInfo {
configFile
cpuCores
currentVersion
dbHost
dbVersion
hostname
latestVersion
latestVersionReleaseDate
nodeVersion
operatingSystem
platform
ramTotal
upgradeCapable
workingDirectory
}
}
`,
fetchPolicy: 'network-only'
})
this.info = cloneDeep(resp?.data?.systemInfo)
this.$q.loading.hide()
this.loading--
},
async performUpgrade () {
this.isUpgrading = true
this.isUpgradingStarted = false
this.upgradeProgress = 0
this.$store.commit('loadingStart', 'admin-system-upgrade')
try {
const respRaw = await this.$apollo.mutate({
mutation: gql`
mutation performUpdate {
system {
performUpgrade {
responseResult {
succeeded
errorCode
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
}
}
}
}
})
})
</script>
<style lang='scss'>

2
ux/src/router/routes.js
Unescape View File

@ -48,7 +48,7 @@ const routes = [
// { path: 'extensions', component: () => import('../pages/AdminExtensions.vue') },
// { path: 'mail', component: () => import('../pages/AdminMail.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: 'webhooks', component: () => import('../pages/AdminWebhooks.vue') },
{ path: 'flags', component: () => import('../pages/AdminFlags.vue') }

Write Preview
Loading…
Cancel
Save