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

portal view

Browse Source
This commit is contained in:
Brandon Fergerson 2022-04-30 10:51:41 +02:00
parent 887a4de628
commit 6b0c20e2f5
7 changed files with 83 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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.
See the License for the specific language governing permissions and
limitations under the License. -->
<!--<template>-->
<!-- <div class="nav-bar flex-h" :class="{ dark: theme === 'dark' }">-->
<!-- <div class="title">{{ appStore.pageTitle || t(pageName) }}</div>-->
<!-- <div class="app-config">-->
<!-- <span class="red" v-show="timeRange">{{ t("timeTips") }}</span>-->
<!-- <TimePicker-->
<!-- :value="time"-->
<!-- position="bottom"-->
<!-- format="YYYY-MM-DD HH:mm"-->
<!-- @input="changeTimeRange"-->
<!-- />-->
<!-- <span>-->
<!-- UTC{{ appStore.utcHour >= 0 ? "+" : ""-->
<!-- }}{{ `${appStore.utcHour}:${appStore.utcMin}` }}-->
<!-- </span>-->
<!-- <span title="refresh" class="ghost ml-5 cp" @click="handleReload">-->
<!-- <Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" />-->
<!-- </span>-->
<!-- <span class="version ml-5 cp">-->
<!-- <el-popover-->
<!-- trigger="hover"-->
<!-- width="250"-->
<!-- placement="bottom"-->
<!-- effect="light"-->
<!-- :content="appStore.version"-->
<!-- >-->
<!-- <template #reference>-->
<!-- <span>-->
<!-- <Icon iconName="info_outline" size="middle" />-->
<!-- </span>-->
<!-- </template>-->
<!-- </el-popover>-->
<!-- </span>-->
<!-- </div>-->
<!-- </div>-->
<!--</template>-->
<template>
<div class="nav-bar flex-h" :class="{ dark: theme === 'dark' }" v-if="$route.query['portal'] !== 'true'">
<div class="title">{{ appStore.pageTitle || t(pageName) }}</div>
<div class="app-config">
<span class="red" v-show="timeRange">{{ t("timeTips") }}</span>
<TimePicker
:value="time"
position="bottom"
format="YYYY-MM-DD HH:mm"
@input="changeTimeRange"
/>
<span>
UTC{{ appStore.utcHour >= 0 ? "+" : ""
}}{{ `${appStore.utcHour}:${appStore.utcMin}` }}
</span>
<span title="refresh" class="ghost ml-5 cp" @click="handleReload">
<Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" />
</span>
<span class="version ml-5 cp">
<el-popover
trigger="hover"
width="250"
placement="bottom"
effect="light"
:content="appStore.version"
>
<template #reference>
<span>
<Icon iconName="info_outline" size="middle" />
</span>
</template>
</el-popover>
</span>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, watch, computed } from "vue";
import { useRoute } from "vue-router";

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

@ -13,7 +13,7 @@ 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. -->
<template>
<div class="side-bar" v-if="isFullview === false" :style="portalStyle">
<div class="side-bar" v-if="isPortalView === false" :style="portalStyle">
<div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">
<Icon
:size="isCollapse ? 'xl' : 'logo'"
@ -123,8 +123,8 @@ if (query["portal"] === "true") {
});
}
const isFullview = computed(() => {
return path.includes("fullview");
const isPortalView = computed(() => {
return query["portal"] === "true";
});
const { t } = useI18n();
const name = ref<any>(String(useRouter().currentRoute.value.name));

65
src/router/dashboard.ts
View File

@ -66,19 +66,6 @@ export const routesDashboard: Array<RouteRecordRaw> = [
notShow: true,
},
},
{
path: "/fullview/:layerId/:entity/:name",
component: () =>
import(
/* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
),
name: "FullViewCreate",
meta: {
title: "dashboardEdit",
exact: false,
notShow: true,
},
},
{
path: "/dashboard/:layerId/:entity/:serviceId/:name",
component: () =>
@ -92,19 +79,6 @@ export const routesDashboard: Array<RouteRecordRaw> = [
notShow: true,
},
},
{
path: "/fullview/:layerId/:entity/:serviceId/:name",
component: () =>
import(
/* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
),
name: "FullViewView",
meta: {
title: "dashboardEdit",
exact: false,
notShow: true,
},
},
{
path: "/dashboard/related/:layerId/:entity/:serviceId/:destServiceId/:name",
component: () =>
@ -118,19 +92,6 @@ export const routesDashboard: Array<RouteRecordRaw> = [
notShow: true,
},
},
{
path: "/fullview/related/:layerId/:entity/:serviceId/:destServiceId/:name",
component: () =>
import(
/* webpackChunkName: "FullViewdashboards" */ "@/views/dashboard/Edit.vue"
),
name: "FullViewViewServiceRelation",
meta: {
title: "dashboardEdit",
exact: false,
notShow: true,
},
},
{
path: "/dashboard/:layerId/:entity/:serviceId/:podId/:name",
component: () =>
@ -144,19 +105,6 @@ export const routesDashboard: Array<RouteRecordRaw> = [
notShow: true,
},
},
{
path: "/fullview/:layerId/:entity/:serviceId/:podId/:name",
component: () =>
import(
/* webpackChunkName: "FullViewdashboards" */ "@/views/dashboard/Edit.vue"
),
name: "FullViewViewPod",
meta: {
title: "dashboardEdit",
exact: false,
notShow: true,
},
},
{
path: "/dashboard/:layerId/:entity/:serviceId/:podId/:destServiceId/:destPodId/:name",
component: () =>
@ -170,19 +118,6 @@ export const routesDashboard: Array<RouteRecordRaw> = [
notShow: true,
},
},
{
path: "/fullview/:layerId/:entity/:serviceId/:podId/:destServiceId/:destPodId/:name",
component: () =>
import(
/* webpackChunkName: "FullViewdashboards" */ "@/views/dashboard/Edit.vue"
),
name: "FullViewViewPodRelation",
meta: {
title: "dashboardEdit",
exact: true,
notShow: true,
},
},
],
},
];

10
src/router/selfObservability.ts
View File

@ -49,16 +49,6 @@ export const routesSelf: Array<RouteRecordRaw> = [
component: () =>
import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
},
{
path: "/self/fullScroll",
name: "FullScroll",
meta: {
title: "fullscreen-sample",
headPath: "/mesh/controlPanel",
},
component: () =>
import(/* webpackChunkName: "layer" */ "@/views/FullScroll.vue"),
},
],
},
];

6
src/styles/index.ts
View File

@ -20,6 +20,6 @@ import "element-plus/es/components/notification/style/css";
import "./grid.scss";
import "./lib.scss";
import "./reset.scss";
//@import "./spp-light.scss";
//@import "./spp-dark.scss";
@import "./jetbrains-dark.scss";
//import "./spp-light.scss";
//import "./spp-dark.scss";
import "./jetbrains-dark.scss";

4
src/views/dashboard/panel/Layout.vue
View File

@ -55,9 +55,9 @@ export default defineComponent({
name: "Layout",
components: { ...controls, FullVue },
setup() {
const { path } = useRoute();
const { query } = useRoute();
const isFullview = computed(() => {
return path.includes("fullview");
return query["fullview"] === "true";
});
const { t } = useI18n();
const dashboardStore = useDashboardStore();

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

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