github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-15 01:33:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

simplify

Browse Source
This commit is contained in:
Brandon Fergerson 2022-04-29 13:10:59 +02:00
parent e746d4638e
commit aed98fb2b2
10 changed files with 188 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/FullVue.vue
View File

@ -143,6 +143,7 @@ export default defineComponent({
backface-visibility: hidden; backface-visibility: hidden;
perspective: 1000; perspective: 1000;
overflow: hidden; overflow: hidden;
.scroll-handler__wrapper { .scroll-handler__wrapper {
z-index: 20; z-index: 20;
position: fixed; position: fixed;
@ -150,9 +151,10 @@ export default defineComponent({
flex-direction: column; flex-direction: column;
right: 0; right: 0;
// top: 50%; // top: 50%;
transform: translateY(60%); //transform: translateY(60%);
height: auto; height: auto;
width: 20px; width: 20px;
.full-scroll-to { .full-scroll-to {
opacity: 0.5; opacity: 0.5;
width: 10px; width: 10px;
@ -162,6 +164,7 @@ export default defineComponent({
cursor: pointer; cursor: pointer;
background: #4f4f4f; background: #4f4f4f;
} }
.full-scroll-to.active { .full-scroll-to.active {
opacity: 1; opacity: 1;
padding: 6px; padding: 6px;
@ -169,9 +172,11 @@ export default defineComponent({
} }
} }
} }
.scroll-snap-container::-webkit-scrollbar { .scroll-snap-container::-webkit-scrollbar {
display: none; display: none;
} }
.item { .item {
// scroll-snap-align: start; // scroll-snap-align: start;
height: 100%; height: 100%;

1
src/constants/data.ts
View File

@ -34,7 +34,6 @@ export const RoutesMap: { [key: string]: string } = {
Linux: "OS_LINUX", Linux: "OS_LINUX",
SkyWalkingServer: "SO11Y_OAP", SkyWalkingServer: "SO11Y_OAP",
Satellite: "SO11Y_SATELLITE", Satellite: "SO11Y_SATELLITE",
FullScroll: "SO11Y_SATELLITE",
Functions: "FAAS", Functions: "FAAS",
Browser: "BROWSER", Browser: "BROWSER",
KubernetesCluster: "K8S", KubernetesCluster: "K8S",

4
src/layout/components/AppMain.vue
View File

@ -36,7 +36,9 @@ if (!appStore.utc) {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-main { .app-main {
height: calc(100% - 40px); height: 100%;
max-height: 375px;
max-width: 800px;
background: #f7f9fa; background: #f7f9fa;
} }
</style> </style>

72
src/layout/components/NavBar.vue
View File

@ -12,42 +12,42 @@ distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 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="nav-bar flex-h" :class="{ dark: theme === 'dark' }"> <!-- <div class="nav-bar flex-h" :class="{ dark: theme === 'dark' }">-->
<div class="title">{{ appStore.pageTitle || t(pageName) }}</div> <!-- <div class="title">{{ appStore.pageTitle || t(pageName) }}</div>-->
<div class="app-config"> <!-- <div class="app-config">-->
<span class="red" v-show="timeRange">{{ t("timeTips") }}</span> <!-- <span class="red" v-show="timeRange">{{ t("timeTips") }}</span>-->
<TimePicker <!-- <TimePicker-->
:value="time" <!-- :value="time"-->
position="bottom" <!-- position="bottom"-->
format="YYYY-MM-DD HH:mm" <!-- format="YYYY-MM-DD HH:mm"-->
@input="changeTimeRange" <!-- @input="changeTimeRange"-->
/> <!-- />-->
<span> <!-- <span>-->
UTC{{ appStore.utcHour >= 0 ? "+" : "" <!-- UTC{{ appStore.utcHour >= 0 ? "+" : ""-->
}}{{ `${appStore.utcHour}:${appStore.utcMin}` }} <!-- }}{{ `${appStore.utcHour}:${appStore.utcMin}` }}-->
</span> <!-- </span>-->
<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"> <!-- <span class="version ml-5 cp">-->
<el-popover <!-- <el-popover-->
trigger="hover" <!-- trigger="hover"-->
width="250" <!-- width="250"-->
placement="bottom" <!-- placement="bottom"-->
effect="light" <!-- effect="light"-->
:content="appStore.version" <!-- :content="appStore.version"-->
> <!-- >-->
<template #reference> <!-- <template #reference>-->
<span> <!-- <span>-->
<Icon iconName="info_outline" size="middle" /> <!-- <Icon iconName="info_outline" size="middle" />-->
</span> <!-- </span>-->
</template> <!-- </template>-->
</el-popover> <!-- </el-popover>-->
</span> <!-- </span>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</template> <!--</template>-->
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watch, computed } from "vue"; import { ref, watch, computed } from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";

191
src/layout/components/SideBar.vue
View File

@ -12,97 +12,97 @@ distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 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"> <!-- <div class="side-bar">-->
<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" /> <!-- <Icon size="lg" :iconName="menu.meta.icon" />-->
</el-icon> <!-- </el-icon>-->
<span :class="isCollapse ? 'collapse' : ''"> <!-- <span :class="isCollapse ? 'collapse' : ''">-->
{{ t(menu.meta.title) }} <!-- {{ t(menu.meta.title) }}-->
</span> <!-- </span>-->
</router-link> <!-- </router-link>-->
</template> <!-- </template>-->
<el-menu-item-group> <!-- <el-menu-item-group>-->
<el-menu-item <!-- <el-menu-item-->
v-for="(m, idx) in filterMenus(menu.children)" <!-- v-for="(m, idx) in filterMenus(menu.children)"-->
:index="m.name" <!-- :index="m.name"-->
:key="idx" <!-- :key="idx"-->
> <!-- >-->
<router-link <!-- <router-link-->
class="items" <!-- class="items"-->
:to="m.path" <!-- :to="m.path"-->
:exact="m.meta.exact || false" <!-- :exact="m.meta.exact || false"-->
> <!-- >-->
<span>{{ t(m.meta.title) }}</span> <!-- <span>{{ t(m.meta.title) }}</span>-->
</router-link> <!-- </router-link>-->
</el-menu-item> <!-- </el-menu-item>-->
</el-menu-item-group> <!-- </el-menu-item-group>-->
</el-sub-menu> <!-- </el-sub-menu>-->
<el-menu-item <!-- <el-menu-item-->
:index="String(menu.name)" <!-- :index="String(menu.name)"-->
@click="changePage(menu)" <!-- @click="changePage(menu)"-->
v-else <!-- v-else-->
> <!-- >-->
<el-icon class="menu-icons" :style="{ marginRight: '12px' }"> <!-- <el-icon class="menu-icons" :style="{ marginRight: '12px' }">-->
<router-link <!-- <router-link-->
class="items" <!-- class="items"-->
:to="menu.children[0].path" <!-- :to="menu.children[0].path"-->
:exact="menu.meta.exact" <!-- :exact="menu.meta.exact"-->
> <!-- >-->
<Icon size="lg" :iconName="menu.meta.icon" /> <!-- <Icon size="lg" :iconName="menu.meta.icon" />-->
</router-link> <!-- </router-link>-->
</el-icon> <!-- </el-icon>-->
<template #title> <!-- <template #title>-->
<router-link <!-- <router-link-->
class="items" <!-- class="items"-->
:to="menu.children[0].path" <!-- :to="menu.children[0].path"-->
:exact="menu.meta.exact" <!-- :exact="menu.meta.exact"-->
> <!-- >-->
<span>{{ t(menu.meta.title) }}</span> <!-- <span>{{ t(menu.meta.title) }}</span>-->
</router-link> <!-- </router-link>-->
</template> <!-- </template>-->
</el-menu-item> <!-- </el-menu-item>-->
</template> <!-- </template>-->
</el-menu> <!-- </el-menu>-->
<div <!-- <div-->
class="menu-control" <!-- class="menu-control"-->
:class="isCollapse ? 'collapse' : ''" <!-- :class="isCollapse ? 'collapse' : ''"-->
:style="{ <!-- :style="{-->
color: theme === 'light' ? '#eee' : '#252a2f', <!-- color: theme === 'light' ? '#eee' : '#252a2f',-->
}" <!-- }"-->
> <!-- >-->
<Icon <!-- <Icon-->
size="middle" <!-- size="middle"-->
iconName="format_indent_decrease" <!-- iconName="format_indent_decrease"-->
@click="controlMenu" <!-- @click="controlMenu"-->
/> <!-- />-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</template> <!--</template>-->
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue"; import { ref } from "vue";
@ -116,7 +116,7 @@ const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "")
? ref("light") ? ref("light")
: ref("black"); : ref("black");
const routes = ref<any>(useRouter().options.routes); const routes = ref<any>(useRouter().options.routes);
const isCollapse = ref(false); const isCollapse = ref(true);
const controlMenu = () => { const controlMenu = () => {
isCollapse.value = !isCollapse.value; isCollapse.value = !isCollapse.value;
}; };
@ -134,9 +134,14 @@ const filterMenus = (menus: any[]) => {
.side-bar { .side-bar {
background: #252a2f; background: #252a2f;
height: 100%; height: 100%;
min-height: 700px; //min-height: 700px;
position: relative; position: relative;
margin-bottom: 100px; margin-bottom: 100px;
overflow-y: scroll;
overflow-x: hidden;
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
} }
.el-menu-vertical:not(.el-menu--collapse) { .el-menu-vertical:not(.el-menu--collapse) {

5
src/types/components.d.ts vendored
View File

@ -12,12 +12,8 @@ declare module '@vue/runtime-core' {
ElDropdown: typeof import('element-plus/es')['ElDropdown'] ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'] ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElInput: typeof import('element-plus/es')['ElInput'] ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
ElOption: typeof import('element-plus/es')['ElOption'] ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination'] ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm'] ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
@ -27,7 +23,6 @@ declare module '@vue/runtime-core' {
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElSelect: typeof import('element-plus/es')['ElSelect'] ElSelect: typeof import('element-plus/es')['ElSelect']
ElSlider: typeof import('element-plus/es')['ElSlider'] ElSlider: typeof import('element-plus/es')['ElSlider']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
ElSwitch: typeof import('element-plus/es')['ElSwitch'] ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable'] ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] ElTableColumn: typeof import('element-plus/es')['ElTableColumn']

1
src/views/dashboard/controls/Widget.vue
View File

@ -229,6 +229,7 @@ export default defineComponent({
.widget { .widget {
font-size: 12px; font-size: 12px;
height: 100%; height: 100%;
//max-height: 300px;
} }
.header { .header {

84
src/views/dashboard/panel/Tool.vue
View File

@ -78,45 +78,45 @@ limitations under the License. -->
/> />
</div> </div>
</div> </div>
<div class="flex-h tools" v-loading="loading"> <!-- <div class="flex-h tools" v-loading="loading">-->
<div class="tool-icons flex-h" v-if="dashboardStore.editMode"> <!-- <div class="tool-icons flex-h" v-if="dashboardStore.editMode">-->
<el-dropdown content="Controls" placement="bottom"> <!-- <el-dropdown content="Controls" placement="bottom">-->
<i> <!-- <i>-->
<Icon class="icon-btn" size="sm" iconName="control" /> <!-- <Icon class="icon-btn" size="sm" iconName="control" />-->
</i> <!-- </i>-->
<template #dropdown> <!-- <template #dropdown>-->
<el-dropdown-menu> <!-- <el-dropdown-menu>-->
<el-dropdown-item <!-- <el-dropdown-item-->
@click="clickIcons(t)" <!-- @click="clickIcons(t)"-->
v-for="(t, index) in toolIcons" <!-- v-for="(t, index) in toolIcons"-->
:key="index" <!-- :key="index"-->
:title="t.content" <!-- :title="t.content"-->
> <!-- >-->
<Icon class="mr-5" size="middle" :iconName="t.name" /> <!-- <Icon class="mr-5" size="middle" :iconName="t.name" />-->
<span>{{ t.content }}</span> <!-- <span>{{ t.content }}</span>-->
</el-dropdown-item> <!-- </el-dropdown-item>-->
</el-dropdown-menu> <!-- </el-dropdown-menu>-->
</template> <!-- </template>-->
</el-dropdown> <!-- </el-dropdown>-->
<el-tooltip content="Apply" placement="bottom" effect="light"> <!-- <el-tooltip content="Apply" placement="bottom" effect="light">-->
<i @click="applyDashboard"> <!-- <i @click="applyDashboard">-->
<Icon class="icon-btn" size="sm" iconName="save" /> <!-- <Icon class="icon-btn" size="sm" iconName="save" />-->
</i> <!-- </i>-->
</el-tooltip> <!-- </el-tooltip>-->
</div> <!-- </div>-->
<div class="switch"> <!-- <div class="switch">-->
<el-switch <!-- <el-switch-->
v-model="dashboardStore.editMode" <!-- v-model="dashboardStore.editMode"-->
active-text="Edit" <!-- active-text="Edit"-->
inactive-text="View" <!-- inactive-text="View"-->
size="small" <!-- size="small"-->
inline-prompt <!-- inline-prompt-->
active-color="#409eff" <!-- active-color="#409eff"-->
inactive-color="#999" <!-- inactive-color="#999"-->
@change="changeMode" <!-- @change="changeMode"-->
/> <!-- />-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -147,9 +147,9 @@ const params = useRoute().params;
const path = useRoute(); const path = useRoute();
const router = useRouter(); const router = useRouter();
if (!path.path.includes("fullview")) { if (!path.path.includes("fullview")) {
dashboardStore.setViewMode(false) dashboardStore.setViewMode(false);
}else{ } else {
dashboardStore.setViewMode(true) dashboardStore.setViewMode(true);
} }
const toolIcons = ref<{ name: string; content: string; id: string }[]>( const toolIcons = ref<{ name: string; content: string; id: string }[]>(
EndpointRelationTools EndpointRelationTools

2
vue.config.js
View File

@ -21,7 +21,7 @@ const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");
module.exports = { module.exports = {
outputDir: "dist", outputDir: "dist",
productionSourceMap: false, productionSourceMap: true,
devServer: { devServer: {
proxy: { proxy: {
"/graphql": { "/graphql": {