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
diff --git a/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx b/config-ui/src/pages/blueprint/detail/blueprint-detail.tsx
index 6f0edd1..e58cefb 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 @@
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 @@
<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 e73c0ff..a60f405 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 @@
handleCancel();
};
+ const handleToggleEnabled = (checked: boolean) => onUpdate({ enable: checked });
+
const handleUpdateConnection = (updated: any) =>
onUpdate({
settings: {
@@ -201,12 +203,20 @@
<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 f7401e1..b3d10dc 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 @@
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 @@
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 15a4e9f..dda5c7a 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 @@
}
};
- const handleDelete = async () => {
- const [success] = await operator(() => API.deleteBluprint(id), {
- setOperating,
- });
-
- if (success) {
- getBlueprint();
- }
- };
-
return useMemo(
() => ({
loading,
@@ -103,7 +93,6 @@
pipelineId,
onRun: handleRun,
onUpdate: handleUpdate,
- onDelete: handleDelete,
onRefresh: getBlueprint,
}),
[loading, operating, blueprint, pipelineId],