fixed UI

cenfun · Nov 10, 2024 · b6b42b1 · b6b42b1
1 parent 3d58d90
commit b6b42b1
Show file tree

Hide file tree

Showing 15 changed files with 233 additions and 104 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 ## Changelog
 
+* 2.9.10
+  - fixed UI highlight
+  - fixed UI icons
+  - fixed trends chart
+  - fixed case type ordering
+
 * 2.9.9
   - fixed trend file issue (#160)
 

diff --git a/lib/common.js b/lib/common.js
@@ -230,8 +230,13 @@ const getTrends = async (input) => {
         return [];
     }
 
+    // filter with one year ago
+    const date = new Date();
+    const oneYearAgo = date.setFullYear(date.getFullYear() - 1);
+
     // copy previous trends
-    const trends = [].concat(data.trends || []);
+    const trends = [].concat(data.trends || []).filter((it) => it.date > oneYearAgo);
+
     trends.push(Util.getCurrentTrendInfo(data));
 
     return trends;

diff --git a/lib/default/summary.js b/lib/default/summary.js
@@ -4,10 +4,10 @@ module.exports = () => ({
         value: 0,
         nav: true
     },
-    passed: {
-        name: 'Passed',
+    failed: {
+        name: 'Failed',
         value: 0,
-        color: 'green',
+        color: '#d00',
         nav: true
     },
     flaky: {
@@ -22,10 +22,10 @@ module.exports = () => ({
         color: 'gray',
         nav: true
     },
-    failed: {
-        name: 'Failed',
+    passed: {
+        name: 'Passed',
         value: 0,
-        color: '#d00',
+        color: 'green',
         nav: true
     },
 
@@ -60,21 +60,27 @@ module.exports = () => ({
         value: 0
     },
 
-    retries: {
-        name: 'Retries',
+    errors: {
+        name: 'Errors',
+        icon: 'error',
         value: 0
     },
 
-    errors: {
-        name: 'Errors',
+    retries: {
+        name: 'Retries',
+        icon: 'retry',
         value: 0
     },
+
     logs: {
         name: 'Logs',
+        icon: 'log',
         value: 0
     },
+
     attachments: {
         name: 'Attachments',
+        icon: 'attachment',
         value: 0
     }
 });
diff --git a/lib/generate-data.js b/lib/generate-data.js
@@ -97,7 +97,7 @@ const generateData = async (results) => {
 
     // suite and case types
     data.suiteTypes = ['project', 'file', 'describe', 'shard'];
-    data.caseTypes = ['passed', 'flaky', 'skipped', 'failed'];
+    data.caseTypes = ['failed', 'flaky', 'skipped', 'passed'];
     data.traceViewerUrl = options.traceViewerUrl;
     data.mermaid = generateMermaid(options);
     data.groupOptions = options.groupOptions;

diff --git a/lib/utils/pie.js b/lib/utils/pie.js
@@ -116,8 +116,8 @@ const generatePieChart = (pieDataList) => {
 
     // legends
     const legendWidth = 200;
-    const legendHeight = Math.floor((o.height - margin * 2) / list.length);
-    const legends = [`<g transform="translate(${pieWidth + margin} ${margin})">`];
+    const legendHeight = Math.floor((o.height - margin * 3) / list.length);
+    const legends = [`<g transform="translate(${pieWidth + margin} ${margin * 1.5})">`];
     list.forEach((item, i) => {
         const midY = legendHeight * 0.5;
         legends.push(`<g class="${o.ns}-legend-${item.id}" transform="translate(0 ${legendHeight * i})">`);

diff --git a/packages/app/src/components/detail/detail.vue b/packages/app/src/components/detail/detail.vue
@@ -71,6 +71,21 @@ const updateColumnWidth = function(grid) {
 
 };
 
+const addHighlight = (rowItem) => {
+    removeHighlight();
+    if (data.grid && rowItem) {
+        data.grid.setRowState(rowItem, 'highlight', true);
+        data.highlightRow = rowItem;
+    }
+};
+
+const removeHighlight = () => {
+    if (data.grid && data.highlightRow) {
+        data.grid.setRowState(data.highlightRow, 'highlight', false);
+        data.highlightRow = null;
+    }
+};
+
 const getGrid = () => {
     if (data.grid) {
         return data.grid;
@@ -90,20 +105,9 @@ const getGrid = () => {
     });
 
     grid.bind('onClick', (e, d) => {
-        grid.selectAll(false);
-    });
-
-    grid.bind('onDblClick', (e, d) => {
-        const { rowItem } = d;
-        if (rowItem && !rowItem.hasDetails) {
-            grid.setRowSelected(d.rowItem);
-        }
+        removeHighlight();
     });
 
-    // grid.bind('onRowExpanded onRowCollapsed', (e, d) => {
-    //     console.log(d);
-    // });
-
     grid.setOption({
 
         headerVisible: false,
@@ -387,8 +391,7 @@ const updatePosition = (position) => {
             grid.scrollRowIntoView(rowItem);
         }
         setTimeout(() => {
-            grid.selectAll(false);
-            grid.setRowSelected(rowItem);
+            addHighlight(rowItem);
         }, 100);
 
     }
@@ -450,9 +453,7 @@ onMounted(() => {
 });
 
 const onFocus = (e) => {
-    if (data.grid) {
-        data.grid.selectAll(false);
-    }
+    removeHighlight();
 };
 
 </script>
@@ -541,6 +542,23 @@ const onFocus = (e) => {
 .mcr-overview-grid {
     position: relative;
     overflow: hidden;
+
+    .tg-turbogrid {
+        .tg-highlight {
+            &::after {
+                position: absolute;
+                top: 0;
+                left: 0;
+                content: "";
+                display: block;
+                width: 100%;
+                height: 100%;
+                box-sizing: border-box;
+                border: 2px solid #80bdff;
+                pointer-events: none;
+            }
+        }
+    }
 }
 
 .markdown-body {

diff --git a/packages/app/src/components/icon-label.vue b/packages/app/src/components/icon-label.vue
@@ -20,6 +20,10 @@ const props = defineProps({
         type: String,
         default: ''
     },
+    color: {
+        type: String,
+        default: ''
+    },
     gap: {
         type: String,
         default: ''
@@ -53,6 +57,9 @@ const styleMap = computed(() => {
     if (props.size) {
         st['--mcr-icon-size'] = props.size;
     }
+    if (props.color) {
+        st['--mcr-icon-color'] = props.color;
+    }
     if (props.gap) {
         st['--mcr-icon-gap'] = props.gap;
     }
@@ -116,6 +123,7 @@ watch(() => props.icon, () => {
 .mcr-icon-label {
     --mcr-icon-size: 16px;
     --mcr-icon-gap: 3px;
+    --mcr-icon-color: inherit;
 
     position: relative;
     gap: var(--mcr-icon-gap);
@@ -125,6 +133,7 @@ watch(() => props.icon, () => {
     display: block;
     width: var(--mcr-icon-size);
     height: var(--mcr-icon-size);
+    color: var(--mcr-icon-color);
     background-repeat: no-repeat;
     background-position: center center;
     background-size: var(--mcr-icon-size) var(--mcr-icon-size);

diff --git a/packages/app/src/components/report/report.vue b/packages/app/src/components/report/report.vue
@@ -335,12 +335,14 @@ const pieHandler = () => {
         primary: true,
         list: [
             summary.errors,
+            summary.retries,
             summary.logs,
-            summary.attachments,
-            summary.retries
+            summary.attachments
         ]
     }];
 
+    // console.log(report.amountList, summary);
+
 };
 
 // ====================================================================================
@@ -402,17 +404,22 @@ onActivated(() => {
                 gap="15px"
                 wrap
               >
-                <IconLabel
+                <VuiFlex
                   v-for="(item, j) in group.list"
                   :key="j"
-                  :icon="item.icon || group.icon"
-                  :button="group.button"
-                  :primary="group.primary"
-                  :tooltip="item.description"
-                  @click="onAmountClick(item)"
+                  gap="5px"
                 >
-                  {{ item.name }} <span class="mcr-num">{{ Util.NF(item.value) }}</span>
-                </IconLabel>
+                  <IconLabel
+                    :icon="item.icon || group.icon"
+                    :button="group.button"
+                    :primary="group.primary"
+                    :tooltip="item.description"
+                    @click="onAmountClick(item)"
+                  >
+                    {{ item.name }}
+                  </IconLabel>
+                  <span class="mcr-num">{{ Util.NF(item.value) }}</span>
+                </VuiFlex>
               </VuiFlex>
             </template>
 
@@ -421,15 +428,15 @@ onActivated(() => {
               wrap
             >
               <IconLabel
-                icon="time"
+                icon="sort"
                 primary
                 @click="onSortClick('tests','duration')"
               >
                 Top Slowest
               </IconLabel>
 
               <IconLabel
-                icon="time"
+                icon="sort"
                 primary
                 @click="onSortClick('failed','duration')"
               >