You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by "Fine0830 (via GitHub)" <gi...@apache.org> on 2025/10/29 03:12:48 UTC

[PR] feat(UI): Implement the Query Page for BydbQL [skywalking-banyandb]

Fine0830 opened a new pull request, #829:
URL: https://github.com/apache/skywalking-banyandb/pull/829

   - [ ] If this pull request closes/resolves/fixes an existing issue, replace the issue number. Fixes apache/skywalking#<issue number>.
   - [ ] Update the [`CHANGES` log](https://github.com/apache/skywalking-banyandb/blob/main/CHANGES.md).
   
   Video
   
   https://github.com/user-attachments/assets/3fc9e1fe-2e4f-4105-9ce9-6a29a825516a
   
   
   Signed-off-by: Qiuxia Fan <qi...@apache.org>
   


-- 
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: notifications-unsubscribe@skywalking.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


Re: [PR] feat(UI): Implement the Query Page for BydbQL [skywalking-banyandb]

Posted by "codecov-commenter (via GitHub)" <gi...@apache.org>.
codecov-commenter commented on PR #829:
URL: https://github.com/apache/skywalking-banyandb/pull/829#issuecomment-3459503671

   ## [Codecov](https://app.codecov.io/gh/apache/skywalking-banyandb/pull/829?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache) Report
   :white_check_mark: All modified and coverable lines are covered by tests.
   :white_check_mark: Project coverage is 31.99%. Comparing base ([`3530dd9`](https://app.codecov.io/gh/apache/skywalking-banyandb/commit/3530dd9b5cefaa4fef60eec91ecbfbdfcaf243c5?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache)) to head ([`2177f19`](https://app.codecov.io/gh/apache/skywalking-banyandb/commit/2177f190c524b10f86fe045c2d7d5f869f263c42?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache)).
   :warning: Report is 13 commits behind head on main.
   > :exclamation:  There is a different number of reports uploaded between BASE (3530dd9) and HEAD (2177f19). Click for more details.
   > 
   > <details><summary>HEAD has 1 upload less than BASE</summary>
   >
   >| Flag | BASE (3530dd9) | HEAD (2177f19) |
   >|------|------|------|
   >||1|0|
   ></details>
   
   <details><summary>Additional details and impacted files</summary>
   
   
   
   ```diff
   @@             Coverage Diff             @@
   ##             main     #829       +/-   ##
   ===========================================
   - Coverage   45.97%   31.99%   -13.99%     
   ===========================================
     Files         328       94      -234     
     Lines       55505     9702    -45803     
   ===========================================
   - Hits        25520     3104    -22416     
   + Misses      27909     6298    -21611     
   + Partials     2076      300     -1776     
   ```
   
   | [Flag](https://app.codecov.io/gh/apache/skywalking-banyandb/pull/829/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache) | Coverage Δ | |
   |---|---|---|
   | [pkg](https://app.codecov.io/gh/apache/skywalking-banyandb/pull/829/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache) | `31.99% <ø> (?)` | |
   
   Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache#carryforward-flags-in-the-pull-request-comment) to find out more.
   </details>
   
   [:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/apache/skywalking-banyandb/pull/829?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache).   
   :loudspeaker: Have feedback on the report? [Share it here](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=apache).
   <details><summary> :rocket: New features to boost your workflow: </summary>
   
   - :snowflake: [Test Analytics](https://docs.codecov.com/docs/test-analytics): Detect flaky tests, report on failures, and find test suite problems.
   - :package: [JS Bundle Analysis](https://docs.codecov.com/docs/javascript-bundle-analysis): Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
   </details>


-- 
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: notifications-unsubscribe@skywalking.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


Re: [PR] feat(UI): Implement the Query Page for BydbQL [skywalking-banyandb]

Posted by "wu-sheng (via GitHub)" <gi...@apache.org>.
wu-sheng merged PR #829:
URL: https://github.com/apache/skywalking-banyandb/pull/829


-- 
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: notifications-unsubscribe@skywalking.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


Re: [PR] feat(UI): Implement the Query Page for BydbQL [skywalking-banyandb]

Posted by "Copilot (via GitHub)" <gi...@apache.org>.
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: notifications-unsubscribe@skywalking.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org