mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-07-18 07:05:25 +00:00
update version
This commit is contained in:
Qiuxia Fan
parent
f17560decc
commit
396315f8f3
@ -1,15 +0,0 @@
|
|||||||
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
|
|
||||||
contributor license agreements. See the NOTICE file distributed with
|
|
||||||
this work for additional information regarding copyright ownership.
|
|
||||||
The ASF licenses this file to You under the Apache License, Version 2.0
|
|
||||||
(the "License"); you may not use this file except in compliance with
|
|
||||||
the License. You may obtain a copy of the License at
|
|
||||||
|
|
||||||
http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
|
|
||||||
Unless required by applicable law or agreed to in writing, software
|
|
||||||
distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
See the License for the specific language governing permissions and
|
|
||||||
limitations under the License. -->
|
|
||||||
<svg t="1648440420715" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3665" width="32" height="32"><path d="M914.894958 0 109.105042 0c-21.501383 0-38.907264 14.078286-38.907264 31.740136L70.197778 990.855388c0 25.340915 34.811763 40.443077 60.664616 26.108822l350.677314-194.280351c13.054411-7.167128 29.948355-7.423096 43.002765-0.255969l368.851102 196.328102c25.852853 13.822317 60.152678-1.279844 60.152678-26.62076L953.546253 31.740136C953.802222 14.334255 936.39634 0 914.894958 0zM562.681831 746.661113l-101.363662 0-196.328102-547.773322 90.61297 0 155.885025 454.344695 2.30372 0 155.117118-454.344695 90.61297 0L562.681831 746.661113z" p-id="3666" fill="#e6e6e6"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB |
@ -30,6 +30,20 @@ limitations under the License. -->
|
|||||||
<span title="refresh" class="ghost ml-5 cp" @click="handleReload">
|
<span title="refresh" class="ghost ml-5 cp" @click="handleReload">
|
||||||
<Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" />
|
<Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" />
|
||||||
</span>
|
</span>
|
||||||
|
<span class="version ml-5 cp">
|
||||||
|
<el-popover
|
||||||
|
trigger="hover"
|
||||||
|
width="250"
|
||||||
|
placement="left-end"
|
||||||
|
:content="appStore.version"
|
||||||
|
>
|
||||||
|
<template #reference>
|
||||||
|
<span>
|
||||||
|
<Icon iconName="info_outline" size="middle" />
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-popover>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -39,6 +53,7 @@ import { useRoute } from "vue-router";
|
|||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import timeFormat from "@/utils/timeFormat";
|
import timeFormat from "@/utils/timeFormat";
|
||||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const appStore = useAppStoreWithOut();
|
const appStore = useAppStoreWithOut();
|
||||||
@ -47,6 +62,7 @@ const pageName = ref<string>("");
|
|||||||
const timeRange = ref<number>(0);
|
const timeRange = ref<number>(0);
|
||||||
const theme = ref<string>("light");
|
const theme = ref<string>("light");
|
||||||
|
|
||||||
|
getVersion();
|
||||||
const setConfig = (value: string) => {
|
const setConfig = (value: string) => {
|
||||||
pageName.value = value || "";
|
pageName.value = value || "";
|
||||||
theme.value = route.path.includes("/infrastructure/") ? "dark" : "light";
|
theme.value = route.path.includes("/infrastructure/") ? "dark" : "light";
|
||||||
@ -76,6 +92,12 @@ watch(
|
|||||||
setConfig(String(title));
|
setConfig(String(title));
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
async function getVersion() {
|
||||||
|
const res = await appStore.fetchVersion();
|
||||||
|
if (res.errors) {
|
||||||
|
ElMessage.error(res.errors);
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.nav-bar {
|
.nav-bar {
|
||||||
|
|||||||
@ -13,110 +13,95 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||||||
See the License for the specific language governing permissions and
|
See the License for the specific language governing permissions and
|
||||||
limitations under the License. -->
|
limitations under the License. -->
|
||||||
<template>
|
<template>
|
||||||
<div class="side-bar flex-v">
|
<div class="side-bar">
|
||||||
<div>
|
<div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">
|
||||||
<div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">
|
<Icon
|
||||||
<Icon
|
:size="isCollapse ? 'xl' : 'logo'"
|
||||||
:size="isCollapse ? 'xl' : 'logo'"
|
:iconName="isCollapse ? 'logo' : 'logo-sw'"
|
||||||
:iconName="isCollapse ? 'logo' : 'logo-sw'"
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
<el-menu
|
||||||
<el-menu
|
active-text-color="#448dfe"
|
||||||
active-text-color="#448dfe"
|
background-color="#252a2f"
|
||||||
background-color="#252a2f"
|
class="el-menu-vertical"
|
||||||
class="el-menu-vertical"
|
:default-active="name"
|
||||||
:default-active="name"
|
text-color="#efefef"
|
||||||
text-color="#efefef"
|
:unique-opened="true"
|
||||||
:unique-opened="true"
|
:collapse="isCollapse"
|
||||||
:collapse="isCollapse"
|
:style="{ border: 'none' }"
|
||||||
:style="{ border: 'none' }"
|
>
|
||||||
>
|
<template v-for="(menu, index) in routes" :key="index">
|
||||||
<template v-for="(menu, index) in routes" :key="index">
|
<el-sub-menu :index="String(menu.name)" v-if="menu.meta.hasGroup">
|
||||||
<el-sub-menu :index="String(menu.name)" v-if="menu.meta.hasGroup">
|
<template #title>
|
||||||
<template #title>
|
<router-link
|
||||||
<router-link
|
class="items"
|
||||||
class="items"
|
:to="menu.path"
|
||||||
:to="menu.path"
|
:exact="menu.meta.exact || false"
|
||||||
:exact="menu.meta.exact || false"
|
>
|
||||||
>
|
<el-icon class="menu-icons" :style="{ marginRight: '12px' }">
|
||||||
<el-icon class="menu-icons" :style="{ marginRight: '12px' }">
|
|
||||||
<Icon size="lg" :iconName="menu.meta.icon" />
|
|
||||||
</el-icon>
|
|
||||||
<span :class="isCollapse ? 'collapse' : ''">
|
|
||||||
{{ t(menu.meta.title) }}
|
|
||||||
</span>
|
|
||||||
</router-link>
|
|
||||||
</template>
|
|
||||||
<el-menu-item-group>
|
|
||||||
<el-menu-item
|
|
||||||
v-for="(m, idx) in filterMenus(menu.children)"
|
|
||||||
:index="m.name"
|
|
||||||
:key="idx"
|
|
||||||
>
|
|
||||||
<router-link
|
|
||||||
class="items"
|
|
||||||
:to="m.path"
|
|
||||||
:exact="m.meta.exact || false"
|
|
||||||
>
|
|
||||||
<span>{{ t(m.meta.title) }}</span>
|
|
||||||
</router-link>
|
|
||||||
</el-menu-item>
|
|
||||||
</el-menu-item-group>
|
|
||||||
</el-sub-menu>
|
|
||||||
<el-menu-item
|
|
||||||
:index="String(menu.name)"
|
|
||||||
@click="changePage(menu)"
|
|
||||||
v-else
|
|
||||||
>
|
|
||||||
<el-icon class="menu-icons" :style="{ marginRight: '12px' }">
|
|
||||||
<router-link
|
|
||||||
class="items"
|
|
||||||
:to="menu.children[0].path"
|
|
||||||
:exact="menu.meta.exact"
|
|
||||||
>
|
|
||||||
<Icon size="lg" :iconName="menu.meta.icon" />
|
<Icon size="lg" :iconName="menu.meta.icon" />
|
||||||
</router-link>
|
</el-icon>
|
||||||
</el-icon>
|
<span :class="isCollapse ? 'collapse' : ''">
|
||||||
<template #title>
|
{{ t(menu.meta.title) }}
|
||||||
|
</span>
|
||||||
|
</router-link>
|
||||||
|
</template>
|
||||||
|
<el-menu-item-group>
|
||||||
|
<el-menu-item
|
||||||
|
v-for="(m, idx) in filterMenus(menu.children)"
|
||||||
|
:index="m.name"
|
||||||
|
:key="idx"
|
||||||
|
>
|
||||||
<router-link
|
<router-link
|
||||||
class="items"
|
class="items"
|
||||||
:to="menu.children[0].path"
|
:to="m.path"
|
||||||
:exact="menu.meta.exact"
|
:exact="m.meta.exact || false"
|
||||||
>
|
>
|
||||||
<span>{{ t(menu.meta.title) }}</span>
|
<span>{{ t(m.meta.title) }}</span>
|
||||||
</router-link>
|
</router-link>
|
||||||
</template>
|
</el-menu-item>
|
||||||
</el-menu-item>
|
</el-menu-item-group>
|
||||||
</template>
|
</el-sub-menu>
|
||||||
</el-menu>
|
<el-menu-item
|
||||||
<div
|
:index="String(menu.name)"
|
||||||
class="menu-control"
|
@click="changePage(menu)"
|
||||||
:class="isCollapse ? 'collapse' : ''"
|
v-else
|
||||||
:style="{
|
>
|
||||||
color: theme === 'light' ? '#eee' : '#252a2f',
|
<el-icon class="menu-icons" :style="{ marginRight: '12px' }">
|
||||||
}"
|
<router-link
|
||||||
>
|
class="items"
|
||||||
<Icon
|
:to="menu.children[0].path"
|
||||||
size="middle"
|
:exact="menu.meta.exact"
|
||||||
iconName="format_indent_decrease"
|
>
|
||||||
@click="controlMenu"
|
<Icon size="lg" :iconName="menu.meta.icon" />
|
||||||
/>
|
</router-link>
|
||||||
</div>
|
</el-icon>
|
||||||
</div>
|
<template #title>
|
||||||
<div class="version">
|
<router-link
|
||||||
<el-popover
|
class="items"
|
||||||
trigger="hover"
|
:to="menu.children[0].path"
|
||||||
width="250"
|
:exact="menu.meta.exact"
|
||||||
placement="right"
|
>
|
||||||
:content="appStore.version"
|
<span>{{ t(menu.meta.title) }}</span>
|
||||||
>
|
</router-link>
|
||||||
<template #reference>
|
</template>
|
||||||
<span>
|
</el-menu-item>
|
||||||
<Icon iconName="version" size="middle" />
|
</template>
|
||||||
</span>
|
</el-menu>
|
||||||
</template>
|
<div
|
||||||
</el-popover>
|
class="menu-control"
|
||||||
|
:class="isCollapse ? 'collapse' : ''"
|
||||||
|
:style="{
|
||||||
|
color: theme === 'light' ? '#eee' : '#252a2f',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
size="middle"
|
||||||
|
iconName="format_indent_decrease"
|
||||||
|
@click="controlMenu"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <div class="empty"></div> -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -124,11 +109,8 @@ limitations under the License. -->
|
|||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
import { useRouter, RouteRecordRaw } from "vue-router";
|
import { useRouter, RouteRecordRaw } from "vue-router";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
|
||||||
import { ElMessage } from "element-plus";
|
|
||||||
import Icon from "@/components/Icon.vue";
|
import Icon from "@/components/Icon.vue";
|
||||||
|
|
||||||
const appStore = useAppStoreWithOut();
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const name = ref<any>(String(useRouter().currentRoute.value.name));
|
const name = ref<any>(String(useRouter().currentRoute.value.name));
|
||||||
const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "")
|
const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "")
|
||||||
@ -139,7 +121,6 @@ const isCollapse = ref(false);
|
|||||||
const controlMenu = () => {
|
const controlMenu = () => {
|
||||||
isCollapse.value = !isCollapse.value;
|
isCollapse.value = !isCollapse.value;
|
||||||
};
|
};
|
||||||
getVersion();
|
|
||||||
const changePage = (menu: RouteRecordRaw) => {
|
const changePage = (menu: RouteRecordRaw) => {
|
||||||
theme.value = ["VirtualMachine", "Kubernetes"].includes(String(menu.name))
|
theme.value = ["VirtualMachine", "Kubernetes"].includes(String(menu.name))
|
||||||
? "light"
|
? "light"
|
||||||
@ -148,23 +129,15 @@ const changePage = (menu: RouteRecordRaw) => {
|
|||||||
const filterMenus = (menus: any[]) => {
|
const filterMenus = (menus: any[]) => {
|
||||||
return menus.filter((d) => d.meta && !d.meta.notShow);
|
return menus.filter((d) => d.meta && !d.meta.notShow);
|
||||||
};
|
};
|
||||||
async function getVersion() {
|
|
||||||
const res = await appStore.fetchVersion();
|
|
||||||
if (res.errors) {
|
|
||||||
ElMessage.error(res.errors);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.side-bar {
|
.side-bar {
|
||||||
position: relative;
|
|
||||||
background: #252a2f;
|
background: #252a2f;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
min-height: 700px;
|
min-height: 700px;
|
||||||
justify-content: space-between;
|
position: relative;
|
||||||
|
margin-bottom: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-menu-vertical:not(.el-menu--collapse) {
|
.el-menu-vertical:not(.el-menu--collapse) {
|
||||||
@ -192,7 +165,7 @@ span.collapse {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.menu-control {
|
.menu-control {
|
||||||
position: fixed;
|
position: absolute;
|
||||||
top: 8px;
|
top: 8px;
|
||||||
left: 200px;
|
left: 200px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -220,5 +193,13 @@ span.collapse {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding-left: 23px;
|
padding-left: 23px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
width: 100%;
|
||||||
|
height: 60px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user