homelab/traefik
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore(webui): Migrate to Quasar 2.x and Vue.js 3.x

Browse source
This commit is contained in:
Andi Sardina Ramos 2024-02-26 16:02:04 +02:00 • committed by GitHub
parent 153765f99f
commit f7edb394f2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
65 changed files with 4374 additions and 7999 deletions
Download patch file Download diff file Expand all files Collapse all files

316
webui/src/pages/dashboard/Index.vue
View file

@ -3,20 +3,44 @@
<section class="app-section">
<div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-xl q-pb-lg">
<div class="row no-wrap items-center q-mb-lg app-title">
<q-icon name="eva-log-in-outline"></q-icon>
<div class="app-title-label">Entrypoints</div>
</div>
<div v-if="!loadingEntryGetAll" class="row items-center q-col-gutter-lg">
<div
v-for="(entryItems, index) in entryAll.items" :key="index"
class="col-12 col-sm-6 col-md-2">
<panel-entry :name="entryItems.name" :address="entryItems.address"/>
<q-icon name="eva-log-in-outline" />
<div class="app-title-label">
Entrypoints
</div>
</div>
<div v-else class="row items-center q-col-gutter-lg">
<div
v-if="!loadingEntryGetAll"
class="row items-center q-col-gutter-lg"
>
<div
v-for="(entryItems, index) in entryAll.items"
:key="index"
class="col-12 col-sm-6 col-md-2"
>
<panel-entry
:name="entryItems.name"
:address="entryItems.address"
/>
</div>
</div>
<div
v-else
class="row items-center q-col-gutter-lg"
>
<div class="col-12 col-sm-6 col-md-2">
<p v-for="n in 3" :key="n" class="flex">
<SkeletonBox :min-width="15" :max-width="15" style="margin-right: 2%"/> <SkeletonBox :min-width="50" :max-width="83"/>
<p
v-for="n in 3"
:key="n"
class="flex"
>
<SkeletonBox
:min-width="15"
:max-width="15"
style="margin-right: 2%"
/> <SkeletonBox
:min-width="50"
:max-width="83"
/>
</p>
</div>
</div>
@ -26,20 +50,45 @@
<section class="app-section">
<div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-lg q-pb-lg">
<div class="row no-wrap items-center q-mb-lg app-title">
<q-icon name="eva-globe-outline"></q-icon>
<div class="app-title-label">HTTP</div>
</div>
<div v-if="!loadingOverview" class="row items-center q-col-gutter-lg">
<div
v-for="(overviewHTTP, index) in allHTTP" :key="index"
class="col-12 col-sm-6 col-md-4">
<panel-chart :name="index" :data="overviewHTTP" type="http"/>
<q-icon name="eva-globe-outline" />
<div class="app-title-label">
HTTP
</div>
</div>
<div v-else class="row items-center q-col-gutter-lg">
<div
v-if="!loadingOverview"
class="row items-center q-col-gutter-lg"
>
<div
v-for="(overviewHTTP, index) in allHTTP"
:key="index"
class="col-12 col-sm-6 col-md-4"
>
<panel-chart
:name="index"
:data="overviewHTTP"
type="http"
/>
</div>
</div>
<div
v-else
class="row items-center q-col-gutter-lg"
>
<div class="col-12 col-sm-6 col-md-4">
<p v-for="n in 6" :key="n" class="flex">
<SkeletonBox :min-width="15" :max-width="15" style="margin-right: 2%"/> <SkeletonBox :min-width="50" :max-width="83"/>
<p
v-for="n in 6"
:key="n"
class="flex"
>
<SkeletonBox
:min-width="15"
:max-width="15"
style="margin-right: 2%"
/> <SkeletonBox
:min-width="50"
:max-width="83"
/>
</p>
</div>
</div>
@ -49,20 +98,45 @@
<section class="app-section">
<div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-lg q-pb-lg">
<div class="row no-wrap items-center q-mb-lg app-title">
<q-icon name="eva-globe-3"></q-icon>
<div class="app-title-label">TCP</div>
</div>
<div v-if="!loadingOverview" class="row items-center q-col-gutter-lg">
<div
v-for="(overviewTCP, index) in allTCP" :key="index"
class="col-12 col-sm-6 col-md-4">
<panel-chart :name="index" :data="overviewTCP" type="tcp"/>
<q-icon name="eva-globe-3" />
<div class="app-title-label">
TCP
</div>
</div>
<div v-else class="row items-center q-col-gutter-lg">
<div
v-if="!loadingOverview"
class="row items-center q-col-gutter-lg"
>
<div
v-for="(overviewTCP, index) in allTCP"
:key="index"
class="col-12 col-sm-6 col-md-4"
>
<panel-chart
:name="index"
:data="overviewTCP"
type="tcp"
/>
</div>
</div>
<div
v-else
class="row items-center q-col-gutter-lg"
>
<div class="col-12 col-sm-6 col-md-4">
<p v-for="n in 6" :key="n" class="flex">
<SkeletonBox :min-width="15" :max-width="15" style="margin-right: 2%"/> <SkeletonBox :min-width="50" :max-width="83"/>
<p
v-for="n in 6"
:key="n"
class="flex"
>
<SkeletonBox
:min-width="15"
:max-width="15"
style="margin-right: 2%"
/> <SkeletonBox
:min-width="50"
:max-width="83"
/>
</p>
</div>
</div>
@ -72,20 +146,45 @@
<section class="app-section">
<div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-lg q-pb-lg">
<div class="row no-wrap items-center q-mb-lg app-title">
<q-icon name="eva-globe-3"></q-icon>
<div class="app-title-label">UDP</div>
</div>
<div v-if="!loadingOverview" class="row items-center q-col-gutter-lg">
<div
v-for="(overviewUDP, index) in allUDP" :key="index"
class="col-12 col-sm-6 col-md-4">
<panel-chart :name="index" :data="overviewUDP" type="udp"/>
<q-icon name="eva-globe-3" />
<div class="app-title-label">
UDP
</div>
</div>
<div v-else class="row items-center q-col-gutter-lg">
<div
v-if="!loadingOverview"
class="row items-center q-col-gutter-lg"
>
<div
v-for="(overviewUDP, index) in allUDP"
:key="index"
class="col-12 col-sm-6 col-md-4"
>
<panel-chart
:name="index"
:data="overviewUDP"
type="udp"
/>
</div>
</div>
<div
v-else
class="row items-center q-col-gutter-lg"
>
<div class="col-12 col-sm-6 col-md-4">
<p v-for="n in 6" :key="n" class="flex">
<SkeletonBox :min-width="15" :max-width="15" style="margin-right: 2%"/> <SkeletonBox :min-width="50" :max-width="83"/>
<p
v-for="n in 6"
:key="n"
class="flex"
>
<SkeletonBox
:min-width="15"
:max-width="15"
style="margin-right: 2%"
/> <SkeletonBox
:min-width="50"
:max-width="83"
/>
</p>
</div>
</div>
@ -95,20 +194,44 @@
<section class="app-section">
<div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-lg q-pb-lg">
<div class="row no-wrap items-center q-mb-lg app-title">
<q-icon name="eva-toggle-right"></q-icon>
<div class="app-title-label">Features</div>
</div>
<div v-if="!loadingOverview" class="row items-center q-col-gutter-lg">
<div
v-for="(overviewFeature, index) in allFeatures" :key="index"
class="col-12 col-sm-6 col-md-2">
<panel-feature :feature-key="index" :feature-val="overviewFeature"/>
<q-icon name="eva-toggle-right" />
<div class="app-title-label">
Features
</div>
</div>
<div v-else class="row items-center q-col-gutter-lg">
<div
v-if="!loadingOverview"
class="row items-center q-col-gutter-lg"
>
<div
v-for="(overviewFeature, index) in allFeatures"
:key="index"
class="col-12 col-sm-6 col-md-2"
>
<panel-feature
:feature-key="index"
:feature-val="overviewFeature"
/>
</div>
</div>
<div
v-else
class="row items-center q-col-gutter-lg"
>
<div class="col-12 col-sm-6 col-md-2">
<p v-for="n in 3" :key="n" class="flex">
<SkeletonBox :min-width="15" :max-width="15" style="margin-right: 2%"/> <SkeletonBox :min-width="50" :max-width="83"/>
<p
v-for="n in 3"
:key="n"
class="flex"
>
<SkeletonBox
:min-width="15"
:max-width="15"
style="margin-right: 2%"
/> <SkeletonBox
:min-width="50"
:max-width="83"
/>
</p>
</div>
</div>
@ -118,39 +241,60 @@
<section class="app-section">
<div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-lg q-pb-xl">
<div class="row no-wrap items-center q-mb-lg app-title">
<q-icon name="eva-cube"></q-icon>
<div class="app-title-label">Providers</div>
</div>
<div v-if="!loadingOverview" class="row items-center q-col-gutter-lg">
<div
v-for="(overviewProvider, index) in allProviders" :key="index"
class="col-12 col-sm-6 col-md-2">
<panel-provider :name="overviewProvider"/>
<q-icon name="eva-cube" />
<div class="app-title-label">
Providers
</div>
</div>
<div v-else class="row items-center q-col-gutter-lg">
<div
v-if="!loadingOverview"
class="row items-center q-col-gutter-lg"
>
<div
v-for="(overviewProvider, index) in allProviders"
:key="index"
class="col-12 col-sm-6 col-md-2"
>
<panel-provider :name="overviewProvider" />
</div>
</div>
<div
v-else
class="row items-center q-col-gutter-lg"
>
<div class="col-12 col-sm-6 col-md-2">
<p v-for="n in 3" :key="n" class="flex">
<SkeletonBox :min-width="15" :max-width="15" style="margin-right: 2%"/> <SkeletonBox :min-width="50" :max-width="83"/>
<p
v-for="n in 3"
:key="n"
class="flex"
>
<SkeletonBox
:min-width="15"
:max-width="15"
style="margin-right: 2%"
/> <SkeletonBox
:min-width="50"
:max-width="83"
/>
</p>
</div>
</div>
</div>
</section>
</page-default>
</template>
<script>
import { defineComponent } from 'vue'
import { mapActions, mapGetters } from 'vuex'
import PageDefault from '../../components/_commons/PageDefault'
import SkeletonBox from '../../components/_commons/SkeletonBox'
import PanelEntry from '../../components/dashboard/PanelEntry'
import PanelChart from '../../components/dashboard/PanelChart'
import PanelFeature from '../../components/dashboard/PanelFeature'
import PanelProvider from '../../components/dashboard/PanelProvider'
import PageDefault from '../../components/_commons/PageDefault.vue'
import SkeletonBox from '../../components/_commons/SkeletonBox.vue'
import PanelEntry from '../../components/dashboard/PanelEntry.vue'
import PanelChart from '../../components/dashboard/PanelChart.vue'
import PanelFeature from '../../components/dashboard/PanelFeature.vue'
import PanelProvider from '../../components/dashboard/PanelProvider.vue'
export default {
export default defineComponent({
name: 'PageDashboardIndex',
components: {
PageDefault,
@ -189,6 +333,17 @@ export default {
return this.overviewAll.items.providers
}
},
created () {
this.fetchAll()
this.intervalRefresh = setInterval(this.fetchOverview, this.intervalRefreshTime)
},
beforeUnmount () {
clearInterval(this.intervalRefresh)
clearTimeout(this.timeOutEntryGetAll)
clearTimeout(this.timeOutOverviewAll)
this.$store.commit('entrypoints/getAllClear')
this.$store.commit('core/getOverviewClear')
},
methods: {
...mapActions('entrypoints', { entryGetAll: 'getAll' }),
...mapActions('core', { getOverview: 'getOverview' }),
@ -222,19 +377,8 @@ export default {
this.fetchEntries()
this.fetchOverview()
}
},
created () {
this.fetchAll()
this.intervalRefresh = setInterval(this.fetchOverview, this.intervalRefreshTime)
},
beforeDestroy () {
clearInterval(this.intervalRefresh)
clearTimeout(this.timeOutEntryGetAll)
clearTimeout(this.timeOutOverviewAll)
this.$store.commit('entrypoints/getAllClear')
this.$store.commit('core/getOverviewClear')
}
}
})
</script>
<style scoped lang="scss">