[Feature-10872][UI] Display the total count in all listing page (#16590)

* feature 10872

* feature 10872

dolphinscheduler-ui/src/locales/en_US/project.ts

@@ -40,7 +40,8 @@ export default {
     no_permission: 'No Permission',
     read_permission: 'Read Permission',
     all_permission: 'All Permission',
-    assign_worker_group: 'Worker Group'
+    assign_worker_group: 'Worker Group',
+    total_items: 'Total Item is'
   },
   workflow: {
     on_line: 'Online',

dolphinscheduler-ui/src/locales/zh_CN/project.ts

@@ -40,7 +40,8 @@ export default {
     no_permission: '无权限',
     read_permission: '读权限',
     all_permission: '所有权限',
-    assign_worker_group: '分配WorkerGroup'
+    assign_worker_group: '分配WorkerGroup',
+    total_items: '总条目为'
   },
   workflow: {
     on_line: '线上',

dolphinscheduler-ui/src/utils/tableTotalCount.ts

@@ -0,0 +1,28 @@
+/*
+ * 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 { useI18n } from 'vue-i18n'
+import { RenderPrefix } from 'naive-ui/es/pagination/src/interface'
+
+export default function totalCount(params: Parameters<RenderPrefix>[0]) {
+  const { t } = useI18n()
+
+  const prefix = t('project.list.total_items')
+  const count = Number.prototype.toLocaleString.call(params?.itemCount ?? 0)
+
+  return `${prefix}: ${count}`
+}

dolphinscheduler-ui/src/views/projects/list/index.tsx

@@ -30,6 +30,7 @@ import Card from '@/components/card'
 import Search from '@/components/input-search'
 import ProjectModal from './components/project-modal'
 import WorkerGroupModal from '@/views/projects/list/components/worker-group-modal'
+import totalCount from '@/utils/tableTotalCount'
 
 const list = defineComponent({
   name: 'list',
@@ -161,6 +162,8 @@ const list = defineComponent({
                 show-quick-jumper
                 onUpdatePage={this.requestData}
                 onUpdatePageSize={this.handleChangePageSize}
+                itemCount={this.totalCount}
+                prefix={totalCount}
               />
             </NSpace>
           </NSpace>

dolphinscheduler-ui/src/views/projects/list/use-table.ts

@@ -247,6 +247,7 @@ export function useTable() {
     pageSize: ref(10),
     searchVal: ref(''),
     totalPage: ref(1),
+    totalCount: ref(0),
     showModalRef: ref(false),
     showWorkerGroupModalRef: ref(false),
     statusRef: ref(0),
@@ -259,6 +260,7 @@ export function useTable() {
     variables.loadingRef = true
     const { state } = useAsyncState(
       queryProjectListPaging(params).then((res: ProjectRes) => {
+        variables.totalCount = res.total
         variables.totalPage = res.totalPage
         variables.tableData = res.totalList.map((item, unused) => {
           item.createTime = format(

dolphinscheduler-ui/src/views/projects/task/instance/batch-task.tsx

@@ -41,6 +41,7 @@ import { stateType } from '@/common/common'
 import { useUISettingStore } from '@/store/ui-setting/ui-setting'
 import Card from '@/components/card'
 import LogModal from '@/components/log-modal'
+import totalCount from '@/utils/tableTotalCount'
 
 const BatchTaskInstance = defineComponent({
   name: 'task-instance',
@@ -299,6 +300,8 @@ const BatchTaskInstance = defineComponent({
                 show-quick-jumper
                 onUpdatePage={requestTableData}
                 onUpdatePageSize={onUpdatePageSize}
+                itemCount={this.totalCount}
+                prefix={totalCount}
               />
             </NSpace>
           </NSpace>

dolphinscheduler-ui/src/views/projects/task/instance/stream-task.tsx

@@ -42,6 +42,7 @@ import { streamStateType } from '@/common/common'
 import { useUISettingStore } from '@/store/ui-setting/ui-setting'
 import Card from '@/components/card'
 import LogModal from '@/components/log-modal'
+import totalCount from '@/utils/tableTotalCount'
 
 const BatchTaskInstance = defineComponent({
   name: 'task-instance',
@@ -271,6 +272,8 @@ const BatchTaskInstance = defineComponent({
                 show-quick-jumper
                 onUpdatePage={getTableData}
                 onUpdatePageSize={onUpdatePageSize}
+                itemCount={this.totalCount}
+                prefix={totalCount}
               />
             </NSpace>
           </NSpace>

dolphinscheduler-ui/src/views/projects/task/instance/use-stream-table.ts

@@ -16,7 +16,7 @@
  */
 
 import { useI18n } from 'vue-i18n'
-import { h, reactive } from 'vue'
+import { h, reactive, ref } from 'vue'
 import {
   downloadLog,
   queryTaskListPaging,
@@ -53,6 +53,7 @@ export function useTable() {
     tableData: [] as any[],
     page: 1,
     pageSize: 10,
+    totalCount: ref(0),
     searchVal: null,
     workflowInstanceId: workflowInstanceId ? workflowInstanceId : null,
     host: null,
@@ -302,6 +303,7 @@ export function useTable() {
 
     queryTaskListPaging(data, { projectCode })
       .then((res: TaskInstancesRes) => {
+        variables.totalCount = res.total
         variables.tableData = [...res.totalList]
         variables.totalPage = res.totalPage
       })

dolphinscheduler-ui/src/views/projects/task/instance/use-table.ts

@@ -56,6 +56,7 @@ export function useTable() {
     tableData: [] as IRecord[],
     page: ref(1),
     pageSize: ref(10),
+    totalCount: ref(0),
     searchVal: ref(taskName || null),
     taskCode: ref(taskCode || null),
     workflowInstanceId: ref(workflowInstanceId ? workflowInstanceId : null),
@@ -331,6 +332,7 @@ export function useTable() {
     const { state } = useAsyncState(
       queryTaskListPaging(data, { projectCode }).then(
         (res: TaskInstancesRes) => {
+          variables.totalCount = res.total
           variables.tableData = res.totalList as IRecord[]
           variables.totalPage = res.totalPage
           variables.loadingRef = false

dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx

@@ -46,6 +46,7 @@ import CopyModal from './components/copy-modal'
 import type { Router } from 'vue-router'
 import Search from '@/components/input-search'
 import DependenciesModal from '@/views/projects/components/dependencies/dependencies-modal'
+import totalCount from '@/utils/tableTotalCount'
 
 export default defineComponent({
   name: 'WorkflowDefinitionList',
@@ -279,6 +280,8 @@ export default defineComponent({
                 show-quick-jumper
                 onUpdatePage={this.requestData}
                 onUpdatePageSize={this.handleChangePageSize}
+                itemCount={this.totalCount}
+                prefix={totalCount}
               />
             </NSpace>
           </NSpace>

dolphinscheduler-ui/src/views/projects/workflow/definition/use-table.ts

@@ -62,6 +62,7 @@ export function useTable() {
     pageSize: ref(10),
     searchVal: ref(),
     totalPage: ref(1),
+    totalCount: ref(0),
     timingType: ref('create'),
     timingState: ref('OFFLINE'),
     showRef: ref(false),
@@ -564,6 +565,7 @@ export function useTable() {
     variables.loadingRef = true
     const { state } = useAsyncState(
       queryListPaging({ ...params }, variables.projectCode).then((res: any) => {
+        variables.totalCount = res.total
         variables.totalPage = res.totalPage
         variables.tableData = res.totalList.map((item: any) => {
           return { ...item }

dolphinscheduler-ui/src/views/projects/workflow/instance/index.tsx

@@ -29,6 +29,7 @@ import { useTable } from './use-table'
 import Card from '@/components/card'
 import WorkflowInstanceCondition from './components/workflow-instance-condition'
 import type { IWorkflowInstanceSearch } from './types'
+import totalCount from '@/utils/tableTotalCount'
 
 export default defineComponent({
   name: 'WorkflowInstanceList',
@@ -121,6 +122,8 @@ export default defineComponent({
                 show-quick-jumper
                 onUpdatePage={this.requestData}
                 onUpdatePageSize={this.handleChangePageSize}
+                itemCount={this.totalCount}
+                prefix={totalCount}
               />
             </NSpace>
           </NSpace>

dolphinscheduler-ui/src/views/projects/workflow/instance/use-table.ts

@@ -57,6 +57,7 @@ export function useTable() {
     page: ref(1),
     pageSize: ref(10),
     totalPage: ref(1),
+    totalCount: ref(0),
     searchVal: ref(),
     executorName: ref(),
     host: ref(),
@@ -264,6 +265,7 @@ export function useTable() {
     }
     queryWorkflowInstanceListPaging({ ...params }, variables.projectCode).then(
       (res: any) => {
+        variables.totalCount = res.total
         variables.totalPage = res.totalPage
         variables.tableData = res.totalList.map((item: any) => {
           return { ...item }