From 6b0c20e2f527811cab2b7e59cc60b390b9d43575 Mon Sep 17 00:00:00 2001
From: Brandon Fergerson <bfergerson@apache.org>
Date: Sat, 30 Apr 2022 10:51:41 +0200
Subject: [PATCH] portal view

---
 src/layout/components/NavBar.vue     | 72 ++++++++++++-------------
 src/layout/components/SideBar.vue    |  6 +--
 src/router/dashboard.ts              | 65 -----------------------
 src/router/selfObservability.ts      | 10 ----
 src/styles/index.ts                  |  6 +--
 src/views/dashboard/panel/Layout.vue |  4 +-
 src/views/dashboard/panel/Tool.vue   | 78 ++++++++++++++--------------
 7 files changed, 83 insertions(+), 158 deletions(-)

diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index 8d72c06c..b90d5bf9 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' }" 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";
diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue
index c2acf502..cee6f71c 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -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));
diff --git a/src/router/dashboard.ts b/src/router/dashboard.ts
index f76fa26f..93fc53ac 100644
--- a/src/router/dashboard.ts
+++ b/src/router/dashboard.ts
@@ -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,
-        },
-      },
     ],
   },
 ];
diff --git a/src/router/selfObservability.ts b/src/router/selfObservability.ts
index 334f58d4..4174e1bb 100644
--- a/src/router/selfObservability.ts
+++ b/src/router/selfObservability.ts
@@ -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"),
-      },
     ],
   },
 ];
diff --git a/src/styles/index.ts b/src/styles/index.ts
index c6fc78e6..04d25856 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -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";
diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue
index 1874c6e9..d4e25795 100644
--- a/src/views/dashboard/panel/Layout.vue
+++ b/src/views/dashboard/panel/Layout.vue
@@ -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();
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index f35ee60c..e80f034d 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" 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>