From aed98fb2b274c7696ee180111149e83396aa862b Mon Sep 17 00:00:00 2001
From: Brandon Fergerson <bfergerson@apache.org>
Date: Fri, 29 Apr 2022 13:10:59 +0200
Subject: [PATCH] simplify

---
 src/components/FullVue.vue              |   7 +-
 src/constants/data.ts                   |   1 -
 src/layout/components/AppMain.vue       |   4 +-
 src/layout/components/NavBar.vue        |  72 ++++-----
 src/layout/components/SideBar.vue       | 191 ++++++++++++------------
 src/types/components.d.ts               |   5 -
 src/views/FullScroll.vue                |   2 +-
 src/views/dashboard/controls/Widget.vue |   1 +
 src/views/dashboard/panel/Tool.vue      |  84 +++++------
 vue.config.js                           |   2 +-
 10 files changed, 188 insertions(+), 181 deletions(-)

diff --git a/src/components/FullVue.vue b/src/components/FullVue.vue
index b33d74e1..7b83536c 100644
--- a/src/components/FullVue.vue
+++ b/src/components/FullVue.vue
@@ -143,6 +143,7 @@ export default defineComponent({
   backface-visibility: hidden;
   perspective: 1000;
   overflow: hidden;
+
   .scroll-handler__wrapper {
     z-index: 20;
     position: fixed;
@@ -150,9 +151,10 @@ export default defineComponent({
     flex-direction: column;
     right: 0;
     // top: 50%;
-    transform: translateY(60%);
+    //transform: translateY(60%);
     height: auto;
     width: 20px;
+
     .full-scroll-to {
       opacity: 0.5;
       width: 10px;
@@ -162,6 +164,7 @@ export default defineComponent({
       cursor: pointer;
       background: #4f4f4f;
     }
+
     .full-scroll-to.active {
       opacity: 1;
       padding: 6px;
@@ -169,9 +172,11 @@ export default defineComponent({
     }
   }
 }
+
 .scroll-snap-container::-webkit-scrollbar {
   display: none;
 }
+
 .item {
   // scroll-snap-align: start;
   height: 100%;
diff --git a/src/constants/data.ts b/src/constants/data.ts
index 16e1aa72..4aa4f82a 100644
--- a/src/constants/data.ts
+++ b/src/constants/data.ts
@@ -34,7 +34,6 @@ export const RoutesMap: { [key: string]: string } = {
   Linux: "OS_LINUX",
   SkyWalkingServer: "SO11Y_OAP",
   Satellite: "SO11Y_SATELLITE",
-  FullScroll: "SO11Y_SATELLITE",
   Functions: "FAAS",
   Browser: "BROWSER",
   KubernetesCluster: "K8S",
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 812a3bff..ec7dbf36 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -36,7 +36,9 @@ if (!appStore.utc) {
 </script>
 <style lang="scss" scoped>
 .app-main {
-  height: calc(100% - 40px);
+  height: 100%;
+  max-height: 375px;
+  max-width: 800px;
   background: #f7f9fa;
 }
 </style>
diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index 499c39d4..8d72c06c 100644
--- a/src/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@@ -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' }">-->
+<!--    <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";
diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue
index 6bb75048..78763cee 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -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.
 See the License for the specific language governing permissions and
 limitations under the License. -->
-<template>
-  <div class="side-bar">
-    <div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">
-      <Icon
-        :size="isCollapse ? 'xl' : 'logo'"
-        :iconName="isCollapse ? 'logo' : 'logo-sw'"
-      />
-    </div>
-    <el-menu
-      active-text-color="#448dfe"
-      background-color="#252a2f"
-      class="el-menu-vertical"
-      :default-active="name"
-      text-color="#efefef"
-      :unique-opened="true"
-      :collapse="isCollapse"
-      :style="{ border: 'none' }"
-    >
-      <template v-for="(menu, index) in routes" :key="index">
-        <el-sub-menu :index="String(menu.name)" v-if="menu.meta.hasGroup">
-          <template #title>
-            <router-link
-              class="items"
-              :to="menu.path"
-              :exact="menu.meta.exact || false"
-            >
-              <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" />
-            </router-link>
-          </el-icon>
-          <template #title>
-            <router-link
-              class="items"
-              :to="menu.children[0].path"
-              :exact="menu.meta.exact"
-            >
-              <span>{{ t(menu.meta.title) }}</span>
-            </router-link>
-          </template>
-        </el-menu-item>
-      </template>
-    </el-menu>
-    <div
-      class="menu-control"
-      :class="isCollapse ? 'collapse' : ''"
-      :style="{
-        color: theme === 'light' ? '#eee' : '#252a2f',
-      }"
-    >
-      <Icon
-        size="middle"
-        iconName="format_indent_decrease"
-        @click="controlMenu"
-      />
-    </div>
-  </div>
-</template>
+<!--<template>-->
+<!--  <div class="side-bar">-->
+<!--    <div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">-->
+<!--      <Icon-->
+<!--        :size="isCollapse ? 'xl' : 'logo'"-->
+<!--        :iconName="isCollapse ? 'logo' : 'logo-sw'"-->
+<!--      />-->
+<!--    </div>-->
+<!--    <el-menu-->
+<!--      active-text-color="#448dfe"-->
+<!--      background-color="#252a2f"-->
+<!--      class="el-menu-vertical"-->
+<!--      :default-active="name"-->
+<!--      text-color="#efefef"-->
+<!--      :unique-opened="true"-->
+<!--      :collapse="isCollapse"-->
+<!--      :style="{ border: 'none' }"-->
+<!--    >-->
+<!--      <template v-for="(menu, index) in routes" :key="index">-->
+<!--        <el-sub-menu :index="String(menu.name)" v-if="menu.meta.hasGroup">-->
+<!--          <template #title>-->
+<!--            <router-link-->
+<!--              class="items"-->
+<!--              :to="menu.path"-->
+<!--              :exact="menu.meta.exact || false"-->
+<!--            >-->
+<!--              <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" />-->
+<!--            </router-link>-->
+<!--          </el-icon>-->
+<!--          <template #title>-->
+<!--            <router-link-->
+<!--              class="items"-->
+<!--              :to="menu.children[0].path"-->
+<!--              :exact="menu.meta.exact"-->
+<!--            >-->
+<!--              <span>{{ t(menu.meta.title) }}</span>-->
+<!--            </router-link>-->
+<!--          </template>-->
+<!--        </el-menu-item>-->
+<!--      </template>-->
+<!--    </el-menu>-->
+<!--    <div-->
+<!--      class="menu-control"-->
+<!--      :class="isCollapse ? 'collapse' : ''"-->
+<!--      :style="{-->
+<!--        color: theme === 'light' ? '#eee' : '#252a2f',-->
+<!--      }"-->
+<!--    >-->
+<!--      <Icon-->
+<!--        size="middle"-->
+<!--        iconName="format_indent_decrease"-->
+<!--        @click="controlMenu"-->
+<!--      />-->
+<!--    </div>-->
+<!--  </div>-->
+<!--</template>-->
 
 <script lang="ts" setup>
 import { ref } from "vue";
@@ -116,7 +116,7 @@ const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "")
   ? ref("light")
   : ref("black");
 const routes = ref<any>(useRouter().options.routes);
-const isCollapse = ref(false);
+const isCollapse = ref(true);
 const controlMenu = () => {
   isCollapse.value = !isCollapse.value;
 };
@@ -134,9 +134,14 @@ const filterMenus = (menus: any[]) => {
 .side-bar {
   background: #252a2f;
   height: 100%;
-  min-height: 700px;
+  //min-height: 700px;
   position: relative;
   margin-bottom: 100px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+
+  scrollbar-color: #6969dd #e0e0e0;
+  scrollbar-width: thin;
 }
 
 .el-menu-vertical:not(.el-menu--collapse) {
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index d3ce40a6..9b1d0e7e 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -12,12 +12,8 @@ declare module '@vue/runtime-core' {
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
-    ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     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']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
@@ -27,7 +23,6 @@ declare module '@vue/runtime-core' {
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSlider: typeof import('element-plus/es')['ElSlider']
-    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
diff --git a/src/views/FullScroll.vue b/src/views/FullScroll.vue
index e55621aa..c71877a9 100644
--- a/src/views/FullScroll.vue
+++ b/src/views/FullScroll.vue
@@ -12,7 +12,7 @@ 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>  
+<template>
   <Dashboard v-if="dashboardStore.currentDashboard" />
   <div v-else class="no-root">
     {{ t("noRoot") }} {{ dashboardStore.layerId }}
diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue
index 131f5f2a..0dbdb98b 100644
--- a/src/views/dashboard/controls/Widget.vue
+++ b/src/views/dashboard/controls/Widget.vue
@@ -229,6 +229,7 @@ export default defineComponent({
 .widget {
   font-size: 12px;
   height: 100%;
+  //max-height: 300px;
 }
 
 .header {
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index e48ddb5b..c2de7ada 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -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">-->
+    <!--      <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>
@@ -147,9 +147,9 @@ const params = useRoute().params;
 const path = useRoute();
 const router = useRouter();
 if (!path.path.includes("fullview")) {
-  dashboardStore.setViewMode(false)
-}else{
-  dashboardStore.setViewMode(true)
+  dashboardStore.setViewMode(false);
+} else {
+  dashboardStore.setViewMode(true);
 }
 const toolIcons = ref<{ name: string; content: string; id: string }[]>(
   EndpointRelationTools
diff --git a/vue.config.js b/vue.config.js
index 0f494b02..4ff82ce7 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -21,7 +21,7 @@ const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");
 
 module.exports = {
   outputDir: "dist",
-  productionSourceMap: false,
+  productionSourceMap: true,
   devServer: {
     proxy: {
       "/graphql": {