Copilot commented on code in PR #829: URL: https://github.com/apache/skywalking-banyandb/pull/829#discussion_r2471614591
########## ui/src/components/common/TraceTable.vue: ########## @@ -0,0 +1,168 @@ +<!-- + ~ Licensed to Apache Software Foundation (ASF) under one or more contributor + ~ license agreements. See the NOTICE file distributed with + ~ this work for additional information regarding copyright + ~ ownership. Apache Software Foundation (ASF) licenses this file to you under + ~ the Apache License, Version 2.0 (the "License"); you may + ~ not use this file except in compliance with the License. + ~ You may obtain a copy of the License at + ~ + ~ http://www.apache.org/licenses/LICENSE-2.0 + ~ + ~ Unless required by applicable law or agreed to in writing, + ~ software 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. +--> + +<script setup> + const props = defineProps({ + // Full data array + data: { + type: Array, + default: () => [], + }, + // Span tags to display as columns + spanTags: { + type: Array, + default: () => [], + }, + // Loading state + loading: { + type: Boolean, + default: false, + }, + // Show selection column + showSelection: { + type: Boolean, + default: true, + }, + // Border style + border: { + type: Boolean, + default: true, + }, + // Enable traceId cell merging + enableMerge: { + type: Boolean, + default: true, + }, + // Empty text + emptyText: { + type: String, + default: 'No trace data found', + }, + }); + + const emit = defineEmits(['selection-change']); + + // Extract tag value with proper formatting + const getTagValue = (data) => { + let value = data.value; + + const isNullish = (val) => val === null || val === undefined || val === 'null'; + if (isNullish(value)) { + return 'N/A'; + } + for (let i = 0; i < 2; i++) { + if (typeof value !== 'object') { + const strValue = value.toString(); + return strValue.length > 100 ? strValue.substring(0, 150) + '...' : strValue; Review Comment: Inconsistent truncation logic: checks if length > 100 but truncates at 150 characters. This appears at lines 72 and 86. Either change the condition to `> 150` or change the truncation to `substring(0, 100)` for consistency. ########## ui/src/components/Header/components/header.vue: ########## @@ -18,124 +18,127 @@ --> <script setup> - import { reactive, watch, getCurrentInstance } from 'vue'; - import { ElImage, ElMenu, ElMenuItem } from 'element-plus'; + import { ref, watch } from 'vue'; + import { ElImage, ElMenu, ElMenuItem, ElSubMenu } from 'element-plus'; import { useRoute } from 'vue-router'; import userImg from '@/assets/banyandb_small.jpg'; + import { MENU_ACTIVE_COLOR, MENU_DEFAULT_PATH, MenuConfig } from './constants'; - // Eventbus - const $bus = getCurrentInstance().appContext.config.globalProperties.mittBus; - - // router const route = useRoute(); + const getActiveMenu = (path) => { + const parts = path.split('/').filter(Boolean); + return parts.length >= 2 ? `/${parts[0]}/${parts[1]}` : MENU_DEFAULT_PATH; + }; + const activeMenu = ref(getActiveMenu(route.path)); - // data - const data = reactive({ - activeMenu: '/banyandb/dashboard', - }); - - // watch watch( - () => route, - () => { - let arr = route.path.split('/'); - data.activeMenu = `/${arr[1]}/${arr[2]}`; - }, - { - immediate: true, - deep: true, + () => route.path, + (newPath) => { + activeMenu.value = getActiveMenu(newPath); }, + { immediate: true }, ); - - // function - function initData() { - let arr = route.path.split('/'); - data.activeMenu = `/${arr[1]}/${arr[2]}`; - } - - initData(); </script> <template> <div class="size flex align-item-center justify-between bd-bottom"> - <div class="image flex align-item-center justify-between"> + <div class="image"> <el-image :src="userImg" class="flex center" fit="fill"> <div slot="error" class="image-slot"> <i class="el-icon-picture-outline"></i> </div> </el-image> - <div class="title text-main-color text-title text-family text-weight-lt">BanyanDB Manager</div> - <!-- stream/measure sources url --> - <div style="width: 380px" class="margin-left-small"></div> + <h1 class="title text-main-color text-title text-family text-weight-lt">BanyanDB Manager</h1> Review Comment: Using an h1 tag for the logo text may negatively impact SEO and accessibility. Consider using a div or span with appropriate ARIA attributes, or ensure this is truly the main heading of the page. ```suggestion <span class="title text-main-color text-title text-family text-weight-lt" role="img" aria-label="BanyanDB Manager">BanyanDB Manager</span> ``` ########## ui/src/components/Header/components/constants.js: ########## @@ -0,0 +1,42 @@ +/* + * Licensed to Apache Software Foundation (ASF) under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Apache Software Foundation (ASF) licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software 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. + */ +export const MENU_ACTIVE_COLOR = 'var(--color-main)'; +export const MENU_DEFAULT_PATH = '/banyandb/query'; Review Comment: The default path has changed from '/banyandb/dashboard' to '/banyandb/query'. Ensure this is intentional, as it changes the landing page for all users when accessing the application. ```suggestion export const MENU_DEFAULT_PATH = '/banyandb/dashboard'; ``` -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
