You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by li...@apache.org on 2023/01/09 05:24:48 UTC
[incubator-devlake] branch main updated: refactor(config-ui): adjust the blueprint status and configuration panel (#4146)
This is an automated email from the ASF dual-hosted git repository.
likyh pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
The following commit(s) were added to refs/heads/main by this push:
new 08406d181 refactor(config-ui): adjust the blueprint status and configuration panel (#4146)
08406d181 is described below
commit 08406d181ef519d9ff5cc83f2b63c332e4145e9d
Author: 青湛 <0x...@gmail.com>
AuthorDate: Mon Jan 9 13:24:43 2023 +0800
refactor(config-ui): adjust the blueprint status and configuration panel (#4146)
* refactor(config-ui): adjust the blueprint status and configuration panel
* feat(config-ui): change the status daily to the next run date
* fix(config-ui): adjust the style for configuration
---
.../pages/blueprint/detail/blueprint-detail.tsx | 13 ++-------
.../pages/blueprint/detail/panel/configuration.tsx | 16 +++++++++--
.../src/pages/blueprint/detail/panel/status.tsx | 33 +++-------------------
config-ui/src/pages/blueprint/detail/use-detail.ts | 11 --------
4 files changed, 19 insertions(+), 54 deletions(-)
diff --git a/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx b/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx
index 6f0edd139..e58cefba8 100644
--- a/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx
+++ b/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx
@@ -34,7 +34,7 @@ interface Props extends UseDetailProps {}
export const BlueprintDetail = ({ id }: Props) => {
const [activeTab, setActiveTab] = useState<TabId>('status');
- const { loading, blueprint, pipelineId, operating, onRun, onUpdate, onDelete, onRefresh } = useDetail({
+ const { loading, blueprint, pipelineId, operating, onRun, onUpdate, onRefresh } = useDetail({
id,
});
@@ -53,16 +53,7 @@ export const BlueprintDetail = ({ id }: Props) => {
<Tab
id="status"
title="Status"
- panel={
- <Status
- blueprint={blueprint}
- pipelineId={pipelineId}
- operating={operating}
- onRun={onRun}
- onUpdate={onUpdate}
- onDelete={onDelete}
- />
- }
+ panel={<Status blueprint={blueprint} pipelineId={pipelineId} operating={operating} onRun={onRun} />}
/>
<Tab
id="configuration"
diff --git a/config-ui/src/pages/blueprint/detail/panel/configuration.tsx b/config-ui/src/pages/blueprint/detail/panel/configuration.tsx
index e73c0ffca..a60f405c8 100644
--- a/config-ui/src/pages/blueprint/detail/panel/configuration.tsx
+++ b/config-ui/src/pages/blueprint/detail/panel/configuration.tsx
@@ -17,7 +17,7 @@
*/
import React, { useState, useEffect, useMemo } from 'react';
-import { Icon, Button, Colors, Intent } from '@blueprintjs/core';
+import { Icon, Button, Switch, Colors, Intent } from '@blueprintjs/core';
import dayjs from 'dayjs';
import { Table, ColumnType } from '@/components';
@@ -88,6 +88,8 @@ export const Configuration = ({ blueprint, operating, onUpdate, onRefresh }: Pro
handleCancel();
};
+ const handleToggleEnabled = (checked: boolean) => onUpdate({ enable: checked });
+
const handleUpdateConnection = (updated: any) =>
onUpdate({
settings: {
@@ -201,12 +203,20 @@ export const Configuration = ({ blueprint, operating, onUpdate, onRefresh }: Pro
<h3>Sync Policy</h3>
<div className="detail">
<span>
- {cron.label}
- {cron.value !== 'manual' ? dayjs(cron.nextTime).format('HH:mm A') : null}
+ {cron.label} {cron.value !== 'manual' ? dayjs(cron.nextTime).format('HH:mm A') : null}
</span>
<Icon icon="annotation" color={Colors.BLUE2} onClick={() => setType('frequency')} />
</div>
</div>
+ <div className="block">
+ <h3>Enabled</h3>
+ <div className="detail">
+ <Switch
+ checked={blueprint.enable}
+ onChange={(e) => handleToggleEnabled((e.target as HTMLInputElement).checked)}
+ />
+ </div>
+ </div>
</div>
{blueprint.mode === ModeEnum.normal && (
<div className="bottom">
diff --git a/config-ui/src/pages/blueprint/detail/panel/status.tsx b/config-ui/src/pages/blueprint/detail/panel/status.tsx
index f7401e1cc..b3d10dc28 100644
--- a/config-ui/src/pages/blueprint/detail/panel/status.tsx
+++ b/config-ui/src/pages/blueprint/detail/panel/status.tsx
@@ -17,11 +17,11 @@
*/
import React, { useMemo } from 'react';
-import { Button, Switch, Intent } from '@blueprintjs/core';
-import dayjs from 'dayjs';
+import { Button, Intent } from '@blueprintjs/core';
import { getCron } from '@/config';
import { PipelineInfo, PipelineHistorical } from '@/pages';
+import { formatTime } from '@/utils';
import type { BlueprintType } from '../../types';
@@ -32,25 +32,17 @@ interface Props {
pipelineId?: ID;
operating: boolean;
onRun: () => void;
- onUpdate: (payload: any) => void;
- onDelete: () => void;
}
-export const Status = ({ blueprint, pipelineId, operating, onRun, onUpdate, onDelete }: Props) => {
+export const Status = ({ blueprint, pipelineId, operating, onRun }: Props) => {
const cron = useMemo(() => getCron(blueprint.isManual, blueprint.cronConfig), [blueprint]);
const handleRunNow = () => onRun();
- const handleToggleEnabled = (checked: boolean) => onUpdate({ enable: checked });
-
- const handleDelete = () => onDelete();
-
return (
<S.StatusPanel>
<div className="info">
- <span>
- {cron.label} {cron.value !== 'manual' ? dayjs(cron.nextTime).format('HH:mm A') : null}
- </span>
+ <span>{cron.value === 'manual' ? 'Manual' : `Next Run: ${formatTime(cron.nextTime, 'YYYY-MM-DD HH:mm')}`}</span>
<span>
<Button
disabled={!blueprint.enable}
@@ -61,23 +53,6 @@ export const Status = ({ blueprint, pipelineId, operating, onRun, onUpdate, onDe
onClick={handleRunNow}
/>
</span>
- <span>
- <Switch
- label="Blueprint Enabled"
- checked={blueprint.enable}
- onChange={(e) => handleToggleEnabled((e.target as HTMLInputElement).checked)}
- />
- </span>
- <span>
- <Button
- disabled={blueprint.enable}
- loading={operating}
- small
- intent={Intent.DANGER}
- icon="trash"
- onClick={handleDelete}
- />
- </span>
</div>
<div className="block">
<h3>Current Pipeline</h3>
diff --git a/config-ui/src/pages/blueprint/detail/use-detail.ts b/config-ui/src/pages/blueprint/detail/use-detail.ts
index 15a4e9f04..dda5c7aca 100644
--- a/config-ui/src/pages/blueprint/detail/use-detail.ts
+++ b/config-ui/src/pages/blueprint/detail/use-detail.ts
@@ -85,16 +85,6 @@ export const useDetail = ({ id }: UseDetailProps) => {
}
};
- const handleDelete = async () => {
- const [success] = await operator(() => API.deleteBluprint(id), {
- setOperating,
- });
-
- if (success) {
- getBlueprint();
- }
- };
-
return useMemo(
() => ({
loading,
@@ -103,7 +93,6 @@ export const useDetail = ({ id }: UseDetailProps) => {
pipelineId,
onRun: handleRun,
onUpdate: handleUpdate,
- onDelete: handleDelete,
onRefresh: getBlueprint,
}),
[loading, operating, blueprint, pipelineId],