[skywalking-booster-ui] branch main updated: feat: add a Spanish option in the lang selector (#98)

[qi...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

qiuxiafan pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git


The following commit(s) were added to refs/heads/main by this push:
     new b34c0b0  feat: add a Spanish option in the lang selector (#98)
b34c0b0 is described below

commit b34c0b0c728beb60b8edb7332a0e305b2650c13f
Author: Fine0830 <fi...@outlook.com>
AuthorDate: Tue May 24 11:53:41 2022 +0800

    feat: add a Spanish option in the lang selector (#98)
---
 src/constants/data.ts                                     |  1 +
 src/layout/components/SideBar.vue                         | 13 ++++++++++---
 src/locales/index.ts                                      |  2 ++
 src/views/Settings.vue                                    |  3 ++-
 src/views/dashboard/related/ebpf/components/EBPFStack.vue |  5 +++--
 5 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/constants/data.ts b/src/constants/data.ts
index 4aa4f82..5a8bf13 100644
--- a/src/constants/data.ts
+++ b/src/constants/data.ts
@@ -23,6 +23,7 @@ export enum TimeType {
 export const Languages = [
   { label: "English", value: "en" },
   { label: "Chinese", value: "zh" },
+  { label: "Spanish", value: "es" },
 ];
 
 export const RoutesMap: { [key: string]: string } = {
diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue
index 278f817..34ad685 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -41,7 +41,7 @@ limitations under the License. -->
               <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
                 <Icon size="lg" :iconName="menu.meta.icon" />
               </el-icon>
-              <span :class="isCollapse ? 'collapse' : ''">
+              <span class="title" :class="isCollapse ? 'collapse' : ''">
                 {{ t(menu.meta.title) }}
               </span>
             </router-link>
@@ -57,7 +57,7 @@ limitations under the License. -->
                 :to="m.path"
                 :exact="m.meta.exact || false"
               >
-                <span>{{ t(m.meta.title) }}</span>
+                <span class="title">{{ t(m.meta.title) }}</span>
               </router-link>
             </el-menu-item>
           </el-menu-item-group>
@@ -82,7 +82,7 @@ limitations under the License. -->
               :to="menu.children[0].path"
               :exact="menu.meta.exact"
             >
-              <span>{{ t(menu.meta.title) }}</span>
+              <span class="title">{{ t(menu.meta.title) }}</span>
             </router-link>
           </template>
         </el-menu-item>
@@ -208,4 +208,11 @@ span.collapse {
   width: 100%;
   height: 60px;
 }
+
+.title {
+  display: inline-block;
+  max-width: 110px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
 </style>
diff --git a/src/locales/index.ts b/src/locales/index.ts
index 4480c94..9d16110 100644
--- a/src/locales/index.ts
+++ b/src/locales/index.ts
@@ -17,10 +17,12 @@
 import { createI18n } from "vue-i18n";
 import zh from "./lang/zh";
 import en from "./lang/en";
+import es from "./lang/es";
 
 const messages = {
   en,
   zh,
+  es,
 };
 
 const savedLanguage = window.localStorage.getItem("language");
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 5e06286..056c83e 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -194,10 +194,11 @@ const setUTCMin = () => {
   }
 
   .label {
-    width: 160px;
+    width: 180px;
     display: inline-block;
     font-weight: 500;
     color: #000;
+    line-height: 25px;
   }
 }
 </style>
diff --git a/src/views/dashboard/related/ebpf/components/EBPFStack.vue b/src/views/dashboard/related/ebpf/components/EBPFStack.vue
index a363b19..adccea9 100644
--- a/src/views/dashboard/related/ebpf/components/EBPFStack.vue
+++ b/src/views/dashboard/related/ebpf/components/EBPFStack.vue
@@ -68,12 +68,13 @@ function drawGraph() {
   root.value = param[0];
   root.dumpCount = param[1];
   stackTree.value = root;
-  const w = (graph.value && graph.value.getBoundingClientRect().width) || 10;
+  const width = (graph.value && graph.value.getBoundingClientRect().width) || 0;
+  const w = width < 800 ? 802 : width;
   flameChart.value = flamegraph()
     .width(w - 15)
     .cellHeight(18)
     .transitionDuration(750)
-    .minFrameSize(5)
+    .minFrameSize(1)
     .transitionEase(d3.easeCubic as any)
     .sort(true)
     .title("")