fix(config-ui): adjust the table component

apache · Nov 14, 2023 · f6045b8 · f6045b8
1 parent cb4b897
commit f6045b8
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 36 deletions.
diff --git a/config-ui/src/pages/blueprint/connection-detail/index.tsx b/config-ui/src/pages/blueprint/connection-detail/index.tsx
@@ -216,6 +216,8 @@ export const BlueprintConnectionDetailPage = () => {
         )}
       </Buttons>
       <Table
+        rowKey="id"
+        size="middle"
         columns={[
           {
             title: 'Data Scope',
@@ -224,9 +226,8 @@ export const BlueprintConnectionDetailPage = () => {
           },
           {
             title: 'Scope Config',
-            dataIndex: ['scopeConfigId', 'scopeConfigName'],
             key: 'scopeConfig',
-            render: ({ scopeConfigId, scopeConfigName }) => (scopeConfigId ? scopeConfigName : 'N/A'),
+            render: (_, { scopeConfigId, scopeConfigName }) => (scopeConfigId ? scopeConfigName : 'N/A'),
           },
         ]}
         dataSource={scopes}

diff --git a/config-ui/src/pages/blueprint/detail/configuration-panel.tsx b/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
@@ -135,6 +135,8 @@ export const ConfigurationPanel = ({ from, blueprint, onRefresh, onChangeTab }:
           <IconButton icon="annotation" tooltip="Edit" onClick={handleShowPolicyDialog} />
         </h3>
         <Table
+          rowKey="id"
+          size="middle"
           columns={[
             {
               title: 'Data Time Range',
@@ -162,12 +164,14 @@ export const ConfigurationPanel = ({ from, blueprint, onRefresh, onChangeTab }:
           ]}
           dataSource={[
             {
+              id: blueprint.id,
               timeRange: blueprint.timeAfter,
               frequency: blueprint.cronConfig,
               isManual: blueprint.isManual,
               skipFailed: blueprint.skipOnFail,
             },
           ]}
+          pagination={false}
         />
       </div>
       {blueprint.mode === IBPMode.NORMAL && (

diff --git a/config-ui/src/pages/blueprint/home/index.tsx b/config-ui/src/pages/blueprint/home/index.tsx
@@ -112,35 +112,31 @@ export const BlueprintHomePage = () => {
           <Button icon="plus" intent={Intent.PRIMARY} text="New Blueprint" onClick={handleShowDialog} />
         </div>
         <Table
+          rowKey="id"
+          size="middle"
           loading={!ready}
           columns={[
             {
               title: 'Blueprint Name',
-              dataIndex: ['id', 'name'],
               key: 'name',
-              render: ({ id, name }) => (
+              render: (_, { id, name }) => (
                 <Link to={`/blueprints/${id}?tab=configuration`} style={{ color: '#292b3f' }}>
                   <TextTooltip content={name}>{name}</TextTooltip>
                 </Link>
               ),
             },
             {
               title: 'Data Connections',
-              dataIndex: ['mode', 'connections'],
               key: 'connections',
-              render: ({ mode, connections }: Pick<IBlueprint, 'mode' | 'connections'>) => {
+              render: (_, { mode, connections }: Pick<IBlueprint, 'mode' | 'connections'>) => {
                 if (mode === IBPMode.ADVANCED) {
                   return 'Advanced Mode';
                 }
                 return (
                   <S.ConnectionList>
                     {connections.map((it) => (
-                      <li>
-                        <ConnectionName
-                          key={`${it.pluginName}-${it.connectionId}`}
-                          plugin={it.pluginName}
-                          connectionId={it.connectionId}
-                        />
+                      <li key={`${it.pluginName}-${it.connectionId}`}>
+                        <ConnectionName plugin={it.pluginName} connectionId={it.connectionId} />
                       </li>
                     ))}
                   </S.ConnectionList>
@@ -149,20 +145,18 @@ export const BlueprintHomePage = () => {
             },
             {
               title: 'Frequency',
-              dataIndex: ['isManual', 'cronConfig'],
               key: 'frequency',
               width: 100,
-              render: ({ isManual, cronConfig }) => {
+              render: (_, { isManual, cronConfig }) => {
                 const cron = getCron(isManual, cronConfig);
                 return cron.label;
               },
             },
             {
               title: 'Next Run Time',
-              dataIndex: ['isManual', 'cronConfig'],
               key: 'nextRunTime',
               width: 200,
-              render: ({ isManual, cronConfig }) => {
+              render: (_, { isManual, cronConfig }) => {
                 const cron = getCron(isManual, cronConfig);
                 return formatTime(cron.nextTime);
               },

diff --git a/config-ui/src/pages/connection/detail/index.tsx b/config-ui/src/pages/connection/detail/index.tsx
@@ -266,7 +266,8 @@ export const ConnectionDetailPage = () => {
           )}
         </Buttons>
         <Table
-          rowKey={(row) => row.id}
+          rowKey="id"
+          size="middle"
           loading={!ready}
           columns={[
             {
@@ -296,10 +297,9 @@ export const ConnectionDetailPage = () => {
             },
             {
               title: 'Scope Config',
-              dataIndex: ['id', 'configId', 'configName'],
               key: 'scopeConfig',
               width: 400,
-              render: ({ id, configId, configName }) => (
+              render: (_, { id, configId, configName }) => (
                 <>
                   <span>{configId ? configName : 'N/A'}</span>
                   {pluginConfig.scopeConfig && (

diff --git a/config-ui/src/pages/project/home/index.tsx b/config-ui/src/pages/project/home/index.tsx
@@ -123,6 +123,8 @@ export const ProjectHomePage = () => {
       extra={<Button intent={Intent.PRIMARY} icon="plus" text="New Project" onClick={handleShowDialog} />}
     >
       <Table
+        rowKey="name"
+        size="middle"
         loading={!ready}
         columns={[
           {
@@ -145,22 +147,17 @@ export const ProjectHomePage = () => {
               ) : (
                 <S.ConnectionList>
                   {val.map((it) => (
-                    <li>
-                      <ConnectionName
-                        key={`${it.pluginName}-${it.connectionId}`}
-                        plugin={it.pluginName}
-                        connectionId={it.connectionId}
-                      />
+                    <li key={`${it.pluginName}-${it.connectionId}`}>
+                      <ConnectionName plugin={it.pluginName} connectionId={it.connectionId} />
                     </li>
                   ))}
                 </S.ConnectionList>
               ),
           },
           {
             title: 'Sync Frequency',
-            dataIndex: ['isManual', 'cronConfig'],
             key: 'frequency',
-            render: ({ isManual, cronConfig }) => {
+            render: (_, { isManual, cronConfig }) => {
               const cron = getCron(isManual, cronConfig);
               return cron.label;
             },

diff --git a/config-ui/src/plugins/components/connection-list/index.tsx b/config-ui/src/plugins/components/connection-list/index.tsx
@@ -41,6 +41,8 @@ export const ConnectionList = ({ plugin, onCreate }: Props) => {
   return (
     <>
       <Table
+        rowKey="id"
+        size="small"
         columns={[
           {
             title: 'Connection Name',
@@ -55,13 +57,13 @@ export const ConnectionList = ({ plugin, onCreate }: Props) => {
           },
           {
             title: '',
-            dataIndex: ['plugin', 'id'],
             key: 'link',
             width: 100,
-            render: ({ plugin, id }) => <Link to={`/connections/${plugin}/${id}`}>Details</Link>,
+            render: (_, { plugin, id }) => <Link to={`/connections/${plugin}/${id}`}>Details</Link>,
           },
         ]}
         dataSource={connections}
+        pagination={false}
       />
       <Button
         style={{ marginTop: 16 }}

diff --git a/config-ui/src/plugins/components/scope-config-select/index.tsx b/config-ui/src/plugins/components/scope-config-select/index.tsx
@@ -76,6 +76,8 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance
         <Button icon="add" intent={Intent.PRIMARY} text="Add New Scope Config" onClick={handleShowDialog} />
       </Buttons>
       <Table
+        rowKey="id"
+        size="small"
         loading={!ready}
         columns={[
           { title: 'Name', dataIndex: 'name', key: 'name' },
@@ -93,6 +95,7 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance
           selectedRowKeys: trId ? [trId] : [],
           onChange: (selectedRowKeys) => setTrId(selectedRowKeys[0]),
         }}
+        pagination={false}
       />
       <Buttons position="bottom" align="right">
         <Button outlined intent={Intent.PRIMARY} text="Cancel" onClick={onCancel} />

diff --git a/config-ui/src/plugins/register/webhook/connection.tsx b/config-ui/src/plugins/register/webhook/connection.tsx
@@ -55,10 +55,9 @@ export const WebHookConnection = ({ filterIds, onCreateAfter, onDeleteAfter }: P
 
   return (
     <S.Wrapper>
-      <Buttons position="top">
-        <Button icon="plus" text="Add a Webhook" intent={Intent.PRIMARY} onClick={() => handleShowDialog('add')} />
-      </Buttons>
       <Table
+        rowKey="id"
+        size="middle"
         columns={[
           {
             title: 'ID',
@@ -86,7 +85,11 @@ export const WebHookConnection = ({ filterIds, onCreateAfter, onDeleteAfter }: P
           },
         ]}
         dataSource={webhooks.filter((cs) => (filterIds ? filterIds.includes(cs.id) : true))}
+        pagination={false}
       />
+      <Buttons position="bottom">
+        <Button icon="plus" text="Add a Webhook" intent={Intent.PRIMARY} onClick={() => handleShowDialog('add')} />
+      </Buttons>
       {type === 'add' && (
         <CreateDialog isOpen onCancel={handleHideDialog} onSubmitAfter={(id) => onCreateAfter?.(id)} />
       )}

diff --git a/config-ui/src/routes/api-keys/api-keys.tsx b/config-ui/src/routes/api-keys/api-keys.tsx
@@ -97,6 +97,8 @@ export const ApiKeys = () => {
     >
       <p>You can generate and manage your API keys to access the DevLake API.</p>
       <Table
+        rowKey="id"
+        size="middle"
         loading={!ready}
         columns={[
           {

diff --git a/config-ui/src/routes/layout/styled.ts b/config-ui/src/routes/layout/styled.ts
@@ -22,7 +22,6 @@ import { Navbar } from '@blueprintjs/core';
 export const Wrapper = styled.div`
   display: flex;
   height: 100vh;
-  background-color: #f9f9fa;
   overflow: hidden;
 `;
 
@@ -89,7 +88,6 @@ export const Sider = styled.div`
 
 export const Header = styled(Navbar)`
   flex: 0 0 50px;
-  background-color: #f9f9fa;
   box-shadow: none;
 
   a {

diff --git a/config-ui/src/routes/pipeline/components/table.tsx b/config-ui/src/routes/pipeline/components/table.tsx
@@ -70,6 +70,8 @@ export const PipelineTable = ({ dataSource, pagination, noData }: Props) => {
   return (
     <>
       <Table
+        rowKey="id"
+        size="middle"
         columns={[
           {
             title: 'ID',
@@ -98,9 +100,8 @@ export const PipelineTable = ({ dataSource, pagination, noData }: Props) => {
           },
           {
             title: 'Duration',
-            dataIndex: ['status', 'beganAt', 'finishedAt'],
             key: 'duration',
-            render: ({ status, beganAt, finishedAt }) => (
+            render: (_, { status, beganAt, finishedAt }) => (
               <PipelineDuration status={status} beganAt={beganAt} finishedAt={finishedAt} />
             ),
           },