From 413dd322ea4c695a0aa23b9ea9af11b095233fe8 Mon Sep 17 00:00:00 2001
From: Arvin Huang <1095369685@qq.com>
Date: Mon, 19 Feb 2024 18:27:44 +0800
Subject: [PATCH] update: 1. added search for table. 2.limiting scale range

Signed-off-by: Arvin Huang <1095369685@qq.com>
---
 resources-front-end/package.json              |   2 +-
 .../src/transform/metric/summary.ts           |   5 +-
 .../src/views/history/table/Table.vue         |   4 +-
 .../packages/fate-ui-component/html/Table.vue |   4 +-
 .../lib/components/Table/Table.scss           |  12 +
 .../lib/components/Table/Table.vue            |  49 +++-
 .../lib/components/Table/columns/index.vue    | 213 +++++++++---------
 .../Table/component/SearchInput.vue           |  24 ++
 .../lib/LineOrBar/options.ts                  |   2 +
 resources-front-end/webpack.config.js         |  11 +-
 10 files changed, 215 insertions(+), 111 deletions(-)
 create mode 100644 resources-front-end/packages/fate-ui-component/lib/components/Table/component/SearchInput.vue

diff --git a/resources-front-end/package.json b/resources-front-end/package.json
index 5ba2d8b6..9ac168de 100644
--- a/resources-front-end/package.json
+++ b/resources-front-end/package.json
@@ -53,7 +53,7 @@
     "vue": "^3.3.4"
   },
   "scripts": {
-    "dev": "lerna run dev --scope=fate-board",
+    "dev": "lerna run build && lerna run dev --scope=fate-board",
     "build": "lerna run build"
   }
 }
diff --git a/resources-front-end/packages/fate-board/src/transform/metric/summary.ts b/resources-front-end/packages/fate-board/src/transform/metric/summary.ts
index a1161c4c..ba77b5c8 100644
--- a/resources-front-end/packages/fate-board/src/transform/metric/summary.ts
+++ b/resources-front-end/packages/fate-board/src/transform/metric/summary.ts
@@ -143,7 +143,10 @@ export default function Summary(
             },
             parameter: ['SummaryMetricSelection.modelValue'],
           }
-        : tableData
+        : tableData,
+      {
+        needSearch: true
+      }
     )
   );
 
diff --git a/resources-front-end/packages/fate-board/src/views/history/table/Table.vue b/resources-front-end/packages/fate-board/src/views/history/table/Table.vue
index 6fc48291..2cd8ec9a 100644
--- a/resources-front-end/packages/fate-board/src/views/history/table/Table.vue
+++ b/resources-front-end/packages/fate-board/src/views/history/table/Table.vue
@@ -32,7 +32,9 @@ const requesting = ref(true)
 // table header confgiuration
 const header = computed(() => {
   return cols(
-    (content: string, { $index }: any) => data[$index].notes = content,
+    (content: string, { $index }: any) => {
+      data[$index].notes = content
+    },
     () => dataRequest(),
     () => dataRequest())
 });
diff --git a/resources-front-end/packages/fate-ui-component/html/Table.vue b/resources-front-end/packages/fate-ui-component/html/Table.vue
index af9528b4..a028bd0e 100644
--- a/resources-front-end/packages/fate-ui-component/html/Table.vue
+++ b/resources-front-end/packages/fate-ui-component/html/Table.vue
@@ -5,10 +5,12 @@
     :data="dataForTable"
     :current="currentPage"
     :size="pageSize"
+    :total="dataForTable.length"
     :index="true"
     :row-class-name="rowClassName"
     :range="range"
-    :column="true"
+    :column="false"
+    :needSearch="true"
     position="right"
     @sizeChange="sizeChange"
     @currentChange="currentChange"
