chore: fix request parse
This commit is contained in:
parent
d18168910e
commit
acf2e639c5
@ -1,27 +1,145 @@
|
||||
<template>
|
||||
<NavMenu v-if="use_nav" :usetitle="false" :title="title" navtitle="" :items="navMenuItems" @on-nav-menu="onNavMenu">
|
||||
<template #opslist v-if="clds_groups.length > 0 ">
|
||||
<li class="mr-3">
|
||||
<select id="cld-select" class="rounded-xl bg-light-300 form-select p-2 mt-1 block w-full ddark:hover:bg-gray-800 ddark:bg-gray-500 ddark:text-gray-200 bg-gray-200 text-gray-800" @change="update_cloud_selection">
|
||||
<option
|
||||
v-for="(cld, index) in clouds_options"
|
||||
:key="index"
|
||||
class="bg-gray-200 text-gray-800 appearance-none border-none inline-block py-3 pl-3 pr-8 rounded leading-tight ddark:hover:bg-gray-800 ddark:bg-gray-500 ddark:text-gray-200"
|
||||
:selected="cld_sel_idx === index"
|
||||
>
|
||||
{{ cld.name }}
|
||||
</option>
|
||||
</select>
|
||||
</li>
|
||||
</template>
|
||||
<template #search v-if="(cld_selected.cloud && cld_selected.cloud.size > 0 ) || cld_selected.apps && cld_selected.apps.size > 0">
|
||||
<input id="search" v-model="search" class="rounded-l-full w-full py-2 px-2 text-gray-700 leading-tight focus:outline-none" type="text" :placeholder="t('nav.Search','Search')">
|
||||
<div class="p-1">
|
||||
<button
|
||||
class="bg-blue-500 text-white rounded-full p-2 hover:bg-blue-400 focus:outline-none flex items-center justify-center"
|
||||
@click="on_search"
|
||||
>
|
||||
<span class="text-xs">
|
||||
<carbon-search class="align-bottom" />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<template #lastitems>
|
||||
<li class="mr-3">
|
||||
<MenuLocales :label-mode="localesLabelMode" :include-current="includeCurrLocale" />
|
||||
</li>
|
||||
</template>
|
||||
</NavMenu>
|
||||
<Profile v-if="show_profile" />
|
||||
<div id="tophome">
|
||||
<div v-if="cld_selected.cloud && cld_selected.cloud.size > 0" class="-mt-2 text-gray-800 lg:p-1">
|
||||
<CloudGroups
|
||||
:title="t('nav.Tasks','Services')"
|
||||
target="tsksrvcs"
|
||||
:groups="cld_selected.cloud"
|
||||
:search="search"
|
||||
:hide="tasks_hide"
|
||||
@on-cloud-group="onCloudGroup"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="cld_selected.apps && cld_selected.apps.size > 0" class="mt-1 text-gray-800 p-2 lg:p-4">
|
||||
<CloudGroups
|
||||
:title="t('nav.Apps','Apps')"
|
||||
target="appsrvcs"
|
||||
:groups="cld_selected.apps"
|
||||
:search="search"
|
||||
:hide="apps_hide"
|
||||
@on-cloud-group="onCloudGroup"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="cld_selected.infos && cld_selected.infos.length > 0" class="shadow-lg mx-auto bg-gray-100 text-gray-800 mt-4 md:mt-2 bg-light-800 dark:bg-gray-600 w-full p-2 rounded-l">
|
||||
<Infos :items="cld_selected.infos" :title="t('nav.Informations','Informations')"
|
||||
@on-cloud-info-item="onCloudInfoItem"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
import CloudGroups from '~/components/CloudGroups.vue'
|
||||
// import ProfileView from '~/components/ProfileView.vue'
|
||||
import NavMenu from '~/components/NavMenu.vue'
|
||||
import AccordionView from '~/components/AccordionView.vue'
|
||||
import Infos from '~/views/Infos.vue'
|
||||
import Profile from '~/components/Profile.vue'
|
||||
import { load_data } from '~/hooks/utils'
|
||||
// import { translate, show_message } from '~/hooks/utils'
|
||||
import useState from '~/hooks/useState'
|
||||
import { StatusItemType, StatusItemDataType, ResCloudDataCheck, CloudGroupServcType } from '~/typs/clouds'
|
||||
import { MenuItemType } from '~/typs'
|
||||
import { StatusItemType, StatusItemDataType, ResCloudDataCheckDefs, CloudGroupServcType, CloudDataCheck,CloudOptionType } from '~/typs/clouds'
|
||||
import { SideMenuItemType } from '~/typs/cmpnts'
|
||||
import MenuLocales from '@/menus/MenuLocales.vue'
|
||||
import { AppDefsAction } from '~/store/types'
|
||||
// import { AppDataAction, AppCheckAction, AppDefsAction } from '~/store/types'
|
||||
|
||||
enum LocalesLabelModes {
|
||||
value = 'val',
|
||||
translation = 'trans',
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
const map_key = router.currentRoute.value.meta.mapkey as string || 'ui'
|
||||
const use_nav = router.currentRoute.value.meta.useNav as boolean
|
||||
const ctx = router.currentRoute.value.meta.ctx || ''
|
||||
const localesLabelMode = ref(LocalesLabelModes.translation)
|
||||
const includeCurrLocale = true
|
||||
|
||||
const store = useStore()
|
||||
const { t } = useI18n()
|
||||
const title = ref('Services Status')
|
||||
const search = ref('')
|
||||
const search = useState().search
|
||||
// const router = useRouter()
|
||||
// const go = () => {
|
||||
// if (name.value)
|
||||
// router.push(`/hi/${encodeURIComponent(name.value)}`)
|
||||
// }
|
||||
const menu_items = useState().menu_items
|
||||
const show_profile = computed(() => useState().show_profile.value)
|
||||
const defs = computed(() => store.state.app_defs.main.get(map_key) || {})
|
||||
|
||||
const menu_items = computed((): SideMenuItemType[] => {
|
||||
const defsMenuItems = defs.value && defs.value.sidebar && defs.value.sidebar.menu_items ? defs.value.sidebar.menu_items : [] as SideMenuItemType[]
|
||||
const all_items = [].concat(defsMenuItems || []) // .concat(useState().sidebarMenuItems.value as SideMenuItemType[] | any)
|
||||
useState().sidebarMenuItems.value = all_items.filter((itm: SideMenuItemType) => {
|
||||
if (itm.ctx && itm.ctx === ctx) {
|
||||
return true
|
||||
} else if (itm.ctx && itm.ctx !== ctx) {
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
})
|
||||
return useState().sidebarMenuItems.value
|
||||
})
|
||||
const navMenuItems = computed(() => {
|
||||
const menu_items_active = menu_items.value.filter(menuitem => {
|
||||
switch (menuitem.click) {
|
||||
case 'tsksrvcs':
|
||||
return cld_selected.value.cloud && cld_selected.value.cloud.size > 0
|
||||
break
|
||||
case 'appsrvcs':
|
||||
return cld_selected.value.apps && cld_selected.value.apps.size > 0
|
||||
break
|
||||
case 'srvcstatus':
|
||||
return cld_selected.value.infos && cld_selected.value.infos.length > 0
|
||||
break
|
||||
default:
|
||||
return false
|
||||
}
|
||||
})
|
||||
return menu_items_active
|
||||
})
|
||||
const on_search = () => {
|
||||
}
|
||||
const tasks_hide = ref(false)
|
||||
const apps_hide = ref(false)
|
||||
const on_cloud_group = (target: string) => {
|
||||
const onCloudGroup = (target: string) => {
|
||||
if (target) {
|
||||
switch (target) {
|
||||
case useState().tsksrvcs:
|
||||
@ -34,15 +152,29 @@ const on_cloud_group = (target: string) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
const on_nav_menu = (item: MenuItemType) => {
|
||||
const onAppHome = () => {
|
||||
const dom_id = document.getElementById('tophome')
|
||||
if (dom_id) {
|
||||
dom_id.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
|
||||
setTimeout(() => window.scrollBy(0, -40), 1000)
|
||||
}
|
||||
}
|
||||
useState().app_home_click.value = onAppHome
|
||||
useState().backdrop_blur.value = 2
|
||||
useState().back_opacity.value = 100
|
||||
useState().panels.value.search = { style: 'h-auto'}
|
||||
|
||||
const onNavMenu = (item: SideMenuItemType) => {
|
||||
if (item) {
|
||||
const dom_id = document.getElementById(item.id)
|
||||
const dom_id = document.getElementById(item.click as string)
|
||||
if (dom_id) {
|
||||
dom_id.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
|
||||
setTimeout(() => window.scrollBy(0, -40), 1000)
|
||||
}
|
||||
menu_items.value = menu_items.value.map(i => ({ ...i, active: i.id !== item.id ? false : !i.active }))
|
||||
switch (item.id) {
|
||||
// const new_defs = JSON.parse(JSON.stringify(store.state.app_defs.main.get(map_key)))
|
||||
// new_defs.sidebar.menu_items = menu_items.value.map(i => ({ ...i, active: i.click !== item.click? false : !i.active }))
|
||||
// store.dispatch(AppDefsAction.addDefs, new_defs)
|
||||
switch (item.click) {
|
||||
case useState().tsksrvcs:
|
||||
tasks_hide.value = false
|
||||
break
|
||||
@ -53,26 +185,65 @@ const on_nav_menu = (item: MenuItemType) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
const status_entries = ref([] as StatusItemType[])
|
||||
const statusitems: StatusItemType[] = [
|
||||
{
|
||||
title: 'Why do I need Rust?',
|
||||
text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores iure quas laudantium dicta impedit, est id delectus molestiae deleniti enim nobis rem et nihil.',
|
||||
isOpen: true,
|
||||
},
|
||||
{
|
||||
title: 'Why am I so awesome?',
|
||||
text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi cumque, nulla harum aspernatur veniam ullam provident neque temporibus autem itaque odit.',
|
||||
isOpen: false,
|
||||
},
|
||||
{
|
||||
title: 'Why learn on THIS?',
|
||||
text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi cumque, nulla harum aspernatur veniam ullam provident neque temporibus autem itaque odit.',
|
||||
isOpen: false,
|
||||
},
|
||||
]
|
||||
useState().side_menu_click.value = onNavMenu
|
||||
const cld_default_name = 'ma'
|
||||
const clds_groups = ref([] as CloudDataCheck[])
|
||||
const cld_sel_idx= ref(0)
|
||||
const cld_selected = ref({} as CloudDataCheck)
|
||||
|
||||
const groups = ref(new Map() as Map<string, Map<string, CloudGroupServcType>>)
|
||||
const clouds_options = computed(() => {
|
||||
const options = [] as CloudOptionType[]
|
||||
clds_groups.value.forEach((it,idx) => {
|
||||
options.push({
|
||||
name: it.name,
|
||||
option: idx,
|
||||
})
|
||||
})
|
||||
return options
|
||||
})
|
||||
const update_cloud_selection = (e: any) => {
|
||||
if (clds_groups.value[e.target.selectedIndex]) {
|
||||
cld_sel_idx.value=e.target.selectedIndex
|
||||
cld_selected.value = clds_groups.value[cld_sel_idx.value]
|
||||
}
|
||||
}
|
||||
const onCloudInfoItem = (item: StatusItemType) => {
|
||||
if (item) {
|
||||
clds_groups.value[cld_sel_idx.value].infos = clds_groups.value[cld_sel_idx.value].infos.map((i: StatusItemType) => ({ ...i, isOpen: i.title !== item.title ? false : !i.isOpen }))
|
||||
cld_selected.value = clds_groups.value[cld_sel_idx.value]
|
||||
}
|
||||
}
|
||||
const sortInfos = (data: StatusItemType[], rev: boolean): StatusItemType[] => {
|
||||
const mapped = data.map(function(el, i) {
|
||||
return { index: i, value: parseInt(el.datetime.replaceAll(' ','').replaceAll('/','').replaceAll(':',''),0) || 0 };
|
||||
})
|
||||
mapped.sort(function(a, b) {
|
||||
if (a.value > b.value) {
|
||||
return rev ? -1 : 1;
|
||||
}
|
||||
if (a.value < b.value) {
|
||||
return rev ? 1 : -1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
const result = mapped.map(function(el){
|
||||
return data[el.index];
|
||||
});
|
||||
return result
|
||||
}
|
||||
onBeforeUnmount(() => {
|
||||
useState().sidebarMenuItems.value = useState().sidebarMenuItems.value.filter((itm: SideMenuItemType) => {
|
||||
if (itm.ctx && itm.ctx === ctx) {
|
||||
return false
|
||||
} else if (itm.ctx && itm.ctx !== ctx) {
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
})
|
||||
useState().side_menu_click.value = () => router.push('/')
|
||||
useState().app_home_click.value = () => router.push('/')
|
||||
})
|
||||
onMounted(async() => {
|
||||
// await nextTick()
|
||||
const use_local = false
|
||||
@ -81,88 +252,76 @@ onMounted(async() => {
|
||||
if (!use_local)
|
||||
url = `${rooturl}/info`
|
||||
|
||||
await load_data(url, 0, 2000, (res: ResCloudDataCheck) => {
|
||||
clds_groups.value = [] as CloudDataCheck[]
|
||||
await load_data(url, 0, 2000, (res: ResCloudDataCheckDefs) => {
|
||||
// use Map to keep objects order
|
||||
// use Object.keys + sort to map same result order
|
||||
if (res.group_apps) {
|
||||
Object.keys(res.group_apps).sort().forEach((grp_key) => {
|
||||
const data: Map<string, CloudGroupServcType> = new Map()
|
||||
Object.keys(res.group_apps[grp_key]).sort().forEach((key) => {
|
||||
data.set(key, res.group_apps[grp_key][key])
|
||||
})
|
||||
groups.value.set(grp_key, data)
|
||||
})
|
||||
}
|
||||
if (res.group_cloud) {
|
||||
Object.keys(res.group_cloud).forEach((grp_key) => {
|
||||
Object.keys(res.group_cloud[grp_key]).sort().forEach((key) => {
|
||||
const data: CloudGroupServcType[] = res.group_cloud[grp_key][key]
|
||||
data.forEach((it, index) => {
|
||||
if (groups.value.get(grp_key)) {
|
||||
const m = groups.value.get(grp_key)
|
||||
if (m && m.get(key) && it.tsksrvcs) {
|
||||
const m_data = m.get(key)
|
||||
if (m_data && m_data[index]) {
|
||||
m_data[index].tsksrvcs = it.tsksrvcs
|
||||
const new_data: Map<string, CloudGroupServcType> = new Map()
|
||||
new_data.set(key, m_data)
|
||||
groups.value.set(grp_key, new_data)
|
||||
const clouds_groups = [] as CloudDataCheck[]
|
||||
res.check.forEach((kld,kldidx) => {
|
||||
if (kld.name === cld_default_name)
|
||||
cld_sel_idx.value=kldidx
|
||||
const check_data: Map<string, Map<string, CloudGroupServcType>> = new Map()
|
||||
clouds_groups[kldidx] = {} as CloudDataCheck
|
||||
Object.keys(kld.apps).sort().forEach((grp_key) => {
|
||||
const data: Map<string, CloudGroupServcType> = new Map()
|
||||
Object.keys(kld.apps[grp_key]).sort().forEach((key) => {
|
||||
const grp_res: CloudGroupServcType[] = kld.apps[grp_key][key].filter((it:CloudGroupServcType) => it.tsksrvcs.length > 0 || it.appsrvcs.length > 0)
|
||||
if (grp_res.length > 0)
|
||||
data.set(key, kld.apps[grp_key][key])
|
||||
})
|
||||
if (data.size > 0)
|
||||
check_data.set(grp_key, data)
|
||||
})
|
||||
clouds_groups[kldidx] = {
|
||||
name: kld.name,
|
||||
apps: check_data,
|
||||
cloud: kld.cloud ? new Map() : check_data,
|
||||
infos: [] as StatusItemType[],
|
||||
}
|
||||
if (kld.cloud) {
|
||||
Object.keys(kld.cloud).sort().forEach((grp_key) => {
|
||||
Object.keys(kld.cloud[grp_key]).sort().forEach((key) => {
|
||||
const data: CloudGroupServcType[] = kld.cloud[grp_key][key]
|
||||
data.forEach((it, index) => {
|
||||
if (clouds_groups[kldidx].apps.get(grp_key)) {
|
||||
const m = clouds_groups[kldidx].apps.get(grp_key)
|
||||
if (m && m.size > 0 && m.get(key) && it.tsksrvcs) {
|
||||
const m_data = m.get(key)
|
||||
if (m_data && m_data[index]) {
|
||||
m_data[index].tsksrvcs = it.tsksrvcs
|
||||
const new_data: Map<string, CloudGroupServcType> = new Map()
|
||||
new_data.set(key, m_data)
|
||||
clouds_groups[kldidx].cloud.set(grp_key, new_data)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
if (res.statusentries) {
|
||||
const statusentries: StatusItemType[] = []
|
||||
res.statusentries.forEach((it: StatusItemDataType) => {
|
||||
statusentries.push({ ...it, isOpen: false })
|
||||
})
|
||||
status_entries.value = statusentries
|
||||
}
|
||||
else {
|
||||
status_entries.value = statusitems
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
let infos: StatusItemType[] = []
|
||||
if (kld.infos) {
|
||||
kld.infos.forEach((it: StatusItemDataType) => {
|
||||
infos.push({ ...it, isOpen: false })
|
||||
})
|
||||
infos = sortInfos(infos,true)
|
||||
}
|
||||
clouds_groups[kldidx].infos = infos
|
||||
})
|
||||
clds_groups.value = clouds_groups
|
||||
cld_selected.value = clds_groups.value[cld_sel_idx.value]
|
||||
if (res.defs) {
|
||||
store.dispatch(AppDefsAction.addDefs, { key: map_key, defs: res.defs })
|
||||
}
|
||||
useState().sidebarMenuItems.value = res.defs.sidebar.menu_items.filter((itm: SideMenuItemType) => {
|
||||
if (itm.ctx && itm.ctx === ctx) {
|
||||
return true
|
||||
} else if (itm.ctx && itm.ctx !== ctx) {
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NavMenu :title="title" :items="menu_items" @on-nav-menu="on_nav_menu">
|
||||
<template #search>
|
||||
<input id="search" v-model="search" class="rounded-l-full w-full py-2 px-2 text-gray-700 leading-tight focus:outline-none" type="text" placeholder="Search">
|
||||
<div class="p-1">
|
||||
<button
|
||||
class="bg-blue-500 text-white rounded-full p-2 hover:bg-blue-400 focus:outline-none flex items-center justify-center"
|
||||
@click="on_search"
|
||||
>
|
||||
<span class="text-xs">
|
||||
<carbon-search class="align-bottom" />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</NavMenu>
|
||||
<div class="mt-1 text-gray-800 p-2 lg:p-4">
|
||||
<CloudGroups
|
||||
title="Tasks"
|
||||
target="tsksrvcs"
|
||||
:groups="groups"
|
||||
:search="search"
|
||||
:hide="tasks_hide"
|
||||
@on-cloud-group="on_cloud_group"
|
||||
/>
|
||||
<CloudGroups
|
||||
title="Apps"
|
||||
target="appsrvcs"
|
||||
:groups="groups"
|
||||
:search="search"
|
||||
:hide="apps_hide"
|
||||
@on-cloud-group="on_cloud_group"
|
||||
/>
|
||||
</div>
|
||||
<div class="shadow-lg mx-auto bg-gray-200 text-gray-800 mt-4 md:mt-2 bg-light-800 w-full p-2 rounded-l">
|
||||
<AccordionView :items="statusitems" title="Services Status" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -115,7 +115,6 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
} from 'vue'
|
||||
import 'a17t'
|
||||
import { useRouter } from 'vue-router'
|
||||
@ -126,7 +125,7 @@ import AppLogoImg from '@/icons/AppImg.vue'
|
||||
import AppLogoText from '@/icons/AppLogoText.vue'
|
||||
import { AppDefsAction } from '~/store/types'
|
||||
import useState from '~/hooks/useState'
|
||||
import { post_data, check_credentials } from '~/hooks/utils'
|
||||
import { post_data } from '~/hooks/utils'
|
||||
|
||||
enum LocalesLabelModes {
|
||||
value = 'val',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user