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 e3055cb8b fix(config-ui): some bugs (#4043)
e3055cb8b is described below
commit e3055cb8be1d9984afeab23e60cbc0e1e9ddfacf
Author: 青湛 <[email protected]>
AuthorDate: Wed Dec 28 10:23:46 2022 +0800
fix(config-ui): some bugs (#4043)
* fix(config-ui): when the value equal null formatTime error
* fix(config-ui): the table component header align invalid
* fix(config-ui): the task not align top
* fix(config-ui): unnecessary extra request
---
config-ui/src/components/table/table.tsx | 6 ++++--
config-ui/src/pages/blueprint/detail/panel/status.tsx | 2 +-
config-ui/src/pages/blueprint/detail/use-detail.ts | 2 +-
config-ui/src/pages/pipeline/detail/styled.ts | 2 +-
config-ui/src/pages/pipeline/detail/use-detail.ts | 6 +++++-
config-ui/src/utils/time.ts | 4 ++--
6 files changed, 14 insertions(+), 8 deletions(-)
diff --git a/config-ui/src/components/table/table.tsx
b/config-ui/src/components/table/table.tsx
index 017a9f1d5..782eba031 100644
--- a/config-ui/src/components/table/table.tsx
+++ b/config-ui/src/components/table/table.tsx
@@ -39,8 +39,10 @@ export const Table = <T extends Record<string, any>>({
<S.Container>
<S.TableWrapper loading={loading ? 1 : 0}>
<S.TableHeader>
- {columns.map(({ key, title }) => (
- <span key={key}>{title}</span>
+ {columns.map(({ key, align = 'left', title }) => (
+ <span key={key} style={{ textAlign: align }}>
+ {title}
+ </span>
))}
</S.TableHeader>
{dataSource.map((data, i) => (
diff --git a/config-ui/src/pages/blueprint/detail/panel/status.tsx
b/config-ui/src/pages/blueprint/detail/panel/status.tsx
index 16e18d55a..c1c74c50e 100644
--- a/config-ui/src/pages/blueprint/detail/panel/status.tsx
+++ b/config-ui/src/pages/blueprint/detail/panel/status.tsx
@@ -32,7 +32,7 @@ import * as S from '../styled'
interface Props {
blueprint: BlueprintType
pipelines: PipelineType[]
- pipelineId: ID
+ pipelineId?: ID
operating: boolean
onRun: () => void
onUpdate: (payload: any) => void
diff --git a/config-ui/src/pages/blueprint/detail/use-detail.ts
b/config-ui/src/pages/blueprint/detail/use-detail.ts
index b4d16e84b..47f6153b1 100644
--- a/config-ui/src/pages/blueprint/detail/use-detail.ts
+++ b/config-ui/src/pages/blueprint/detail/use-detail.ts
@@ -33,7 +33,7 @@ export const useDetail = ({ id }: UseDetailProps) => {
const [operating, setOperating] = useState(false)
const [blueprint, setBlueprint] = useState<BlueprintType>()
const [pipelines, setPipelines] = useState<PipelineType[]>([])
- const [pipelineId, setPipelineId] = useState<ID>('')
+ const [pipelineId, setPipelineId] = useState<ID>()
const [, setError] = useState()
const getBlueprint = async () => {
diff --git a/config-ui/src/pages/pipeline/detail/styled.ts
b/config-ui/src/pages/pipeline/detail/styled.ts
index 0572d6fbd..25bafeb7d 100644
--- a/config-ui/src/pages/pipeline/detail/styled.ts
+++ b/config-ui/src/pages/pipeline/detail/styled.ts
@@ -131,7 +131,7 @@ export const Tasks = styled.ul`
margin: 0;
list-style: none;
display: flex;
- align-items: center;
+ align-items: flex-start;
li {
flex: 1;
diff --git a/config-ui/src/pages/pipeline/detail/use-detail.ts
b/config-ui/src/pages/pipeline/detail/use-detail.ts
index f2f77b21d..de590eab8 100644
--- a/config-ui/src/pages/pipeline/detail/use-detail.ts
+++ b/config-ui/src/pages/pipeline/detail/use-detail.ts
@@ -28,7 +28,7 @@ import * as API from './api'
const pollTimer = 5000
export interface UseDetailProps {
- id: ID
+ id?: ID
}
export const useDetail = ({ id }: UseDetailProps) => {
@@ -41,6 +41,7 @@ export const useDetail = ({ id }: UseDetailProps) => {
const timer = useRef<any>()
const getPipeline = async () => {
+ if (!id) return
setLoading(true)
try {
const [pipeRes, taskRes] = await Promise.all([
@@ -78,6 +79,7 @@ export const useDetail = ({ id }: UseDetailProps) => {
}, [pipeline])
const handlePipelineCancel = async () => {
+ if (!id) return
const [success] = await operator(() => API.deletePipeline(id), {
setOperating
})
@@ -89,6 +91,7 @@ export const useDetail = ({ id }: UseDetailProps) => {
}
const handlePipelineRerun = async () => {
+ if (!id) return
const [success] = await operator(() => API.pipeLineRerun(id), {
setOperating
})
@@ -100,6 +103,7 @@ export const useDetail = ({ id }: UseDetailProps) => {
}
const handleTaskRertun = async (id: ID) => {
+ if (!id) return
const [success] = await operator(() => API.taskRerun(id), {
setOperating
})
diff --git a/config-ui/src/utils/time.ts b/config-ui/src/utils/time.ts
index 8cbfdbaec..83857fb94 100644
--- a/config-ui/src/utils/time.ts
+++ b/config-ui/src/utils/time.ts
@@ -46,8 +46,8 @@ dayjs.extend(LocalizedFormat)
dayjs.extend(utc)
dayjs.updateLocale('en', localeConfiguration)
-export const formatTime = (val: string, format = 'YYYY-MM-DD HH:mm') =>
- dayjs(val).format(format)
+export const formatTime = (val: string | null, format = 'YYYY-MM-DD HH:mm') =>
+ val ? dayjs(val).format(format) : '-'
export const duration = (beganAt?: string, finishedAt?: string) => {
if (beganAt && finishedAt) {
