feat: benchmark detail page

src/components/page-tools/index.tsx

@@ -107,7 +107,47 @@ export const FilterBar: React.FC<FilterBarProps> = (props) => {
   } = props;
   const intl = useIntl();
 
-  const renderRight = useMemo(() => {
+  const renderLeft = () => {
+    return (
+      <Space>
+        <Input
+          prefix={
+            <SearchOutlined
+              style={{ color: 'var(--ant-color-text-placeholder)' }}
+            ></SearchOutlined>
+          }
+          placeholder={
+            inputHolder ||
+            intl.formatMessage({
+              id: 'common.filter.name'
+            })
+          }
+          style={{ width: widths?.input || 230 }}
+          allowClear
+          onChange={handleInputChange}
+        ></Input>
+        {showSelect && (
+          <BaseSelect
+            allowClear
+            showSearch={false}
+            placeholder={selectHolder}
+            style={{ width: widths?.select || 230 }}
+            size="large"
+            onChange={handleSelectChange}
+            options={selectOptions}
+          ></BaseSelect>
+        )}
+        <Button
+          type="text"
+          style={{ color: 'var(--ant-color-text-tertiary)' }}
+          onClick={handleSearch}
+          icon={<SyncOutlined></SyncOutlined>}
+        ></Button>
+      </Space>
+    );
+  };
+
+  const renderRight = () => {
     if (!handleClickPrimary && !handleDeleteByBatch) {
       return null;
     }
@@ -156,56 +196,14 @@ export const FilterBar: React.FC<FilterBarProps> = (props) => {
         )}
       </Space>
     );
-  }, [
-    actionItems,
-    actionType,
-    rowSelection?.selectedRowKeys,
-    handleClickPrimary,
-    intl
-  ]);
+  };
 
   return (
     <PageTools
       marginBottom={marginBottom}
       marginTop={0}
-      left={
-        <Space>
-          <Input
-            prefix={
-              <SearchOutlined
-                style={{ color: 'var(--ant-color-text-placeholder)' }}
-              ></SearchOutlined>
-            }
-            placeholder={
-              inputHolder ||
-              intl.formatMessage({
-                id: 'common.filter.name'
-              })
-            }
-            style={{ width: widths?.input || 230 }}
-            allowClear
-            onChange={handleInputChange}
-          ></Input>
-          {showSelect && (
-            <BaseSelect
-              allowClear
-              showSearch={false}
-              placeholder={selectHolder}
-              style={{ width: widths?.select || 230 }}
-              size="large"
-              onChange={handleSelectChange}
-              options={selectOptions}
-            ></BaseSelect>
-          )}
-          <Button
-            type="text"
-            style={{ color: 'var(--ant-color-text-tertiary)' }}
-            onClick={handleSearch}
-            icon={<SyncOutlined></SyncOutlined>}
-          ></Button>
-        </Space>
-      }
-      right={right || renderRight}
+      left={left || renderLeft()}
+      right={right || renderRight()}
     ></PageTools>
   );
 };