[Refactor][UI] Refactor workflow instance using NSpace component. (#11446)

* [Refactor][UI] Refactor workflow instance using NSpace component.

* [Refactor][UI] Refactor workflow instance using NSpace component.

dolphinscheduler-ui/src/views/projects/workflow/instance/components/process-instance-condition.tsx

@@ -17,13 +17,12 @@
 
 import { SearchOutlined } from '@vicons/antd'
 import {
-  NGrid,
-  NGridItem,
   NInput,
   NButton,
   NDatePicker,
   NSelect,
-  NIcon
+  NIcon,
+  NSpace
 } from 'naive-ui'
 import { defineComponent, getCurrentInstance, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -79,51 +78,46 @@ export default defineComponent({
   render() {
     const { t } = useI18n()
     const options = stateType(t)
+
     return (
-      <NGrid xGap={6} cols={24}>
-        <NGridItem offset={5} span={3}>
-          <NInput
-                  allowInput={this.trim}
-            v-model:value={this.searchValRef}
-            placeholder={t('project.workflow.name')}
-          />
-        </NGridItem>
-        <NGridItem span={3}>
-          <NInput
-                  allowInput={this.trim}
-            v-model:value={this.executorNameRef}
-            placeholder={t('project.workflow.executor')}
-          />
-        </NGridItem>
-        <NGridItem span={3}>
-          <NInput
-                  allowInput={this.trim}
-            v-model:value={this.hostRef}
-            placeholder={t('project.workflow.host')}
-          />
-        </NGridItem>
-        <NGridItem span={3}>
-          <NSelect
-            options={options}
-            defaultValue={''}
-            v-model:value={this.stateTypeRef}
-          />
-        </NGridItem>
-        <NGridItem span={6}>
-          <NDatePicker
-            type='datetimerange'
-            clearable
-            v-model:value={this.startEndTimeRef}
-          />
-        </NGridItem>
-        <NGridItem span={1}>
-          <NButton type='primary' onClick={this.handleSearch}>
-            <NIcon>
-              <SearchOutlined />
-            </NIcon>
-          </NButton>
-        </NGridItem>
-      </NGrid>
+      <NSpace justify='end'>
+        <NInput
+          allowInput={this.trim}
+          size='small'
+          v-model:value={this.searchValRef}
+          placeholder={t('project.workflow.name')}
+        />
+        <NInput
+          allowInput={this.trim}
+          size='small'
+          v-model:value={this.executorNameRef}
+          placeholder={t('project.workflow.executor')}
+        />
+        <NInput
+          allowInput={this.trim}
+          size='small'
+          v-model:value={this.hostRef}
+          placeholder={t('project.workflow.host')}
+        />
+        <NSelect
+          options={options}
+          size='small'
+          style={{width: '210px'}}
+          defaultValue={''}
+          v-model:value={this.stateTypeRef}
+        />
+        <NDatePicker
+          type='datetimerange'
+          size='small'
+          clearable
+          v-model:value={this.startEndTimeRef}
+        />
+        <NButton type='primary' size='small' onClick={this.handleSearch}>
+          <NIcon>
+            <SearchOutlined />
+          </NIcon>
+        </NButton>
+      </NSpace>
     )
   }
 })

dolphinscheduler-ui/src/views/projects/workflow/instance/index.module.scss

@@ -1,80 +0,0 @@
-/*
- * 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.
- */
-
-.content {
-  width: 100%;
-
-  .card {
-    margin-bottom: 8px;
-  }
-
-  .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin: 10px 0;
-    .right {
-      > .search {
-        .list {
-          float: right;
-          margin: 3px 0 3px 4px;
-        }
-      }
-    }
-  }
-}
-
-.table {
-  table {
-    width: 100%;
-    tr {
-      height: 40px;
-      font-size: 12px;
-      th,
-      td {
-        &:nth-child(1) {
-          width: 50px;
-          text-align: center;
-        }
-      }
-      th {
-        &:nth-child(1) {
-          width: 60px;
-          text-align: center;
-        }
-        > span {
-          font-size: 12px;
-          color: #555;
-        }
-      }
-    }
-  }
-}
-
-.pagination {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 20px;
-}
-
-.startup {
-  align-items: center;
-  > div:first-child {
-    width: 86%;
-  }
-}

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

@@ -17,18 +17,18 @@
 
 import { defineComponent, onMounted, onUnmounted, toRefs, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import Card from '@/components/card'
 import {
   NButton,
   NDataTable,
   NPagination,
   NPopconfirm,
-  NTooltip
+  NTooltip,
+  NSpace
 } from 'naive-ui'
 import { useTable } from './use-table'
+import Card from '@/components/card'
 import ProcessInstanceCondition from './components/process-instance-condition'
-import { IWorkflowInstanceSearch } from './types'
-import styles from './index.module.scss'
+import type { IWorkflowInstanceSearch } from './types'
 
 export default defineComponent({
   name: 'WorkflowInstanceList',
@@ -92,37 +92,36 @@ export default defineComponent({
     const { loadingRef } = this
 
     return (
-      <div class={styles.content}>
-        <Card class={styles.card}>
-          <div class={styles.header}>
-            <ProcessInstanceCondition onHandleSearch={this.handleSearch} />
-          </div>
+      <NSpace vertical>
+        <Card>
+          <ProcessInstanceCondition onHandleSearch={this.handleSearch} />
         </Card>
         <Card title={t('project.workflow.workflow_instance')}>
-          <NDataTable
-            loading={loadingRef}
-            rowKey={(row) => row.id}
-            columns={this.columns}
-            data={this.tableData}
-            striped
-            size={'small'}
-            class={styles.table}
-            scrollX={this.tableWidth}
-            v-model:checked-row-keys={this.checkedRowKeys}
-            row-class-name='items-workflow-instances'
-          />
-          <div class={styles.pagination}>
-            <NPagination
-              v-model:page={this.page}
-              v-model:page-size={this.pageSize}
-              page-count={this.totalPage}
-              show-size-picker
-              page-sizes={[10, 30, 50]}
-              show-quick-jumper
-              onUpdatePage={this.requestData}
-              onUpdatePageSize={this.handleChangePageSize}
+          <NSpace vertical>
+            <NDataTable
+              loading={loadingRef}
+              rowKey={(row) => row.id}
+              columns={this.columns}
+              data={this.tableData}
+              striped
+              size={'small'}
+              scrollX={this.tableWidth}
+              v-model:checked-row-keys={this.checkedRowKeys}
+              row-class-name='items-workflow-instances'
             />
-          </div>
+            <NSpace justify='center'>
+              <NPagination
+                v-model:page={this.page}
+                v-model:page-size={this.pageSize}
+                page-count={this.totalPage}
+                show-size-picker
+                page-sizes={[10, 30, 50]}
+                show-quick-jumper
+                onUpdatePage={this.requestData}
+                onUpdatePageSize={this.handleChangePageSize}
+              />
+            </NSpace>
+          </NSpace>
           <NTooltip>
             {{
               default: () => t('project.workflow.delete'),
@@ -145,7 +144,7 @@ export default defineComponent({
             }}
           </NTooltip>
         </Card>
-      </div>
+      </NSpace>
     )
   }
 })