diff --git a/resources-front-end/packages/fate-ui-component/lib/components/Table/Table.scss b/resources-front-end/packages/fate-ui-component/lib/components/Table/Table.scss
index cc871636..241b2725 100644
--- a/resources-front-end/packages/fate-ui-component/lib/components/Table/Table.scss
+++ b/resources-front-end/packages/fate-ui-component/lib/components/Table/Table.scss
@@ -7,6 +7,18 @@
   align-items: center;
   justify-content: flex-end;
 
+  .fb-table-searching {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+
+    .fb-table-pagination-search {
+      max-width: 240px;
+    }
+  }
+
   .fb-table-columns {
     width: 100%;
     flex: 1 1 95%;
diff --git a/resources-front-end/packages/fate-ui-component/lib/components/Table/Table.vue b/resources-front-end/packages/fate-ui-component/lib/components/Table/Table.vue
index 23956247..8887310c 100644
--- a/resources-front-end/packages/fate-ui-component/lib/components/Table/Table.vue
+++ b/resources-front-end/packages/fate-ui-component/lib/components/Table/Table.vue
@@ -1,6 +1,15 @@
 <template>
   <section class="fb-table">
+    <section class="fb-table-searching">
+      <section><slot name="header"></slot></section>
+      <SearchInput
+        v-if="needSearch"
+        class="fb-table-pagination-search"
+        @change="rowChange">
+      </SearchInput>
+    </section>
     <Columns
+      ref="columnsInstance"
       :data="currentData()"
       :header="currentHeader()"
       :row-class-name="rowClassName"
@@ -36,9 +45,11 @@
 
 <script lang="ts" setup>
 import { ElPagination } from 'element-plus';
+import { column } from 'element-plus/es/components/table-v2/src/common';
 import { isNumber } from 'lodash';
 import { computed, nextTick, ref, watch } from 'vue';
 import Columns from './columns/index.vue';
+import SearchInput from './component/SearchInput.vue';
 
 const props = defineProps([
   'total',
@@ -55,7 +66,8 @@ const props = defineProps([
   'position',
   'range', // table cell exchange according to range
   'showOverflow',
-  'needToRefresh'
+  'needToRefresh',
+  'needSearch'
 ]);
 const emits = defineEmits([
   'sizeChange',
@@ -83,7 +95,7 @@ const currentHeader = () => {
   const columns = props.column && props.header
   ? props.header.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
   : props.header
-  if (props.showOverflow !== false) {
+  if (props.showOverflow !== false && Array.isArray(columns)) {
     for (const each of columns) {
       if (!each.type) {
         each.showOverflowTooltip = true
@@ -100,6 +112,39 @@ const currentData = () => {
   }
 
 const refresh = ref(0)
+const columnsInstance = ref()
+
+let lastCursor = -1
+function rowSelection (search: string) {
+  let cursorFound = false
+  for (let i = lastCursor + 1; i < props.data.length; i++) {
+    const row = props.data[i]
+    for (const key in row) {
+      if (row[key].toString().match(new RegExp(search, 'i'))) {
+        cursorFound = true
+        break
+      }
+    }
+    if (cursorFound) {
+      lastCursor = i
+      break
+    }
+  }
+  if (cursorFound) {
+    currentPage.value = Math.floor(lastCursor / pageSize.value) + 1
+    nextTick(() => {
+      columnsInstance.value.rowSelection(props.data[lastCursor])
+    })
+  } else {
+    lastCursor = -1
+  }
+  return cursorFound
+}
+
+
+const rowChange = (filter: string) => {
+  rowSelection(filter)
+}
 
 watch(
   () => props.header,
diff --git a/resources-front-end/packages/fate-ui-component/lib/components/Table/columns/index.vue b/resources-front-end/packages/fate-ui-component/lib/components/Table/columns/index.vue
index 23c6c78e..fee0c190 100644
--- a/resources-front-end/packages/fate-ui-component/lib/components/Table/columns/index.vue
+++ b/resources-front-end/packages/fate-ui-component/lib/components/Table/columns/index.vue
@@ -1,101 +1,112 @@
-<template>
-  <FBTable></FBTable>
-</template>
-
-<script lang="ts" setup>
-import { ElTable } from 'element-plus';
-import { isFunction } from 'lodash';
-import { h, watch } from 'vue';
-import { classExplain } from '../cellExplain';
-import { columnExplain } from './explain';
-
-const props = defineProps([
-  'data',
-  'header',
-  'rowClassName',
-  'cellClassName',
-  'index',
-  'currentPage',
-  'pageSize',
-  'column',
-  'maxHeight',
-  'range'
-]);
-const emits = defineEmits(['sortChange']);
-
-function rowClassName(scope: any) {
-  const extRow = props.rowClassName
-    ? isFunction(props.rowClassName)
-      ? props.rowClassName(scope)
-      : props.rowClassName
-    : [];
-  return [...classExplain({ row: scope.row }), ...[extRow].flat(Infinity)].join(
-    ' '
-  );
-}
-
-function cellClassName(scope: any) {
-  const extCell = props.cellClassName
-    ? isFunction(props.cellClassName)
-      ? props.cellClassName(scope)
-      : props.cellClassName
-    : [];
-  return [...classExplain(scope), ...[extCell].flat(Infinity)].join(' ');
-}
-
-function sortChange({ column, order }: any) {
-  emits('sortChange', { col: column.property, order });
-}
-
-function initing () {
-  const columns: any[] = [];
-  let headers: any[] = [...(props.header || [])];
-  if (props.index && headers.length > 0) {
-    headers.unshift({ type: 'index', label: 'index', width: 80 });
-  }
-
-  const colExplain = (headers: any[]) => {
-    const columns: any[] = [];
-    for (const header of headers) {
-      const col = h(
-        <any>columnExplain(header),
-        Object.assign({}, header, {
-          currentPage: props.currentPage,
-          pageSize: props.pageSize,
-          column: props.column,
-          range: props.range
-        })
-      );
-      columns.push(col);
-    }
-    return columns;
-  };
-
-  columns.push(...colExplain(headers));
-  return h(
-    ElTable,
-    {
-      data: props.data,
-      fit: true,
-      stripe: true,
-      maxHeight: props.maxHeight,
-      highlightCurrentRow: true,
-      emptyText: 'NO DATA',
-      cellClassName,
-      rowClassName,
-      onSortChange: sortChange,
-    },
-    columns
-  );
-}
-
-let FBTable = initing()
-
-watch(
-  () => props.range,
-  () => {
-    console.log('normal col:', props.range)
-    FBTable = initing()
-  }
-)
-</script>
+<template>
+  <FBTable ref="instance"></FBTable>
+</template>
+
+<script lang="ts" setup>
+import { ElTable } from 'element-plus';
+import { isFunction } from 'lodash';
+import { h, ref, watch } from 'vue';
+import { classExplain } from '../cellExplain';
+import { columnExplain } from './explain';
+
+const props = defineProps([
+  'data',
+  'header',
+  'rowClassName',
+  'cellClassName',
+  'index',
+  'currentPage',
+  'pageSize',
+  'column',
+  'maxHeight',
+  'range'
+]);
+const emits = defineEmits(['sortChange']);
+
+// eslint-disable-next-line vue/no-dupe-keys
+function rowClassName(scope: any) {
+  const extRow = props.rowClassName
+    ? isFunction(props.rowClassName)
+      ? props.rowClassName(scope)
+      : props.rowClassName
+    : [];
+  return [...classExplain({ row: scope.row }), ...[extRow].flat(Infinity)].join(
+    ' '
+  );
+}
+
+// eslint-disable-next-line vue/no-dupe-keys
+function cellClassName(scope: any) {
+  const extCell = props.cellClassName
+    ? isFunction(props.cellClassName)
+      ? props.cellClassName(scope)
+      : props.cellClassName
+    : [];
+  return [...classExplain(scope), ...[extCell].flat(Infinity)].join(' ');
+}
+
+function sortChange({ column, order }: any) {
+  emits('sortChange', { col: column.property, order });
+}
+
+function rowSelection (row: object) {
+  instance.value.setCurrentRow(row)
+}
+
+const instance = ref()
+function initing () {
+  const columns: any[] = [];
+  let headers: any[] = [...(props.header || [])];
+  if (props.index && headers.length > 0) {
+    headers.unshift({ type: 'index', label: 'index', width: 80 });
+  }
+
+  const colExplain = (headers: any[]) => {
+    const columns: any[] = [];
+    for (const header of headers) {
+      const col = h(
+        <any>columnExplain(header),
+        Object.assign({}, header, {
+          currentPage: props.currentPage,
+          pageSize: props.pageSize,
+          column: props.column,
+          range: props.range
+        })
+      );
+      columns.push(col);
+    }
+    return columns;
+  };
+
+  columns.push(...colExplain(headers));
+  return h(
+    ElTable,
+    {
+      data: props.data,
+      fit: true,
+      stripe: true,
+      maxHeight: props.maxHeight,
+      highlightCurrentRow: true,
+      emptyText: 'NO DATA',
+      cellClassName,
+      rowClassName,
+      onSortChange: sortChange,
+    },
+    columns
+  );
+}
+
+let FBTable = initing()
+
+watch(
+  () => props.range,
+  () => {
+    console.log('normal col:', props.range)
+    FBTable = initing()
+  }
+)
+
+defineExpose({
+  rowSelection
+})
+</script>
diff --git a/resources-front-end/packages/fate-ui-component/lib/components/Table/component/SearchInput.vue b/resources-front-end/packages/fate-ui-component/lib/components/Table/component/SearchInput.vue
new file mode 100644
index 00000000..05daef7a
--- /dev/null
+++ b/resources-front-end/packages/fate-ui-component/lib/components/Table/component/SearchInput.vue
@@ -0,0 +1,24 @@
+<template>
+  <ElInput v-model="content" placeholder="Search Input" @keydown.enter.stop="searching">
+    <template #append>
+      <ElButton :icon="Search" @click="searching"/>
+    </template>
+  </ElInput>
+</template>
+
+<script lang="ts" setup>
+import { Search } from '@element-plus/icons-vue';
+import { ElButton, ElInput } from 'element-plus';
+import { ref } from 'vue';
+
+const emits = defineEmits(['change'])
+
+const content = ref('')
+const searching = () => {
+  emits('change', content.value)
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/resources-front-end/packages/fate-visualization/lib/LineOrBar/options.ts b/resources-front-end/packages/fate-visualization/lib/LineOrBar/options.ts
index 0fc3a7ab..37da2e66 100644
--- a/resources-front-end/packages/fate-visualization/lib/LineOrBar/options.ts
+++ b/resources-front-end/packages/fate-visualization/lib/LineOrBar/options.ts
@@ -121,6 +121,7 @@ export default function options({
           []
         ),
         show: true,
+        minSpan: 20
       },
       {
         type: zoomType || 'inside',
@@ -132,6 +133,7 @@ export default function options({
           []
         ),
         show: true,
+        minSpan: 20
       },
     ];
     if (color) {
diff --git a/resources-front-end/webpack.config.js b/resources-front-end/webpack.config.js
index c8d607a0..34100c5f 100644
--- a/resources-front-end/webpack.config.js
+++ b/resources-front-end/webpack.config.js
@@ -147,11 +147,14 @@ module.exports = function (env, args) {
   }
 
   if (env.html) {
+    const config = {
+      template: path.resolve(env.root, env.html),
+    }
+    if (env.icon) {
+      config.favicon = path.resolve(env.root, env.icon)
+    }
     options.plugins.push(
-      new HtmlWebpackPlugin({
-        template: path.resolve(env.root, env.html),
-        favicon: path.resolve(env.root, env.icon)
-      })
+      new HtmlWebpackPlugin(config)
     );
   }