feat: add a Spanish option in the lang selector (#98)

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 } = {

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>

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");

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>

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("")