This is an automated email from the ASF dual-hosted git repository.
klesh 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 f27c31f39 fix(config-ui): some bugs (#6702)
f27c31f39 is described below
commit f27c31f3954bb4d5df8c6a4e829acfdedf36174a
Author: 青湛 <[email protected]>
AuthorDate: Thu Dec 28 19:56:16 2023 +1300
fix(config-ui): some bugs (#6702)
* fix(config-ui): adjust the style and disable logic for bp
* fix(config-ui): adjust the style and placeholder for connection form
* fix(config-ui): bitbucket transformation status map error
* fix(config-ui): menu selected error
* fix(config-ui): adjust the style for bp detail
* fix(config-ui): replace success color
* fix(config-ui): adjust the style for pipeline status
* fix(config-ui): adjust the style for pipeline table
* fix(config-ui): adjust the style for project detail
---
.../pages/blueprint/detail/configuration-panel.tsx | 14 +--
.../src/pages/blueprint/detail/status-panel.tsx | 130 +++++++++++----------
config-ui/src/pages/blueprint/detail/styled.ts | 26 -----
.../src/pages/project/detail/settings-panel.tsx | 42 +++----
.../components/connection-form/fields/endpoint.tsx | 37 +++---
.../components/connection-form/fields/name.tsx | 2 +-
.../components/connection-form/fields/password.tsx | 2 +-
.../components/connection-form/fields/proxy.tsx | 7 +-
.../components/connection-form/fields/token.tsx | 7 +-
.../components/connection-form/fields/username.tsx | 7 +-
.../plugins/register/bitbucket/transformation.tsx | 24 ++--
.../register/github/connection-fields/styled.ts | 2 +-
config-ui/src/plugins/register/jira/config.tsx | 3 +-
.../register/jira/connection-fields/auth.tsx | 23 +++-
.../register/opsgenie/connection-fields/styled.ts | 2 +-
config-ui/src/plugins/register/webhook/styled.ts | 2 +-
.../register/zentao/connection-fields/db-url.tsx | 1 +
.../src/routes/error/components/offline/index.tsx | 4 +-
config-ui/src/routes/layout/layout.tsx | 11 +-
.../src/routes/pipeline/components/status.tsx | 7 +-
config-ui/src/routes/pipeline/components/table.tsx | 3 +
config-ui/src/routes/pipeline/styled.ts | 2 +-
22 files changed, 194 insertions(+), 164 deletions(-)
diff --git a/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
b/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
index a8360de1f..363b8ae35 100644
--- a/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
+++ b/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
@@ -124,17 +124,13 @@ export const ConfigurationPanel = ({ from, blueprint,
onRefresh, onChangeTab }:
<S.ConfigurationPanel>
<div className="block">
<h3>Blueprint Name</h3>
- <Space>
- <span>{blueprint.name}</span>
- <Button type="primary" icon={<FormOutlined />}
onClick={handleShowNameDialog} />
- </Space>
+ <span>{blueprint.name}</span>
+ <Button type="link" icon={<FormOutlined />}
onClick={handleShowNameDialog} />
</div>
<div className="block">
<h3>
- <Space>
- <span>Sync Policy</span>
- <Button type="primary" icon={<FormOutlined />}
onClick={handleShowPolicyDialog} />
- </Space>
+ <span>Sync Policy</span>
+ <Button type="link" icon={<FormOutlined />}
onClick={handleShowPolicyDialog} />
</h3>
<Table
rowKey="id"
@@ -225,7 +221,7 @@ export const ConfigurationPanel = ({ from, blueprint,
onRefresh, onChangeTab }:
))}
</S.ConnectionList>
<Flex justify="center">
- <Button type="primary" onClick={handleRun}>
+ <Button type="primary" disabled={!blueprint.enable}
onClick={handleRun}>
Collect Data
</Button>
</Flex>
diff --git a/config-ui/src/pages/blueprint/detail/status-panel.tsx
b/config-ui/src/pages/blueprint/detail/status-panel.tsx
index d59ca1dd7..a4feee6df 100644
--- a/config-ui/src/pages/blueprint/detail/status-panel.tsx
+++ b/config-ui/src/pages/blueprint/detail/status-panel.tsx
@@ -19,7 +19,7 @@
import { useState, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { MoreOutlined, DeleteOutlined } from '@ant-design/icons';
-import { Card, Modal, Switch, Button, Tooltip, Dropdown } from 'antd';
+import { Card, Modal, Switch, Button, Tooltip, Dropdown, Flex, Space } from
'antd';
import API from '@/api';
import { Message } from '@/components';
@@ -31,8 +31,6 @@ import { formatTime, operator } from '@/utils';
import { FromEnum } from '../types';
-import * as S from './styled';
-
interface Props {
from: FromEnum;
blueprint: IBlueprint;
@@ -121,73 +119,80 @@ export const StatusPanel = ({ from, blueprint,
pipelineId, onRefresh }: Props) =
};
return (
- <S.StatusPanel>
+ <Flex vertical>
{from === FromEnum.project && (
- <S.ProjectACtion>
- <span>
- {cron.label === 'Manual' ? 'Manual' : `Next Run:
${formatTime(cron.nextTime, 'YYYY-MM-DD HH:mm')}`}
- </span>
- <Tooltip
- placement="top"
- title="It is recommended to re-transform your data in this project
if you have updated the transformation of the data scope in this project."
- >
- <Button
- type="primary"
- disabled={!blueprint.enable}
- loading={operating}
- onClick={() => handleRun({ skipCollectors: true })}
+ <Flex justify="flex-end" align="center">
+ <Space>
+ <span>
+ {cron.label === 'Manual' ? 'Manual' : `Next Run:
${formatTime(cron.nextTime, 'YYYY-MM-DD HH:mm')}`}
+ </span>
+ <Tooltip
+ placement="top"
+ title="It is recommended to re-transform your data in this
project if you have updated the transformation of the data scope in this
project."
>
- Re-transform Data
+ <Button
+ type="primary"
+ disabled={!blueprint.enable}
+ loading={operating}
+ onClick={() => handleRun({ skipCollectors: true })}
+ >
+ Re-transform Data
+ </Button>
+ </Tooltip>
+ <Button type="primary" disabled={!blueprint.enable}
loading={operating} onClick={() => handleRun({})}>
+ Collect Data
</Button>
- </Tooltip>
- <Button type="primary" disabled={!blueprint.enable}
loading={operating} onClick={() => handleRun({})}>
- Collect Data
- </Button>
- <Dropdown
- menu={{
- items: [
- {
- key: '1',
- label: 'Collect Data in Full Refresh Mode',
+ <Dropdown
+ menu={{
+ items: [
+ {
+ key: '1',
+ label: 'Collect Data in Full Refresh Mode',
+ disabled: !blueprint.enable,
+ },
+ ],
+ onClick: ({ key }) => {
+ if (key === '1') {
+ setType('fullSync');
+ }
},
- ],
- onClick: ({ key }) => {
- if (key === '1') {
- setType('fullSync');
- }
- },
- }}
- >
- <Button icon={<MoreOutlined />} />
- </Dropdown>
- </S.ProjectACtion>
+ }}
+ >
+ <Button icon={<MoreOutlined />} />
+ </Dropdown>
+ </Space>
+ </Flex>
)}
{from === FromEnum.blueprint && (
- <S.BlueprintAction>
- <Button onClick={() => handleRun({})}>Run Now</Button>
- <Switch
- style={{ marginBottom: 0 }}
- disabled={!!blueprint.projectName}
- checked={blueprint.enable}
- onChange={(enable) => handleUpdate({ enable })}
- />
- Blueprint Enabled
- <Tooltip title="Delete Blueprint">
- <Button
- type="primary"
- loading={operating}
+ <Flex justify="center" align="center">
+ <Space>
+ <Button type="primary" disabled={!blueprint.enable} onClick={() =>
handleRun({})}>
+ Run Now
+ </Button>
+ <Switch
+ style={{ marginBottom: 0 }}
disabled={!!blueprint.projectName}
- icon={<DeleteOutlined />}
- onClick={() => setType('delete')}
+ checked={blueprint.enable}
+ onChange={(enable) => handleUpdate({ enable })}
/>
- </Tooltip>
- </S.BlueprintAction>
+ Blueprint Enabled
+ <Tooltip title="Delete Blueprint">
+ <Button
+ type="primary"
+ loading={operating}
+ disabled={!!blueprint.projectName}
+ icon={<DeleteOutlined />}
+ onClick={() => setType('delete')}
+ />
+ </Tooltip>
+ </Space>
+ </Flex>
)}
- {/* <PipelineContextProvider> */}
- <div className="block">
+ <Space direction="vertical" size="large">
<h3>Current Pipeline</h3>
+
{!pipelineId ? (
<Card>There is no current run for this blueprint.</Card>
) : (
@@ -200,16 +205,15 @@ export const StatusPanel = ({ from, blueprint,
pipelineId, onRefresh }: Props) =
</Card>
</>
)}
- </div>
- <div className="block">
+
<h3>Historical Pipelines</h3>
+
{!data?.length ? (
<Card>There are no historical runs associated with this
blueprint.</Card>
) : (
<PipelineTable loading={loading} dataSource={data} />
)}
- </div>
- {/* </PipelineContextProvider> */}
+ </Space>
{type === 'delete' && (
<Modal
@@ -246,6 +250,6 @@ export const StatusPanel = ({ from, blueprint, pipelineId,
onRefresh }: Props) =
<Message content="This operation may take a long time as it will
empty all of your existing data and re-collect it." />
</Modal>
)}
- </S.StatusPanel>
+ </Flex>
);
};
diff --git a/config-ui/src/pages/blueprint/detail/styled.ts
b/config-ui/src/pages/blueprint/detail/styled.ts
index fc103bddd..161e1e7dc 100644
--- a/config-ui/src/pages/blueprint/detail/styled.ts
+++ b/config-ui/src/pages/blueprint/detail/styled.ts
@@ -77,29 +77,3 @@ export const ConnectionItem = styled.li`
margin: 24px 0;
}
`;
-
-export const StatusPanel = styled.div`
- h3 {
- margin-bottom: 16px;
- }
-
- .block + .block {
- margin-top: 32px;
- }
-`;
-
-export const ProjectACtion = styled.div`
- display: flex;
- justify-content: flex-end;
- align-items: center;
-
- & > * {
- margin-left: 16px;
- }
-`;
-
-export const BlueprintAction = styled.div`
- display: flex;
- justify-content: center;
- align-items: center;
-`;
diff --git a/config-ui/src/pages/project/detail/settings-panel.tsx
b/config-ui/src/pages/project/detail/settings-panel.tsx
index c49e8e21f..f23d19f0c 100644
--- a/config-ui/src/pages/project/detail/settings-panel.tsx
+++ b/config-ui/src/pages/project/detail/settings-panel.tsx
@@ -19,7 +19,7 @@
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { WarningOutlined } from '@ant-design/icons';
-import { Flex, Card, Modal, Input, Checkbox, Button, message } from 'antd';
+import { Flex, Space, Card, Modal, Input, Checkbox, Button, message } from
'antd';
import API from '@/api';
import { Block } from '@/components';
@@ -101,26 +101,28 @@ export const SettingsPanel = ({ project, onRefresh }:
Props) => {
return (
<Flex vertical>
- <Card>
- <Block title="Project Name" description="Edit your project name with
letters, numbers, -, _ or /" required>
- <Input style={{ width: 386 }} value={name} onChange={(e) =>
setName(e.target.value)} />
- </Block>
- <Block description="DORA metrics are four widely-adopted metrics for
measuring software delivery performance.">
- <Checkbox checked={enableDora} onChange={(e) =>
setEnableDora(e.target.checked)}>
- Enable DORA Metrics
- </Checkbox>
- </Block>
- <Block>
- <Button type="primary" loading={operating} disabled={!name}
onClick={handleUpdate}>
- Save
+ <Space direction="vertical" size="large">
+ <Card>
+ <Block title="Project Name" description="Edit your project name with
letters, numbers, -, _ or /" required>
+ <Input style={{ width: 386 }} value={name} onChange={(e) =>
setName(e.target.value)} />
+ </Block>
+ <Block description="DORA metrics are four widely-adopted metrics for
measuring software delivery performance.">
+ <Checkbox checked={enableDora} onChange={(e) =>
setEnableDora(e.target.checked)}>
+ Enable DORA Metrics
+ </Checkbox>
+ </Block>
+ <Block>
+ <Button type="primary" loading={operating} disabled={!name}
onClick={handleUpdate}>
+ Save
+ </Button>
+ </Block>
+ </Card>
+ <Flex justify="center">
+ <Button type="primary" danger onClick={handleShowDeleteDialog}>
+ Delete Project
</Button>
- </Block>
- </Card>
- <Flex justify="center">
- <Button type="primary" danger onClick={handleShowDeleteDialog}>
- Delete Project
- </Button>
- </Flex>
+ </Flex>
+ </Space>
<Modal
open={open}
width={820}
diff --git
a/config-ui/src/plugins/components/connection-form/fields/endpoint.tsx
b/config-ui/src/plugins/components/connection-form/fields/endpoint.tsx
index ff9e45782..2dc3d3ed4 100644
--- a/config-ui/src/plugins/components/connection-form/fields/endpoint.tsx
+++ b/config-ui/src/plugins/components/connection-form/fields/endpoint.tsx
@@ -76,17 +76,22 @@ export const ConnectionEndpoint = ({
if (multipleVersions) {
return (
- <Block title={name} required>
- <Radio.Group value={version} onChange={handleChange}>
- <Radio value="cloud">{name} Cloud</Radio>
- <Radio value="server" disabled={!multipleVersions.server}>
- {name} Server {multipleVersions.server ? multipleVersions.server :
'(to be supported)'}
- </Radio>
- </Radio.Group>
+ <>
+ <Block title={name} required>
+ <Radio.Group value={version} onChange={handleChange}>
+ <Radio value="cloud">{name} Cloud</Radio>
+ <Radio value="server" disabled={!multipleVersions.server}>
+ {name} Server {multipleVersions.server ? multipleVersions.server
: '(to be supported)'}
+ </Radio>
+ </Radio.Group>
+ </Block>
{version === 'cloud' && (
- <p style={{ margin: 0 }}>
- If you are using {name} Cloud, you do not need to enter the
endpoint URL, which is {multipleVersions.cloud}.
- </p>
+ <Block>
+ <p>
+ If you are using {name} Cloud, you do not need to enter the
endpoint URL, which is{' '}
+ {multipleVersions.cloud}.
+ </p>
+ </Block>
)}
{version === 'server' && (
<Block
@@ -94,16 +99,22 @@ export const ConnectionEndpoint = ({
description={subLabel ?? `If you are using ${name} Server, please
enter the endpoint URL.`}
required
>
- <Input placeholder="Your Endpoint URL" value={value}
onChange={handleChangeValue} />
+ <Input style={{ width: 386 }} placeholder="Your Endpoint URL"
value={value} onChange={handleChangeValue} />
</Block>
)}
- </Block>
+ </>
);
}
return (
<Block title="Endpoint URL" description={subLabel ?? `Provide the ${name}
instance API endpoint.`} required>
- <Input disabled={disabled} placeholder="Your Endpoint URL" value={value}
onChange={handleChangeValue} />
+ <Input
+ style={{ width: 386 }}
+ disabled={disabled}
+ placeholder="Your Endpoint URL"
+ value={value}
+ onChange={handleChangeValue}
+ />
</Block>
);
};
diff --git a/config-ui/src/plugins/components/connection-form/fields/name.tsx
b/config-ui/src/plugins/components/connection-form/fields/name.tsx
index 70eb33b77..d586fff88 100644
--- a/config-ui/src/plugins/components/connection-form/fields/name.tsx
+++ b/config-ui/src/plugins/components/connection-form/fields/name.tsx
@@ -49,7 +49,7 @@ export const ConnectionName = ({ initialValue, value,
setValue, setError }: Prop
description="Give your connection a unique name to help you identify it
in the future."
required
>
- <Input placeholder="Your Connection Name" value={value}
onChange={handleChange} />
+ <Input style={{ width: 386 }} placeholder="Your Connection Name"
value={value} onChange={handleChange} />
</Block>
);
};
diff --git
a/config-ui/src/plugins/components/connection-form/fields/password.tsx
b/config-ui/src/plugins/components/connection-form/fields/password.tsx
index c98bd918e..de6e7f190 100644
--- a/config-ui/src/plugins/components/connection-form/fields/password.tsx
+++ b/config-ui/src/plugins/components/connection-form/fields/password.tsx
@@ -60,7 +60,7 @@ export const ConnectionPassword = ({
<Block title={label ?? 'Password'} description={subLabel ? subLabel :
null} required>
<Input.Password
style={{ width: 386 }}
- placeholder={placeholder ?? 'Your Password'}
+ placeholder={type === 'update' ? '********' : placeholder ?
placeholder : 'Your Password'}
value={value}
onChange={handleChange}
/>
diff --git a/config-ui/src/plugins/components/connection-form/fields/proxy.tsx
b/config-ui/src/plugins/components/connection-form/fields/proxy.tsx
index 91f22964c..fee3de699 100644
--- a/config-ui/src/plugins/components/connection-form/fields/proxy.tsx
+++ b/config-ui/src/plugins/components/connection-form/fields/proxy.tsx
@@ -58,7 +58,12 @@ export const ConnectionProxy = ({ name, initialValue, value,
setValue }: Props)
return (
<Block title="Proxy" description={`Add a proxy if you cannot access
${name} directly.`}>
- <Input placeholder="e.g. http://proxy.localhost:8080"; value={value}
onChange={handleChange} />
+ <Input
+ style={{ width: 386 }}
+ placeholder="e.g. http://proxy.localhost:8080";
+ value={value}
+ onChange={handleChange}
+ />
</Block>
);
};
diff --git a/config-ui/src/plugins/components/connection-form/fields/token.tsx
b/config-ui/src/plugins/components/connection-form/fields/token.tsx
index 109aa6655..647f50d68 100644
--- a/config-ui/src/plugins/components/connection-form/fields/token.tsx
+++ b/config-ui/src/plugins/components/connection-form/fields/token.tsx
@@ -65,7 +65,12 @@ export const ConnectionToken = ({ type, label, subLabel,
initialValue, value, se
return (
<Block title={label ?? 'Token'} description={subLabel ? subLabel : null}
required>
- <Input.Password style={{ width: 386 }} placeholder="Your Token"
value={value} onChange={handleChange} />
+ <Input.Password
+ style={{ width: 386 }}
+ placeholder={type === 'update' ? '********' : 'Your Token'}
+ value={value}
+ onChange={handleChange}
+ />
</Block>
);
};
diff --git
a/config-ui/src/plugins/components/connection-form/fields/username.tsx
b/config-ui/src/plugins/components/connection-form/fields/username.tsx
index 7d34d352b..e69b43ad8 100644
--- a/config-ui/src/plugins/components/connection-form/fields/username.tsx
+++ b/config-ui/src/plugins/components/connection-form/fields/username.tsx
@@ -73,7 +73,12 @@ export const ConnectionUsername = ({
return (
<Block title={label ?? 'Username'} description={subLabel ? subLabel :
null} required>
- <Input placeholder={placeholder ?? 'Your Username'} value={value}
onChange={handleChange} />
+ <Input
+ style={{ width: 386 }}
+ placeholder={placeholder ?? 'Your Username'}
+ value={value}
+ onChange={handleChange}
+ />
</Block>
);
};
diff --git a/config-ui/src/plugins/register/bitbucket/transformation.tsx
b/config-ui/src/plugins/register/bitbucket/transformation.tsx
index 6bae7b8a7..9e0bc4a79 100644
--- a/config-ui/src/plugins/register/bitbucket/transformation.tsx
+++ b/config-ui/src/plugins/register/bitbucket/transformation.tsx
@@ -44,15 +44,15 @@ export const BitbucketTransformation = ({ entities,
transformation, setTransform
}
}, [transformation]);
- const selectedStates = useMemo(
- () => [
+ const options = useMemo(() => {
+ const disabledOptions = [
...(transformation.issueStatusTodo ?
transformation.issueStatusTodo.split(',') : []),
...(transformation.issueStatusInProgress ?
transformation.issueStatusInProgress.split(',') : []),
...(transformation.issueStatusDone ?
transformation.issueStatusDone.split(',') : []),
...(transformation.issueStatusOther ?
transformation.issueStatusOther.split(',') : []),
- ],
- [transformation],
- );
+ ];
+ return ALL_STATES.filter((it) => !disabledOptions.includes(it)).map((it)
=> ({ label: it, value: it }));
+ }, [transformation]);
const handleChangeUseCustom = (e: React.FormEvent<HTMLInputElement>) => {
const checked = (e.target as HTMLInputElement).checked;
@@ -87,7 +87,7 @@ export const BitbucketTransformation = ({ entities,
transformation, setTransform
items={renderCollapseItems({
entities,
panelStyle,
- selectedStates,
+ options,
transformation,
onChangeTransformation: setTransformation,
useCustom,
@@ -100,7 +100,7 @@ export const BitbucketTransformation = ({ entities,
transformation, setTransform
const renderCollapseItems = ({
entities,
panelStyle,
- selectedStates,
+ options,
transformation,
onChangeTransformation,
useCustom,
@@ -108,7 +108,7 @@ const renderCollapseItems = ({
}: {
entities: string[];
panelStyle: React.CSSProperties;
- selectedStates: any;
+ options: Array<{ label: string; value: string }>;
transformation: any;
onChangeTransformation: any;
useCustom: boolean;
@@ -129,7 +129,7 @@ const renderCollapseItems = ({
<Form.Item label="TODO">
<Select
mode="multiple"
- options={ALL_STATES.map((it) => ({ label: it, value: it }))}
+ options={options}
value={transformation.issueStatusTodo ?
transformation.issueStatusTodo.split(',') : []}
onChange={(value) =>
onChangeTransformation({
@@ -142,7 +142,7 @@ const renderCollapseItems = ({
<Form.Item label="IN-PROGRESS">
<Select
mode="multiple"
- options={ALL_STATES.map((it) => ({ label: it, value: it }))}
+ options={options}
value={transformation.issueStatusInProgress ?
transformation.issueStatusInProgress.split(',') : []}
onChange={(value) =>
onChangeTransformation({
@@ -155,7 +155,7 @@ const renderCollapseItems = ({
<Form.Item label="DONE">
<Select
mode="multiple"
- options={ALL_STATES.map((it) => ({ label: it, value: it }))}
+ options={options}
value={transformation.issueStatusDone ?
transformation.issueStatusDone.split(',') : []}
onChange={(value) =>
onChangeTransformation({
@@ -168,7 +168,7 @@ const renderCollapseItems = ({
<Form.Item label="OTHER">
<Select
mode="multiple"
- options={ALL_STATES.map((it) => ({ label: it, value: it }))}
+ options={options}
value={transformation.issueStatusOther ?
transformation.issueStatusOther.split(',') : []}
onChange={(value) =>
onChangeTransformation({
diff --git a/config-ui/src/plugins/register/github/connection-fields/styled.ts
b/config-ui/src/plugins/register/github/connection-fields/styled.ts
index 70eea3b2c..a9522799e 100644
--- a/config-ui/src/plugins/register/github/connection-fields/styled.ts
+++ b/config-ui/src/plugins/register/github/connection-fields/styled.ts
@@ -52,7 +52,7 @@ export const Input = styled.div`
}
span.success {
- color: #a0d911;
+ color: #4db764;
}
}
}
diff --git a/config-ui/src/plugins/register/jira/config.tsx
b/config-ui/src/plugins/register/jira/config.tsx
index 4e2a31497..8eb9b831c 100644
--- a/config-ui/src/plugins/register/jira/config.tsx
+++ b/config-ui/src/plugins/register/jira/config.tsx
@@ -31,9 +31,10 @@ export const JiraConfig: IPluginConfig = {
docLink: DOC_URL.PLUGIN.JIRA.BASIS,
fields: [
'name',
- ({ initialValues, values, errors, setValues, setErrors }: any) => (
+ ({ type, initialValues, values, errors, setValues, setErrors }: any) => (
<Auth
key="auth"
+ type={type}
initialValues={initialValues}
values={values}
errors={errors}
diff --git a/config-ui/src/plugins/register/jira/connection-fields/auth.tsx
b/config-ui/src/plugins/register/jira/connection-fields/auth.tsx
index 572cf0d5e..dc00bebaf 100644
--- a/config-ui/src/plugins/register/jira/connection-fields/auth.tsx
+++ b/config-ui/src/plugins/register/jira/connection-fields/auth.tsx
@@ -28,6 +28,7 @@ const JIRA_CLOUD_REGEX =
/^https:\/\/\w+.atlassian.net\/rest\/$/;
type Method = 'BasicAuth' | 'AccessToken';
interface Props {
+ type: 'create' | 'update';
initialValues: any;
values: any;
errors: any;
@@ -35,7 +36,7 @@ interface Props {
setErrors: (value: any) => void;
}
-export const Auth = ({ initialValues, values, setValues, setErrors }: Props)
=> {
+export const Auth = ({ type, initialValues, values, setValues, setErrors }:
Props) => {
const [version, setVersion] = useState('cloud');
useEffect(() => {
@@ -140,14 +141,24 @@ export const Auth = ({ initialValues, values, setValues,
setErrors }: Props) =>
}
required
>
- <Input placeholder="Your Endpoint URL" value={values.endpoint}
onChange={handleChangeEndpoint} />
+ <Input
+ style={{ width: 386 }}
+ placeholder="Your Endpoint URL"
+ value={values.endpoint}
+ onChange={handleChangeEndpoint}
+ />
</Block>
</Block>
{version === 'cloud' && (
<>
<Block title="E-Mail" required>
- <Input placeholder="Your E-Mail" value={values.username}
onChange={handleChangeUsername} />
+ <Input
+ style={{ width: 386 }}
+ placeholder="Your E-Mail"
+ value={values.username}
+ onChange={handleChangeUsername}
+ />
</Block>
<Block
title="API Token"
@@ -158,7 +169,7 @@ export const Auth = ({ initialValues, values, setValues,
setErrors }: Props) =>
>
<Input.Password
style={{ width: 386 }}
- placeholder="Your PAT"
+ placeholder={type === 'update' ? '********' : 'Your PAT'}
value={values.password}
onChange={handleChangePassword}
/>
@@ -182,7 +193,7 @@ export const Auth = ({ initialValues, values, setValues,
setErrors }: Props) =>
<Block title="Password" required>
<Input.Password
style={{ width: 386 }}
- placeholder="Your Password"
+ placeholder={type === 'update' ? '********' : 'Your
Password'}
value={values.password}
onChange={handleChangePassword}
/>
@@ -201,7 +212,7 @@ export const Auth = ({ initialValues, values, setValues,
setErrors }: Props) =>
>
<Input.Password
style={{ width: 386 }}
- placeholder="Your PAT"
+ placeholder={type === 'update' ? '********' : 'Your Password'}
value={values.token}
onChange={handleChangeToken}
/>
diff --git
a/config-ui/src/plugins/register/opsgenie/connection-fields/styled.ts
b/config-ui/src/plugins/register/opsgenie/connection-fields/styled.ts
index 70eea3b2c..a9522799e 100644
--- a/config-ui/src/plugins/register/opsgenie/connection-fields/styled.ts
+++ b/config-ui/src/plugins/register/opsgenie/connection-fields/styled.ts
@@ -52,7 +52,7 @@ export const Input = styled.div`
}
span.success {
- color: #a0d911;
+ color: #4db764;
}
}
}
diff --git a/config-ui/src/plugins/register/webhook/styled.ts
b/config-ui/src/plugins/register/webhook/styled.ts
index 318073f44..ca59c72c1 100644
--- a/config-ui/src/plugins/register/webhook/styled.ts
+++ b/config-ui/src/plugins/register/webhook/styled.ts
@@ -27,7 +27,7 @@ export const Wrapper = styled.div`
margin-bottom: 16px;
padding: 0;
font-weight: 600;
- color: #a0d911;
+ color: #4db764;
}
h5 {
diff --git a/config-ui/src/plugins/register/zentao/connection-fields/db-url.tsx
b/config-ui/src/plugins/register/zentao/connection-fields/db-url.tsx
index 67c3d23c0..57f62f44d 100644
--- a/config-ui/src/plugins/register/zentao/connection-fields/db-url.tsx
+++ b/config-ui/src/plugins/register/zentao/connection-fields/db-url.tsx
@@ -39,6 +39,7 @@ export const DBUrl = ({ initialValue, value, setValue }:
Props) => {
return (
<Block title="Database URL" description="Provide the DB URL of Zentao if
you want to collect issue changelogs.">
<Input
+ style={{ width: 386 }}
placeholder="e.g.
mysql://root:devlake@sshd-proxy:3306/zentao?charset=utf8mb4&parseTime=True"
value={value}
onChange={handleChange}
diff --git a/config-ui/src/routes/error/components/offline/index.tsx
b/config-ui/src/routes/error/components/offline/index.tsx
index b9574f304..c07ffa54d 100644
--- a/config-ui/src/routes/error/components/offline/index.tsx
+++ b/config-ui/src/routes/error/components/offline/index.tsx
@@ -57,9 +57,9 @@ export const Offline = () => {
return (
<Card>
<h2>
- {online ? <CheckCircleOutlined color="#a0d911" size={30} /> :
<CloseCircleOutlined color="#f5222d" size={30} />}
+ {online ? <CheckCircleOutlined color="#4db764" size={30} /> :
<CloseCircleOutlined color="#f5222d" size={30} />}
<span>DevLake API</span>
- <strong style={{ marginLeft: 4, color: online ? '#a0d911' : '#f5222d'
}}>
+ <strong style={{ marginLeft: 4, color: online ? '#4db764' : '#f5222d'
}}>
{online ? 'Online' : 'Offline'}
</strong>
</h2>
diff --git a/config-ui/src/routes/layout/layout.tsx
b/config-ui/src/routes/layout/layout.tsx
index 92155d7e7..6bcd62ea8 100644
--- a/config-ui/src/routes/layout/layout.tsx
+++ b/config-ui/src/routes/layout/layout.tsx
@@ -62,7 +62,16 @@ export const Layout = () => {
}, []);
useEffect(() => {
- setSelectedKeys([pathname]);
+ const selectedKeys = pathname.split('/').reduce((acc, cur, i, arr) => {
+ if (i === 0) {
+ acc.push('/');
+ return acc;
+ } else {
+ acc.push(`${arr.slice(0, i + 1).join('/')}`);
+ return acc;
+ }
+ }, [] as string[]);
+ setSelectedKeys(selectedKeys);
}, [pathname]);
if (['idle', 'loading'].includes(status)) {
diff --git a/config-ui/src/routes/pipeline/components/status.tsx
b/config-ui/src/routes/pipeline/components/status.tsx
index a3086f62e..863d48c95 100644
--- a/config-ui/src/routes/pipeline/components/status.tsx
+++ b/config-ui/src/routes/pipeline/components/status.tsx
@@ -16,6 +16,7 @@
*
*/
+import { Space } from 'antd';
import classNames from 'classnames';
import { IPipelineStatus } from '@/types';
@@ -38,8 +39,10 @@ export const PipelineStatus = ({ status }: Props) => {
return (
<S.StatusWrapper className={cls}>
- {C.PipeLineStatusIcon[status]}
- <span>{C.PipeLineStatusLabel[status]}</span>
+ <Space size="small">
+ {C.PipeLineStatusIcon[status]}
+ <span>{C.PipeLineStatusLabel[status]}</span>
+ </Space>
</S.StatusWrapper>
);
};
diff --git a/config-ui/src/routes/pipeline/components/table.tsx
b/config-ui/src/routes/pipeline/components/table.tsx
index c4c951251..5d56b479e 100644
--- a/config-ui/src/routes/pipeline/components/table.tsx
+++ b/config-ui/src/routes/pipeline/components/table.tsx
@@ -77,11 +77,13 @@ export const PipelineTable = ({ dataSource, pagination,
noData }: Props) => {
title: 'ID',
dataIndex: 'id',
key: 'id',
+ align: 'center',
},
{
title: 'Status',
dataIndex: 'status',
key: 'status',
+ align: 'center',
render: (val) => <PipelineStatus status={val} />,
},
{
@@ -101,6 +103,7 @@ export const PipelineTable = ({ dataSource, pagination,
noData }: Props) => {
{
title: 'Duration',
key: 'duration',
+ align: 'center',
render: (_, { status, beganAt, finishedAt }) => (
<PipelineDuration status={status} beganAt={beganAt}
finishedAt={finishedAt} />
),
diff --git a/config-ui/src/routes/pipeline/styled.ts
b/config-ui/src/routes/pipeline/styled.ts
index 8372f36b9..5af0c40e8 100644
--- a/config-ui/src/routes/pipeline/styled.ts
+++ b/config-ui/src/routes/pipeline/styled.ts
@@ -29,7 +29,7 @@ export const StatusWrapper = styled.div`
}
&.success {
- color: #a0d911;
+ color: #4db764;
}
&.error {
