mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-15 01:33:54 +00:00
added toggle switch to header to toggle between fullview and default view
This commit is contained in:
parent
d1236895f5
commit
efc4bcd61a
@ -104,6 +104,20 @@ limitations under the License. -->
|
|||||||
</i>
|
</i>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="switch">
|
||||||
|
<span style="margin-right: 5px">Toggle full view</span>
|
||||||
|
<el-switch
|
||||||
|
v-model="dashboardStore.fullView"
|
||||||
|
active-text="Full view"
|
||||||
|
inactive-text="FV"
|
||||||
|
size="small"
|
||||||
|
inline-prompt
|
||||||
|
active-color="#409eff"
|
||||||
|
inactive-color="#999"
|
||||||
|
@change="toggleFullView"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<div class="switch">
|
<div class="switch">
|
||||||
<el-switch
|
<el-switch
|
||||||
v-model="dashboardStore.editMode"
|
v-model="dashboardStore.editMode"
|
||||||
@ -121,7 +135,7 @@ limitations under the License. -->
|
|||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { reactive, ref, computed, watch } from "vue";
|
import { reactive, ref, computed, watch } from "vue";
|
||||||
import { useRoute } from "vue-router";
|
import { useRoute, useRouter } from "vue-router";
|
||||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||||
import {
|
import {
|
||||||
@ -144,6 +158,13 @@ const dashboardStore = useDashboardStore();
|
|||||||
const selectorStore = useSelectorStore();
|
const selectorStore = useSelectorStore();
|
||||||
const appStore = useAppStoreWithOut();
|
const appStore = useAppStoreWithOut();
|
||||||
const params = useRoute().params;
|
const params = useRoute().params;
|
||||||
|
const path = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
if (!path.path.includes("fullview")) {
|
||||||
|
dashboardStore.setViewMode(false)
|
||||||
|
}else{
|
||||||
|
dashboardStore.setViewMode(true)
|
||||||
|
}
|
||||||
const toolIcons = ref<{ name: string; content: string; id: string }[]>(
|
const toolIcons = ref<{ name: string; content: string; id: string }[]>(
|
||||||
EndpointRelationTools
|
EndpointRelationTools
|
||||||
);
|
);
|
||||||
@ -387,7 +408,16 @@ function changeDestPods(pod: any) {
|
|||||||
selectorStore.setCurrentDestPod(null);
|
selectorStore.setCurrentDestPod(null);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
function toggleFullView(e) {
|
||||||
|
dashboardStore.setViewMode(e);
|
||||||
|
if (dashboardStore.fullView) {
|
||||||
|
const newPath = path.path.replace("dashboard", "fullview");
|
||||||
|
router.push(newPath);
|
||||||
|
} else {
|
||||||
|
const newPath = path.path.replace("fullview", "dashboard");
|
||||||
|
router.push(newPath);
|
||||||
|
}
|
||||||
|
}
|
||||||
function changeMode() {
|
function changeMode() {
|
||||||
if (dashboardStore.editMode) {
|
if (dashboardStore.editMode) {
|
||||||
ElMessage.warning(t("editWarning"));
|
ElMessage.warning(t("editWarning"));
|
||||||
|
Loading…
Reference in New Issue
Block a user