You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by wa...@apache.org on 2022/12/01 08:01:11 UTC
[dolphinscheduler] branch dev updated: [improvement-#11879]Keyword Search Improvement (#12951)
This is an automated email from the ASF dual-hosted git repository.
wanggenhua pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 9e91a2bc61 [improvement-#11879]Keyword Search Improvement (#12951)
9e91a2bc61 is described below
commit 9e91a2bc610a836dab1b2b5ebdfa09774b48826c
Author: fuchanghai <33...@users.noreply.github.com>
AuthorDate: Thu Dec 1 16:01:01 2022 +0800
[improvement-#11879]Keyword Search Improvement (#12951)
* [improvement-#11879]Keyword Search Improvement
* [improvement] add a search component
* [Feature][UI] Revise the `Search` component.
* [improvement] add search components
* [improvement] fix
* [improvement] remove unUsed
* [improvement] remove unUsed
* handle the different locales.
Co-authored-by: Jackie <‘2875334588@qq.com’>
Co-authored-by: Amy <am...@163.com>
---
.../src/components/input-search/index.tsx | 55 ++++++++++++++++++++++
dolphinscheduler-ui/src/locales/en_US/index.ts | 4 +-
.../src/locales/en_US/input-search.ts | 20 ++++++++
dolphinscheduler-ui/src/locales/zh_CN/index.ts | 4 +-
.../src/locales/zh_CN/input-search.ts | 20 ++++++++
.../src/views/data-quality/rule/index.tsx | 25 ++++------
.../src/views/data-quality/rule/use-table.ts | 2 +-
.../src/views/data-quality/task-result/index.tsx | 12 ++---
.../src/views/datasource/list/index.tsx | 11 ++---
.../src/views/datasource/list/use-table.ts | 4 +-
.../src/views/projects/list/index.tsx | 15 +++---
.../src/views/projects/list/use-table.ts | 2 +-
.../views/projects/workflow/definition/index.tsx | 12 ++---
.../src/views/resource/file/index.tsx | 11 ++---
.../src/views/resource/task-group/option/index.tsx | 17 ++++---
.../src/views/resource/task-group/queue/index.tsx | 28 +++++------
.../src/views/resource/udf/function/index.tsx | 11 ++---
.../src/views/resource/udf/resource/index.tsx | 9 ++--
.../views/security/alarm-group-manage/index.tsx | 10 ++--
.../views/security/alarm-instance-manage/index.tsx | 9 ++--
.../src/views/security/cluster-manage/index.tsx | 10 ++--
.../views/security/environment-manage/index.tsx | 10 ++--
.../views/security/k8s-namespace-manage/index.tsx | 10 ++--
.../src/views/security/tenant-manage/index.tsx | 10 ++--
.../src/views/security/token-manage/index.tsx | 10 ++--
.../src/views/security/user-manage/index.tsx | 14 +++---
.../views/security/worker-group-manage/index.tsx | 10 ++--
.../src/views/security/yarn-queue-manage/index.tsx | 10 ++--
28 files changed, 216 insertions(+), 149 deletions(-)
diff --git a/dolphinscheduler-ui/src/components/input-search/index.tsx b/dolphinscheduler-ui/src/components/input-search/index.tsx
new file mode 100644
index 0000000000..ea482cb2df
--- /dev/null
+++ b/dolphinscheduler-ui/src/components/input-search/index.tsx
@@ -0,0 +1,55 @@
+/*
+ * Licensed to the 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.
+ * The 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.
+ */
+
+import { defineComponent, withKeys, PropType } from 'vue'
+import { NInput } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+
+const props = {
+ placeholder: {
+ type: String as PropType<string>,
+ required: false
+ }
+}
+
+const Search = defineComponent({
+ name: 'Search',
+ emits: ['search','clear'],
+ props: props,
+ setup(props, ctx) {
+ const { t } = useI18n()
+
+ const onKeyDown = (ev: KeyboardEvent) => {
+ ctx.emit('search', (ev.target as HTMLInputElement)?.value || '')
+ }
+ const onClear = (ev: Event) => {
+ ctx.emit('clear', (ev.target as HTMLInputElement)?.value || '')
+ }
+ return () => (
+
+ <NInput
+ size='small'
+ clearable
+ placeholder = {props.placeholder?props.placeholder:t('input_search.placeholder')}
+ onKeydown={withKeys(onKeyDown, ['enter'])}
+ onClear = {onClear}
+ />
+ )
+ }
+})
+
+export default Search
diff --git a/dolphinscheduler-ui/src/locales/en_US/index.ts b/dolphinscheduler-ui/src/locales/en_US/index.ts
index ed28fe0d4a..096fb87566 100644
--- a/dolphinscheduler-ui/src/locales/en_US/index.ts
+++ b/dolphinscheduler-ui/src/locales/en_US/index.ts
@@ -19,6 +19,7 @@ import crontab from '@/locales/en_US/crontab'
import data_quality from '@/locales/en_US/data-quality'
import datasource from '@/locales/en_US/datasource'
import home from '@/locales/en_US/home'
+import input_search from '@/locales/en_US/input-search'
import login from '@/locales/en_US/login'
import menu from '@/locales/en_US/menu'
import modal from '@/locales/en_US/modal'
@@ -48,5 +49,6 @@ export default {
datasource,
data_quality,
crontab,
- ui_setting
+ ui_setting,
+ input_search
}
diff --git a/dolphinscheduler-ui/src/locales/en_US/input-search.ts b/dolphinscheduler-ui/src/locales/en_US/input-search.ts
new file mode 100644
index 0000000000..8708fe2707
--- /dev/null
+++ b/dolphinscheduler-ui/src/locales/en_US/input-search.ts
@@ -0,0 +1,20 @@
+/*
+ * Licensed to the 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.
+ * The 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 default {
+ placeholder: 'Please enter keyword'
+}
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/locales/zh_CN/index.ts b/dolphinscheduler-ui/src/locales/zh_CN/index.ts
index aee6d13151..52224a1022 100644
--- a/dolphinscheduler-ui/src/locales/zh_CN/index.ts
+++ b/dolphinscheduler-ui/src/locales/zh_CN/index.ts
@@ -19,6 +19,7 @@ import crontab from '@/locales/zh_CN/crontab'
import data_quality from '@/locales/zh_CN/data-quality'
import datasource from '@/locales/zh_CN/datasource'
import home from '@/locales/zh_CN/home'
+import input_search from '@/locales/zh_CN/input-search'
import login from '@/locales/zh_CN/login'
import menu from '@/locales/zh_CN/menu'
import modal from '@/locales/zh_CN/modal'
@@ -48,5 +49,6 @@ export default {
datasource,
data_quality,
crontab,
- ui_setting
+ ui_setting,
+ input_search
}
diff --git a/dolphinscheduler-ui/src/locales/zh_CN/input-search.ts b/dolphinscheduler-ui/src/locales/zh_CN/input-search.ts
new file mode 100644
index 0000000000..699c215ade
--- /dev/null
+++ b/dolphinscheduler-ui/src/locales/zh_CN/input-search.ts
@@ -0,0 +1,20 @@
+/*
+ * Licensed to the 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.
+ * The 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 default {
+ placeholder: '请输入关键词'
+}
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/views/data-quality/rule/index.tsx b/dolphinscheduler-ui/src/views/data-quality/rule/index.tsx
index f7d9a60209..879820dce6 100644
--- a/dolphinscheduler-ui/src/views/data-quality/rule/index.tsx
+++ b/dolphinscheduler-ui/src/views/data-quality/rule/index.tsx
@@ -22,17 +22,11 @@ import {
ref,
toRefs
} from 'vue'
-import {
- NSpace,
- NInput,
- NButton,
- NIcon,
- NDataTable,
- NPagination
-} from 'naive-ui'
+import {NSpace, NButton, NIcon, NDataTable, NPagination} from 'naive-ui'
import { SearchOutlined } from '@vicons/antd'
import { useTable } from './use-table'
import Card from '@/components/card'
+import Search from '@/components/input-search'
import RuleModal from './components/rule-modal'
const TaskResult = defineComponent({
@@ -58,7 +52,6 @@ const TaskResult = defineComponent({
}
const onSearch = () => {
- variables.page = 1
requestTableData()
}
@@ -115,14 +108,16 @@ const TaskResult = defineComponent({
<NSpace vertical>
<Card>
<NSpace justify='end'>
- <NInput
- allowInput={this.trim}
- v-model={[this.searchVal, 'value']}
- size='small'
+ <Search
+ v-model:value={this.searchVal}
placeholder={t('data_quality.rule.name')}
- clearable
+ onSearch={onSearch}
/>
- <NButton size='small' type='primary' onClick={onSearch}>
+ <NButton
+ size='small'
+ type='primary'
+ onClick={onSearch}
+ >
<NIcon>
<SearchOutlined />
</NIcon>
diff --git a/dolphinscheduler-ui/src/views/data-quality/rule/use-table.ts b/dolphinscheduler-ui/src/views/data-quality/rule/use-table.ts
index dac1f557eb..952d0bb843 100644
--- a/dolphinscheduler-ui/src/views/data-quality/rule/use-table.ts
+++ b/dolphinscheduler-ui/src/views/data-quality/rule/use-table.ts
@@ -34,7 +34,7 @@ export function useTable(viewRuleEntry = (unusedRuleJson: string): void => {}) {
page: ref(1),
pageSize: ref(10),
state: ref(null),
- searchVal: ref(null),
+ searchVal: '',
totalPage: ref(1),
loadingRef: ref(false)
})
diff --git a/dolphinscheduler-ui/src/views/data-quality/task-result/index.tsx b/dolphinscheduler-ui/src/views/data-quality/task-result/index.tsx
index 1e07e7c880..ab42fcd51b 100644
--- a/dolphinscheduler-ui/src/views/data-quality/task-result/index.tsx
+++ b/dolphinscheduler-ui/src/views/data-quality/task-result/index.tsx
@@ -24,7 +24,6 @@ import {
} from 'vue'
import {
NSpace,
- NInput,
NSelect,
NDatePicker,
NButton,
@@ -36,6 +35,7 @@ import { SearchOutlined } from '@vicons/antd'
import { useTable } from './use-table'
import { useI18n } from 'vue-i18n'
import Card from '@/components/card'
+import Search from '@/components/input-search'
const TaskResult = defineComponent({
name: 'task-result',
@@ -90,12 +90,10 @@ const TaskResult = defineComponent({
<NSpace vertical>
<Card>
<NSpace justify='end'>
- <NInput
- allowInput={this.trim}
- v-model={[this.searchVal, 'value']}
- size='small'
- placeholder={t('data_quality.task_result.task_name')}
- clearable
+ <Search
+ v-model:value={this.searchVal}
+ placeholder={t('data_quality.task_result.task_name')}
+ onSearch={onSearch}
/>
<NSelect
v-model={[this.ruleType, 'value']}
diff --git a/dolphinscheduler-ui/src/views/datasource/list/index.tsx b/dolphinscheduler-ui/src/views/datasource/list/index.tsx
index 40bb2b9828..275ba08ddb 100644
--- a/dolphinscheduler-ui/src/views/datasource/list/index.tsx
+++ b/dolphinscheduler-ui/src/views/datasource/list/index.tsx
@@ -25,7 +25,6 @@ import {
} from 'vue'
import {
NButton,
- NInput,
NIcon,
NDataTable,
NPagination,
@@ -37,6 +36,7 @@ import { useColumns } from './use-columns'
import { useTable } from './use-table'
import { DefaultTableWidth } from '@/common/column-width-config'
import Card from '@/components/card'
+import Search from '@/components/input-search'
import DetailModal from './detail'
import type { TableColumns } from './types'
import SourceModal from './source-modal'
@@ -143,11 +143,10 @@ const list = defineComponent({
{t('datasource.create_datasource')}
</NButton>
<NSpace justify='end' wrap={false}>
- <NInput
- allowInput={this.trim}
- v-model={[this.searchVal, 'value']}
- size='small'
- placeholder={`${t('datasource.search_input_tips')}`}
+ <Search
+ v-model:value = {this.searchVal}
+ placeholder = {t('datasource.search_input_tips')}
+ onSearch={onUpdatedList}
/>
<NButton type='primary' size='small' onClick={onUpdatedList}>
<NIcon>
diff --git a/dolphinscheduler-ui/src/views/datasource/list/use-table.ts b/dolphinscheduler-ui/src/views/datasource/list/use-table.ts
index e8f5846e8d..08603a57c7 100644
--- a/dolphinscheduler-ui/src/views/datasource/list/use-table.ts
+++ b/dolphinscheduler-ui/src/views/datasource/list/use-table.ts
@@ -15,7 +15,7 @@
* limitations under the License.
*/
-import { reactive } from 'vue'
+import {reactive, ref} from 'vue'
import {
queryDataSourceListPaging,
deleteDataSource
@@ -26,7 +26,7 @@ export function useTable() {
page: 1,
pageSize: 10,
itemCount: 0,
- searchVal: '',
+ searchVal: ref(''),
list: [],
loading: false
})
diff --git a/dolphinscheduler-ui/src/views/projects/list/index.tsx b/dolphinscheduler-ui/src/views/projects/list/index.tsx
index 51fb519af5..52ddce4cac 100644
--- a/dolphinscheduler-ui/src/views/projects/list/index.tsx
+++ b/dolphinscheduler-ui/src/views/projects/list/index.tsx
@@ -20,7 +20,6 @@ import {
NButton,
NDataTable,
NIcon,
- NInput,
NPagination,
NSpace
} from 'naive-ui'
@@ -34,6 +33,7 @@ import {
import { useI18n } from 'vue-i18n'
import { useTable } from './use-table'
import Card from '@/components/card'
+import Search from "@/components/input-search";
import ProjectModal from './components/project-modal'
const list = defineComponent({
@@ -121,14 +121,13 @@ const list = defineComponent({
{t('project.list.create_project')}
</NButton>
<NSpace>
- <NInput
- allowInput={this.trim}
- size='small'
- v-model={[this.searchVal, 'value']}
- placeholder={t('project.list.project_tips')}
- clearable
- onClear={this.onClearSearch}
+ <Search
+ v-model:value = {this.searchVal}
+ placeholder={t('project.list.project_tips')}
+ onSearch={this.handleSearch}
+ onClear={this.onClearSearch}
/>
+
<NButton size='small' type='primary' onClick={this.handleSearch}>
<NIcon>
<SearchOutlined />
diff --git a/dolphinscheduler-ui/src/views/projects/list/use-table.ts b/dolphinscheduler-ui/src/views/projects/list/use-table.ts
index 88947b510d..107718657b 100644
--- a/dolphinscheduler-ui/src/views/projects/list/use-table.ts
+++ b/dolphinscheduler-ui/src/views/projects/list/use-table.ts
@@ -213,7 +213,7 @@ export function useTable() {
tableData: [],
page: ref(1),
pageSize: ref(10),
- searchVal: ref(null),
+ searchVal: ref(''),
totalPage: ref(1),
showModalRef: ref(false),
statusRef: ref(0),
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx b/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx
index 2c5cdeba78..ab5ff4af18 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx
@@ -20,7 +20,6 @@ import {
NButton,
NDataTable,
NIcon,
- NInput,
NPagination,
NSpace,
NTooltip,
@@ -44,6 +43,7 @@ import TimingModal from './components/timing-modal'
import VersionModal from './components/version-modal'
import CopyModal from './components/copy-modal'
import type { Router } from 'vue-router'
+import Search from "@/components/input-search";
export default defineComponent({
name: 'WorkflowDefinitionList',
@@ -177,12 +177,10 @@ export default defineComponent({
</NButton>
</NSpace>
<NSpace>
- <NInput
- allowInput={this.trim}
- size='small'
- placeholder={t('resource.function.enter_keyword_tips')}
- v-model={[this.searchVal, 'value']}
- clearable
+ <Search
+ placeholder = {t('resource.function.enter_keyword_tips')}
+ v-model:value={this.searchVal}
+ onSearch={this.handleSearch}
onClear={this.onClearSearch}
/>
<NButton type='primary' size='small' onClick={this.handleSearch}>
diff --git a/dolphinscheduler-ui/src/views/resource/file/index.tsx b/dolphinscheduler-ui/src/views/resource/file/index.tsx
index 1943a5d94e..d154fe258c 100644
--- a/dolphinscheduler-ui/src/views/resource/file/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/file/index.tsx
@@ -31,7 +31,6 @@ import {
NButtonGroup,
NButton,
NPagination,
- NInput,
NBreadcrumb,
NBreadcrumbItem
} from 'naive-ui'
@@ -52,6 +51,7 @@ import ResourceRenameModal from './rename'
import styles from './index.module.scss'
import type { ResourceFile } from '@/service/modules/resources/types'
import type { Router } from 'vue-router'
+import Search from "@/components/input-search";
export default defineComponent({
name: 'File',
@@ -285,11 +285,10 @@ export default defineComponent({
</NButton>
</NButtonGroup>
<NSpace>
- <NInput
- size='small'
- allowInput={this.trim}
- placeholder={t('resource.file.enter_keyword_tips')}
- v-model={[this.searchRef, 'value']}
+ <Search
+ placeholder = {t('resource.file.enter_keyword_tips')}
+ v-model:value={this.searchRef}
+ onSearch={handleConditions}
/>
<NButton size='small' type='primary' onClick={handleConditions}>
<NIcon>
diff --git a/dolphinscheduler-ui/src/views/resource/task-group/option/index.tsx b/dolphinscheduler-ui/src/views/resource/task-group/option/index.tsx
index 42405398a5..292e757cdb 100644
--- a/dolphinscheduler-ui/src/views/resource/task-group/option/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/task-group/option/index.tsx
@@ -26,7 +26,6 @@ import {
import {
NButton,
NIcon,
- NInput,
NDataTable,
NPagination,
NSpace
@@ -36,6 +35,7 @@ import { SearchOutlined } from '@vicons/antd'
import { useI18n } from 'vue-i18n'
import { useTable } from './use-table'
import FormModal from './components/form-modal'
+import Search from "@/components/input-search";
const taskGroupOption = defineComponent({
name: 'taskGroupOption',
@@ -163,14 +163,13 @@ const taskGroupOption = defineComponent({
{t('resource.task_group_option.create')}
</NButton>
<NSpace>
- <NInput
- allowInput={this.trim}
- size='small'
- v-model={[this.name, 'value']}
- placeholder={t(
- 'resource.task_group_option.please_enter_keywords'
- )}
- ></NInput>
+ <Search
+ placeholder={t(
+ 'resource.task_group_option.please_enter_keywords'
+ )}
+ v-model:value={this.name}
+ onSearch={this.onSearch}
+ ></Search>
<NButton size='small' type='primary' onClick={onSearch}>
<NIcon>
<SearchOutlined />
diff --git a/dolphinscheduler-ui/src/views/resource/task-group/queue/index.tsx b/dolphinscheduler-ui/src/views/resource/task-group/queue/index.tsx
index ee9233a67a..b197319159 100644
--- a/dolphinscheduler-ui/src/views/resource/task-group/queue/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/task-group/queue/index.tsx
@@ -26,7 +26,6 @@ import {
import {
NButton,
NIcon,
- NInput,
NDataTable,
NPagination,
NSelect,
@@ -41,6 +40,7 @@ import { SelectMixedOption } from 'naive-ui/lib/select/src/interface'
import { useRouter } from 'vue-router'
import FormModal from '@/views/resource/task-group/queue/components/form-modal'
import Card from '@/components/card'
+import Search from "@/components/input-search";
import type { Ref } from 'vue'
import type { Router } from 'vue-router'
@@ -176,20 +176,18 @@ const taskGroupQueue = defineComponent({
v-model:value={this.searchParamRef.groupId}
placeholder={t('resource.task_group_queue.task_group_name')}
/>
- <NInput
- allowInput={this.trim}
- size='small'
- v-model={[this.searchParamRef.processName, 'value']}
- placeholder={t(
- 'resource.task_group_queue.workflow_instance_name'
- )}
- ></NInput>
- <NInput
- allowInput={this.trim}
- size='small'
- v-model={[this.searchParamRef.instanceName, 'value']}
- placeholder={t('resource.task_group_queue.task_instance_name')}
- ></NInput>
+ <Search
+ v-model:value={this.searchParamRef.processName}
+ placeholder={t(
+ 'resource.task_group_queue.workflow_instance_name'
+ )}
+ onSearch={onSearch}
+ ></Search>
+ <Search
+ v-model:value={this.searchParamRef.instanceName}
+ placeholder={t('resource.task_group_queue.task_instance_name')}
+ onSearch ={onSearch}
+ ></Search>
<NButton size='small' type='primary' onClick={onSearch}>
<NIcon>
<SearchOutlined />
diff --git a/dolphinscheduler-ui/src/views/resource/udf/function/index.tsx b/dolphinscheduler-ui/src/views/resource/udf/function/index.tsx
index 3df5275492..2338f3e603 100644
--- a/dolphinscheduler-ui/src/views/resource/udf/function/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/udf/function/index.tsx
@@ -29,14 +29,14 @@ import {
NSpace,
NDataTable,
NButton,
- NPagination,
- NInput
+ NPagination
} from 'naive-ui'
import { useI18n } from 'vue-i18n'
import { SearchOutlined } from '@vicons/antd'
import { useTable } from './use-table'
import Card from '@/components/card'
import FolderModal from './components/function-modal'
+import Search from "@/components/input-search";
import styles from './index.module.scss'
export default defineComponent({
@@ -115,11 +115,10 @@ export default defineComponent({
{t('resource.function.create_udf_function')}
</NButton>
<NSpace>
- <NInput
- allowInput={this.trim}
- size='small'
+ <Search
placeholder={t('resource.function.enter_keyword_tips')}
- v-model={[this.searchVal, 'value']}
+ v-model:value={this.searchVal}
+ onSearch={this.handleSearch}
/>
<NButton type='primary' size='small' onClick={this.handleSearch}>
<NIcon>
diff --git a/dolphinscheduler-ui/src/views/resource/udf/resource/index.tsx b/dolphinscheduler-ui/src/views/resource/udf/resource/index.tsx
index 6290f60dc4..a7d69a8fe7 100644
--- a/dolphinscheduler-ui/src/views/resource/udf/resource/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/udf/resource/index.tsx
@@ -30,7 +30,6 @@ import {
NDataTable,
NButton,
NPagination,
- NInput,
NBreadcrumb,
NBreadcrumbItem
} from 'naive-ui'
@@ -41,6 +40,7 @@ import Card from '@/components/card'
import FolderModal from './components/folder-modal'
import UploadModal from './components/upload-modal'
import styles from './index.module.scss'
+import Search from "@/components/input-search";
export default defineComponent({
name: 'resource-manage',
@@ -148,11 +148,10 @@ export default defineComponent({
</NButton>
</NSpace>
<NSpace>
- <NInput
- allowInput={this.trim}
- size='small'
+ <Search
placeholder={t('resource.udf.enter_keyword_tips')}
- v-model={[this.searchVal, 'value']}
+ v-model:value={this.searchVal}
+ onSearch={this.handleSearch}
/>
<NButton type='primary' size='small' onClick={this.handleSearch}>
<NIcon>
diff --git a/dolphinscheduler-ui/src/views/security/alarm-group-manage/index.tsx b/dolphinscheduler-ui/src/views/security/alarm-group-manage/index.tsx
index b092a26672..70b9b7171a 100644
--- a/dolphinscheduler-ui/src/views/security/alarm-group-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/alarm-group-manage/index.tsx
@@ -26,7 +26,6 @@ import {
NButton,
NDataTable,
NIcon,
- NInput,
NPagination,
NSpace
} from 'naive-ui'
@@ -35,6 +34,7 @@ import { useI18n } from 'vue-i18n'
import { useTable } from './use-table'
import AlarmGroupModal from './components/alarm-group-modal'
import Card from '@/components/card'
+import Search from "@/components/input-search";
const alarmGroupManage = defineComponent({
name: 'alarm-group-manage',
@@ -117,12 +117,10 @@ const alarmGroupManage = defineComponent({
{t('security.alarm_group.create_alarm_group')}
</NButton>
<NSpace>
- <NInput
- allowInput={this.trim}
- size='small'
- clearable
- v-model={[this.searchVal, 'value']}
+ <Search
+ v-model:value={this.searchVal}
placeholder={t('security.alarm_group.search_tips')}
+ onSearch={onSearch}
/>
<NButton size='small' type='primary' onClick={onSearch}>
<NIcon>
diff --git a/dolphinscheduler-ui/src/views/security/alarm-instance-manage/index.tsx b/dolphinscheduler-ui/src/views/security/alarm-instance-manage/index.tsx
index ae2df2af1b..7963331e44 100644
--- a/dolphinscheduler-ui/src/views/security/alarm-instance-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/alarm-instance-manage/index.tsx
@@ -25,7 +25,6 @@ import {
} from 'vue'
import {
NButton,
- NInput,
NIcon,
NDataTable,
NPagination,
@@ -39,6 +38,7 @@ import { useUserInfo } from './use-userinfo'
import { useColumns } from './use-columns'
import { useTable } from './use-table'
import type { IRecord } from './types'
+import Search from "@/components/input-search";
const AlarmInstanceManage = defineComponent({
name: 'alarm-instance-manage',
@@ -129,13 +129,12 @@ const AlarmInstanceManage = defineComponent({
</NButton>
)}
<NSpace justify='end' wrap={false}>
- <NInput
- allowInput={this.trim}
- v-model={[this.searchVal, 'value']}
- size='small'
+ <Search
+ v-model:value={this.searchVal}
placeholder={`${t(
'security.alarm_instance.search_input_tips'
)}`}
+ onSearch={onUpdatedList}
/>
<NButton type='primary' size='small' onClick={onUpdatedList}>
<NIcon>
diff --git a/dolphinscheduler-ui/src/views/security/cluster-manage/index.tsx b/dolphinscheduler-ui/src/views/security/cluster-manage/index.tsx
index 965474615d..e12f55f52c 100644
--- a/dolphinscheduler-ui/src/views/security/cluster-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/cluster-manage/index.tsx
@@ -26,7 +26,6 @@ import {
NButton,
NDataTable,
NIcon,
- NInput,
NPagination,
NSpace
} from 'naive-ui'
@@ -35,6 +34,7 @@ import { useI18n } from 'vue-i18n'
import { useTable } from './use-table'
import ClusterModal from './components/cluster-modal'
import Card from '@/components/card'
+import Search from "@/components/input-search";
const clusterManage = defineComponent({
name: 'cluster-manage',
@@ -122,12 +122,10 @@ const clusterManage = defineComponent({
{t('security.cluster.create_cluster')}
</NButton>
<NSpace>
- <NInput
- allowInput={this.trim}
- size='small'
- clearable
- v-model={[this.searchVal, 'value']}
+ <Search
+ v-model:value={this.searchVal}
placeholder={t('security.cluster.search_tips')}
+ onSearch={onSearch}
/>
<NButton size='small' type='primary' onClick={onSearch}>
<NIcon>
diff --git a/dolphinscheduler-ui/src/views/security/environment-manage/index.tsx b/dolphinscheduler-ui/src/views/security/environment-manage/index.tsx
index 8f9449dd42..7b54ea89c6 100644
--- a/dolphinscheduler-ui/src/views/security/environment-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/environment-manage/index.tsx
@@ -26,7 +26,6 @@ import {
NButton,
NDataTable,
NIcon,
- NInput,
NPagination,
NSpace
} from 'naive-ui'
@@ -35,6 +34,7 @@ import { useI18n } from 'vue-i18n'
import { useTable } from './use-table'
import EnvironmentModal from './components/environment-modal'
import Card from '@/components/card'
+import Search from "@/components/input-search";
const environmentManage = defineComponent({
name: 'environment-manage',
@@ -122,12 +122,10 @@ const environmentManage = defineComponent({
{t('security.environment.create_environment')}
</NButton>
<NSpace>
- <NInput
- allowInput={this.trim}
- size='small'
- clearable
- v-model={[this.searchVal, 'value']}
+ <Search
+ v-model:value={this.searchVal}
placeholder={t('security.environment.search_tips')}
+ onSearch={onSearch}
/>
<NButton size='small' type='primary' onClick={onSearch}>
<NIcon>
diff --git a/dolphinscheduler-ui/src/views/security/k8s-namespace-manage/index.tsx b/dolphinscheduler-ui/src/views/security/k8s-namespace-manage/index.tsx
index e41c79cc27..ceeaec62b6 100644
--- a/dolphinscheduler-ui/src/views/security/k8s-namespace-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/k8s-namespace-manage/index.tsx
@@ -26,7 +26,6 @@ import {
NButton,
NDataTable,
NIcon,
- NInput,
NPagination,
NSpace
} from 'naive-ui'
@@ -35,6 +34,7 @@ import { useI18n } from 'vue-i18n'
import { useTable } from './use-table'
import K8sNamespaceModal from './components/k8s-namespace-modal'
import Card from '@/components/card'
+import Search from "@/components/input-search";
const k8sNamespaceManage = defineComponent({
name: 'k8s-namespace-manage',
@@ -117,12 +117,10 @@ const k8sNamespaceManage = defineComponent({
{t('security.k8s_namespace.create_namespace')}
</NButton>
<NSpace>
- <NInput
- allowInput={this.trim}
- size='small'
- clearable
- v-model={[this.searchVal, 'value']}
+ <Search
+ v-model:value={this.searchVal}
placeholder={t('security.k8s_namespace.search_tips')}
+ onSearch={onSearch}
/>
<NButton size='small' type='primary' onClick={onSearch}>
<NIcon>
diff --git a/dolphinscheduler-ui/src/views/security/tenant-manage/index.tsx b/dolphinscheduler-ui/src/views/security/tenant-manage/index.tsx
index 35432d32df..536a351810 100644
--- a/dolphinscheduler-ui/src/views/security/tenant-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/tenant-manage/index.tsx
@@ -24,7 +24,6 @@ import {
} from 'vue'
import {
NButton,
- NInput,
NIcon,
NDataTable,
NPagination,
@@ -35,6 +34,7 @@ import { SearchOutlined } from '@vicons/antd'
import { useI18n } from 'vue-i18n'
import TenantModal from './components/tenant-modal'
import Card from '@/components/card'
+import Search from "@/components/input-search";
const tenementManage = defineComponent({
name: 'tenement-manage',
@@ -112,12 +112,10 @@ const tenementManage = defineComponent({
{t('security.tenant.create_tenant')}
</NButton>
<NSpace>
- <NInput
- allowInput={this.trim}
- size='small'
- v-model={[this.searchVal, 'value']}
+ <Search
+ v-model:value={this.searchVal}
placeholder={t('security.tenant.search_tips')}
- clearable
+ onSearch={this.handleSearch}
/>
<NButton size='small' type='primary' onClick={this.handleSearch}>
<NIcon>
diff --git a/dolphinscheduler-ui/src/views/security/token-manage/index.tsx b/dolphinscheduler-ui/src/views/security/token-manage/index.tsx
index d9b167fc09..c18b30a2b3 100644
--- a/dolphinscheduler-ui/src/views/security/token-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/token-manage/index.tsx
@@ -26,7 +26,6 @@ import {
NButton,
NDataTable,
NIcon,
- NInput,
NPagination,
NSpace
} from 'naive-ui'
@@ -35,6 +34,7 @@ import { useI18n } from 'vue-i18n'
import { useTable } from './use-table'
import TokenModal from './components/token-modal'
import Card from '@/components/card'
+import Search from "@/components/input-search";
const tokenManage = defineComponent({
name: 'token-manage',
@@ -122,12 +122,10 @@ const tokenManage = defineComponent({
{t('security.token.create_token')}
</NButton>
<NSpace>
- <NInput
- allowInput={this.trim}
- size='small'
- clearable
- v-model={[this.searchVal, 'value']}
+ <Search
+ v-model:value={this.searchVal}
placeholder={t('security.token.search_tips')}
+ onSearch={onSearch}
/>
<NButton size='small' type='primary' onClick={onSearch}>
<NIcon>
diff --git a/dolphinscheduler-ui/src/views/security/user-manage/index.tsx b/dolphinscheduler-ui/src/views/security/user-manage/index.tsx
index 0e7738f523..0c592ee887 100644
--- a/dolphinscheduler-ui/src/views/security/user-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/user-manage/index.tsx
@@ -15,10 +15,13 @@
* limitations under the License.
*/
-import { defineComponent, getCurrentInstance, toRefs } from 'vue'
+import {
+ defineComponent,
+ getCurrentInstance,
+ toRefs
+} from 'vue'
import {
NButton,
- NInput,
NIcon,
NSpace,
NDataTable,
@@ -31,6 +34,7 @@ import { useTable } from './use-table'
import UserDetailModal from './components/user-detail-modal'
import AuthorizeModal from './components/authorize-modal'
import Card from '@/components/card'
+import Search from "@/components/input-search";
const UsersManage = defineComponent({
name: 'user-manage',
@@ -79,11 +83,9 @@ const UsersManage = defineComponent({
{this.t('security.user.create_user')}
</NButton>
<NSpace>
- <NInput
- allowInput={this.trim}
+ <Search
v-model:value={this.searchVal}
- size='small'
- clearable
+ onSearch={this.onUpdatedList}
/>
<NButton type='primary' size='small' onClick={this.onUpdatedList}>
<NIcon>
diff --git a/dolphinscheduler-ui/src/views/security/worker-group-manage/index.tsx b/dolphinscheduler-ui/src/views/security/worker-group-manage/index.tsx
index a1b6309f7c..9272731300 100644
--- a/dolphinscheduler-ui/src/views/security/worker-group-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/worker-group-manage/index.tsx
@@ -26,7 +26,6 @@ import {
NButton,
NDataTable,
NIcon,
- NInput,
NPagination,
NSpace
} from 'naive-ui'
@@ -35,6 +34,7 @@ import { useI18n } from 'vue-i18n'
import { useTable } from './use-table'
import WorkerGroupModal from './components/worker-group-modal'
import Card from '@/components/card'
+import Search from "@/components/input-search";
const workerGroupManage = defineComponent({
name: 'worker-group-manage',
@@ -122,12 +122,10 @@ const workerGroupManage = defineComponent({
{t('security.worker_group.create_worker_group')}
</NButton>
<NSpace>
- <NInput
- allowInput={this.trim}
- size='small'
- clearable
- v-model={[this.searchVal, 'value']}
+ <Search
+ v-model:value={this.searchVal}
placeholder={t('security.worker_group.search_tips')}
+ onSearch={onSearch}
/>
<NButton size='small' type='primary' onClick={onSearch}>
<NIcon>
diff --git a/dolphinscheduler-ui/src/views/security/yarn-queue-manage/index.tsx b/dolphinscheduler-ui/src/views/security/yarn-queue-manage/index.tsx
index db7780bdac..d7de7fb00e 100644
--- a/dolphinscheduler-ui/src/views/security/yarn-queue-manage/index.tsx
+++ b/dolphinscheduler-ui/src/views/security/yarn-queue-manage/index.tsx
@@ -26,7 +26,6 @@ import {
NButton,
NDataTable,
NIcon,
- NInput,
NPagination,
NSpace
} from 'naive-ui'
@@ -35,6 +34,7 @@ import { useI18n } from 'vue-i18n'
import { useTable } from './use-table'
import YarnQueueModal from './components/yarn-queue-modal'
import Card from '@/components/card'
+import Search from "@/components/input-search";
const yarnQueueManage = defineComponent({
name: 'yarn-queue-manage',
@@ -122,12 +122,10 @@ const yarnQueueManage = defineComponent({
{t('security.yarn_queue.create_queue')}
</NButton>
<NSpace>
- <NInput
- allowInput={this.trim}
- size='small'
- clearable
- v-model={[this.searchVal, 'value']}
+ <Search
+ v-model:value={this.searchVal}
placeholder={t('security.yarn_queue.search_tips')}
+ onSearch={onSearch}
/>
<NButton size='small' type='primary' onClick={onSearch}>
<NIcon>