Skip to content

Commit

Permalink
refactor: extract the function in the panel to bp detail
Browse files Browse the repository at this point in the history
  • Loading branch information
@mintsweet
mintsweet committed Sep 29, 2024
1 parent 4942c81 commit 8bf8f8e
Show file tree
Hide file tree
Showing 3 changed files with 152 additions and 176 deletions.
140 changes: 129 additions & 11 deletions config-ui/src/routes/blueprint/detail/blueprint-detail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,39 @@
*
*/

import { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { Tabs } from 'antd';
import { useState, useEffect, useReducer } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { WarningOutlined } from '@ant-design/icons';
import { theme, Tabs, Modal } from 'antd';

import API from '@/api';
import { PageLoading } from '@/components';
import { useRefreshData } from '@/hooks';
import { operator } from '@/utils';

import { FromEnum } from '../types';

import { ConnectionCheck } from './components';
import { ConfigurationPanel } from './configuration-panel';
import { StatusPanel } from './status-panel';
import * as S from './styled';

type ConnectionFailed = {
open: boolean;
failedList?: Array<{ plugin: string; connectionId: ID }>;
};

function reducer(state: ConnectionFailed, action: { type: string; failedList?: ConnectionFailed['failedList'] }) {
switch (action.type) {
case 'open':
return { open: true, failedList: action.failedList };
case 'close':
return { open: false, failedList: [] };
default:
return state;
}
}

interface Props {
id: ID;
from: FromEnum;
Expand All @@ -38,8 +57,18 @@ interface Props {
export const BlueprintDetail = ({ id, from }: Props) => {
const [version, setVersion] = useState(1);
const [activeKey, setActiveKey] = useState('status');
const [operating, setOperating] = useState(false);

const [{ open, failedList }, dispatch] = useReducer(reducer, {
open: false,
});

const { state } = useLocation();
const navigate = useNavigate();

const {
token: { orange5 },
} = theme.useToken();

useEffect(() => {
setActiveKey(state?.activeKey ?? 'status');
Expand All @@ -50,12 +79,71 @@ export const BlueprintDetail = ({ id, from }: Props) => {
return [bpRes, pipelineRes.pipelines[0]];
}, [version]);

const handlRefresh = () => {
setVersion((v) => v + 1);
const handleDelete = async () => {
const [success] = await operator(() => API.blueprint.remove(blueprint.id), {
setOperating,
formatMessage: () => 'Delete blueprint successful.',
});

if (success) {
navigate('/advanced/blueprints');
}
};

const handleChangeActiveKey = (activeKey: string) => {
setActiveKey(activeKey);
const handleUpdate = async (payload: any) => {
const [success] = await operator(
() =>
API.blueprint.update(blueprint.id, {
...blueprint,
...payload,
}),
{
setOperating,
formatMessage: () =>
from === FromEnum.project ? 'Update project successful.' : 'Update blueprint successful.',
},
);

if (success) {
setVersion((v) => v + 1);
}
};

const handleTrigger = async (payload?: { skipCollectors?: boolean; fullSync?: boolean }) => {
const { skipCollectors, fullSync } = payload ?? { skipCollectors: false, fullSync: false };

if (!skipCollectors) {
const [success, res] = await operator(() => API.blueprint.connectionsTokenCheck(blueprint.id), {
hideToast: true,
setOperating,
});

if (success && res.length) {
const connectionFailed = res
.filter((it: any) => !it.success)
.map((it: any) => {
return {
plugin: it.pluginName,
connectionId: it.connectionId,
};
});

if (connectionFailed.length) {
dispatch({ type: 'open', failedList: connectionFailed });
return;
}
}
}

const [success] = await operator(() => API.blueprint.trigger(blueprint.id, { skipCollectors, fullSync }), {
setOperating,
formatMessage: () => 'Trigger blueprint successful.',
});

if (success) {
setVersion((v) => v + 1);
setActiveKey('status');
}
};

if (!ready || !data) {
Expand All @@ -72,7 +160,15 @@ export const BlueprintDetail = ({ id, from }: Props) => {
key: 'status',
label: 'Status',
children: (
<StatusPanel from={from} blueprint={blueprint} pipelineId={lastPipeline?.id} onRefresh={handlRefresh} />
<StatusPanel
from={from}
blueprint={blueprint}
pipelineId={lastPipeline?.id}
operating={operating}
onDelete={handleDelete}
onUpdate={handleUpdate}
onTrigger={handleTrigger}
/>
),
},
{
Expand All @@ -82,15 +178,37 @@ export const BlueprintDetail = ({ id, from }: Props) => {
<ConfigurationPanel
from={from}
blueprint={blueprint}
onRefresh={handlRefresh}
onChangeTab={handleChangeActiveKey}
operating={operating}
onUpdate={handleUpdate}
onTrigger={handleTrigger}
/>
),
},
]}
activeKey={activeKey}
onChange={handleChangeActiveKey}
onChange={setActiveKey}
/>
<Modal
open={open}
title={
<>
<WarningOutlined style={{ marginRight: 8, fontSize: 20, color: orange5 }} />
<span>Invalid Token(s) Detected</span>
</>
}
width={820}
footer={null}
onCancel={() => dispatch({ type: 'close' })}
>
<p>There are invalid tokens in the following connections. Please update them before re-syncing the data.</p>
<ul>
{(failedList ?? []).map(({ plugin, connectionId }) => (
<li key={`${plugin}-${connectionId}`}>
<ConnectionCheck plugin={plugin} connectionId={connectionId} />
</li>
))}
</ul>
</Modal>
</S.Wrapper>
);
};
54 changes: 9 additions & 45 deletions config-ui/src/routes/blueprint/detail/configuration-panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,11 @@ import { Link } from 'react-router-dom';
import { FormOutlined, PlusOutlined } from '@ant-design/icons';
import { Flex, Table, Button } from 'antd';

import API from '@/api';
import { NoData } from '@/components';
import { getCron } from '@/config';
import { getPluginConfig, ConnectionName } from '@/plugins';
import { IBlueprint, IBPMode } from '@/types';
import { formatTime, operator } from '@/utils';
import { formatTime } from '@/utils';

import { FromEnum } from '../types';
import { validRawPlan } from '../utils';
Expand All @@ -37,14 +36,14 @@ import * as S from './styled';
interface Props {
from: FromEnum;
blueprint: IBlueprint;
onRefresh: () => void;
onChangeTab: (tab: string) => void;
operating: boolean;
onUpdate: (payload: any) => void;
onTrigger: (payload?: { skipCollectors?: boolean; fullSync?: boolean }) => void;
}

export const ConfigurationPanel = ({ from, blueprint, onRefresh, onChangeTab }: Props) => {
export const ConfigurationPanel = ({ from, blueprint, operating, onUpdate, onTrigger }: Props) => {
const [type, setType] = useState<'policy' | 'add-connection'>();
const [rawPlan, setRawPlan] = useState('');
const [operating, setOperating] = useState(false);

useEffect(() => {
setRawPlan(JSON.stringify(blueprint.plan, null, ' '));
Expand Down Expand Up @@ -79,41 +78,6 @@ export const ConfigurationPanel = ({ from, blueprint, onRefresh, onChangeTab }:
setType('add-connection');
};

const handleUpdate = async (payload: any) => {
const [success] = await operator(
() =>
API.blueprint.update(blueprint.id, {
...blueprint,
...payload,
}),
{
setOperating,
formatMessage: () =>
from === FromEnum.project ? 'Update project successful.' : 'Update blueprint successful.',
},
);

if (success) {
onRefresh();
handleCancel();
}
};

const handleRun = async () => {
const [success] = await operator(
() => API.blueprint.trigger(blueprint.id, { skipCollectors: false, fullSync: false }),
{
setOperating,
formatMessage: () => 'Trigger blueprint successful.',
},
);

if (success) {
onRefresh();
onChangeTab('status');
}
};

return (
<S.ConfigurationPanel>
<div className="block">
Expand Down Expand Up @@ -212,7 +176,7 @@ export const ConfigurationPanel = ({ from, blueprint, onRefresh, onChangeTab }:
))}
</S.ConnectionList>
<Flex justify="center">
<Button type="primary" disabled={!blueprint.enable} onClick={handleRun}>
<Button type="primary" disabled={!blueprint.enable} onClick={() => onTrigger()}>
Collect Data
</Button>
</Flex>
Expand All @@ -228,7 +192,7 @@ export const ConfigurationPanel = ({ from, blueprint, onRefresh, onChangeTab }:
<Button
type="primary"
onClick={() =>
handleUpdate({
onUpdate({
plan: !validRawPlan(rawPlan) ? JSON.parse(rawPlan) : JSON.stringify([[]], null, ' '),
})
}
Expand All @@ -247,15 +211,15 @@ export const ConfigurationPanel = ({ from, blueprint, onRefresh, onChangeTab }:
timeAfter={blueprint.timeAfter}
operating={operating}
onCancel={handleCancel}
onSubmit={(payload) => handleUpdate(payload)}
onSubmit={onUpdate}
/>
)}
{type === 'add-connection' && (
<AddConnectionDialog
disabled={connections.map((cs) => `${cs.plugin}-${cs.connectionId}`)}
onCancel={handleCancel}
onSubmit={(connection) =>
handleUpdate({
onUpdate({
connections: [...blueprint.connections, connection],
})
}
Expand Down
Loading

0 comments on commit 8bf8f8e

Please sign in to comment.