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 82a9349b7 feat(config-ui): adjust the connection home page (#5136)
82a9349b7 is described below
commit 82a9349b76c1f134d50951c8ef0b402b5bca04b3
Author: 青湛 <[email protected]>
AuthorDate: Wed May 10 09:32:29 2023 +0800
feat(config-ui): adjust the connection home page (#5136)
* refactor(config-ui): adjust the / redirect to /connections
* refactor(config-ui): adjust the gloabl style
* refactor(config-ui): adjust the config for webhook plugin
* feat(config-ui): add props filterPlugin in connection store
* feat(config-ui): adjust the connection home page
---
config-ui/src/App.tsx | 10 +--
config-ui/src/index.css | 16 ++--
config-ui/src/layouts/base/use-menu.ts | 4 +-
.../blueprint/connection-add/components/step-1.tsx | 2 +-
config-ui/src/pages/blueprint/create/index.tsx | 2 +-
.../config.ts => pages/connection/home/count.tsx} | 16 ++--
config-ui/src/pages/connection/home/index.tsx | 94 +++++++++++++---------
config-ui/src/pages/connection/home/styled.ts | 50 ++++++++----
config-ui/src/plugins/register/webook/config.ts | 5 +-
config-ui/src/plugins/types.ts | 1 -
config-ui/src/store/connections/status.tsx | 1 -
.../src/store/connections/use-context-value.ts | 8 +-
12 files changed, 121 insertions(+), 88 deletions(-)
diff --git a/config-ui/src/App.tsx b/config-ui/src/App.tsx
index dbcbab2bc..1f24e9b27 100644
--- a/config-ui/src/App.tsx
+++ b/config-ui/src/App.tsx
@@ -67,7 +67,11 @@ function App() {
component={() => (
<BaseLayout>
<Switch>
- <Route exact path="/" component={() => <Redirect
to="/projects" />} />
+ <Route exact path="/" component={() => <Redirect
to="/connections" />} />
+ <Route exact path="/connections" component={() =>
<ConnectionHomePage />} />
+ <Route exact path="/connections/:plugin" component={() =>
<ConnectionListPage />} />
+ <Route exact path="/connections/:plugin/create" component={()
=> <ConnectionFormPage />} />
+ <Route exact path="/connections/:plugin/:cid" component={() =>
<ConnectionFormPage />} />
<Route exact path="/projects" component={() =>
<ProjectHomePage />} />
<Route exact path="/projects/:pname" component={() =>
<ProjectDetailPage />} />
<Route
@@ -81,10 +85,6 @@ function App() {
path="/projects/:pname/create-blueprint"
component={() => <BlueprintCreatePage
from={FromEnum.project} />}
/>
- <Route exact path="/connections" component={() =>
<ConnectionHomePage />} />
- <Route exact path="/connections/:plugin" component={() =>
<ConnectionListPage />} />
- <Route exact path="/connections/:plugin/create" component={()
=> <ConnectionFormPage />} />
- <Route exact path="/connections/:plugin/:cid" component={() =>
<ConnectionFormPage />} />
<Route exact path="/blueprints" component={() =>
<BlueprintHomePage />} />
<Route
exact
diff --git a/config-ui/src/index.css b/config-ui/src/index.css
index 8e05c782d..da56372db 100644
--- a/config-ui/src/index.css
+++ b/config-ui/src/index.css
@@ -38,28 +38,30 @@ h6 {
}
h1 {
- font-size: 20px;
+ font-size: 24px;
}
h2 {
- font-size: 18px;
+ font-size: 20px;
}
h3 {
- margin-bottom: 8px;
- font-size: 16px;
+ font-size: 18px;
}
h4 {
- font-size: 14px;
+ font-size: 16px;
+ font-weight: 400;
}
h5 {
- font-size: 12px;
+ font-size: 14px;
+ font-weight: 400;
}
h6 {
- font-size: 10px;
+ font-size: 12px;
+ font-weight: 400;
}
ul {
diff --git a/config-ui/src/layouts/base/use-menu.ts
b/config-ui/src/layouts/base/use-menu.ts
index c6d90eab3..864fae96d 100644
--- a/config-ui/src/layouts/base/use-menu.ts
+++ b/config-ui/src/layouts/base/use-menu.ts
@@ -42,9 +42,7 @@ export const useMenu = () => {
title: 'Connections',
icon: 'data-connection',
path: '/connections',
- children: PluginConfig.filter((p) =>
- [PluginType.Connection,
PluginType.Incoming_Connection].includes(p.type),
- ).map((it) => ({
+ children: PluginConfig.filter((p) => p.type ===
PluginType.Connection).map((it) => ({
key: it.plugin,
title: it.name,
iconUrl: it.icon,
diff --git a/config-ui/src/pages/blueprint/connection-add/components/step-1.tsx
b/config-ui/src/pages/blueprint/connection-add/components/step-1.tsx
index 2b92bfb6c..f0b63dbbd 100644
--- a/config-ui/src/pages/blueprint/connection-add/components/step-1.tsx
+++ b/config-ui/src/pages/blueprint/connection-add/components/step-1.tsx
@@ -31,7 +31,7 @@ export const Step1 = () => {
const { filter, connection, onChangeConnection, onCancel, onNext } =
useConnectionAdd();
return (
- <ConnectionContextProvider filterBeta filter={filter}>
+ <ConnectionContextProvider filterBeta filterPlugin={['webhook']}
filter={filter}>
<ConnectionContextConsumer>
{({ connections }) => (
<S.Wrapper>
diff --git a/config-ui/src/pages/blueprint/create/index.tsx
b/config-ui/src/pages/blueprint/create/index.tsx
index 8cab63e30..347bf6aaa 100644
--- a/config-ui/src/pages/blueprint/create/index.tsx
+++ b/config-ui/src/pages/blueprint/create/index.tsx
@@ -53,7 +53,7 @@ export const BlueprintCreatePage = ({ from }: Props) => {
);
return (
- <ConnectionContextProvider filterBeta>
+ <ConnectionContextProvider filterBeta filterPlugin={['webhook']}>
<ContextProvider from={from} projectName={pname}>
<Context.Consumer>
{({ step, mode }) => (
diff --git a/config-ui/src/plugins/register/webook/config.ts
b/config-ui/src/pages/connection/home/count.tsx
similarity index 70%
copy from config-ui/src/plugins/register/webook/config.ts
copy to config-ui/src/pages/connection/home/count.tsx
index bc318c73d..78fce8afe 100644
--- a/config-ui/src/plugins/register/webook/config.ts
+++ b/config-ui/src/pages/connection/home/count.tsx
@@ -16,16 +16,12 @@
*
*/
-import type { PluginConfigType } from '@/plugins';
-import { PluginType } from '@/plugins';
+import * as S from './styled';
-import Icon from './assets/icon.svg';
-import { BasePipelineConfig } from '../base';
+interface Props {
+ count: number;
+}
-export const WebhookConfig: PluginConfigType = {
- ...BasePipelineConfig,
- plugin: 'webhook',
- name: 'Webhook',
- type: PluginType.Incoming_Connection,
- icon: Icon,
+export const Count = ({ count }: Props) => {
+ return <S.Count>{count ? `${count} connections` : 'No connection'}</S.Count>;
};
diff --git a/config-ui/src/pages/connection/home/index.tsx
b/config-ui/src/pages/connection/home/index.tsx
index bf7e247af..af62514d9 100644
--- a/config-ui/src/pages/connection/home/index.tsx
+++ b/config-ui/src/pages/connection/home/index.tsx
@@ -16,59 +16,77 @@
*
*/
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
import { useHistory } from 'react-router-dom';
import { Tag, Intent } from '@blueprintjs/core';
+import type { PluginConfigType } from '@/plugins';
import { PluginConfig, PluginType } from '@/plugins';
+import { ConnectionContextProvider, ConnectionContextConsumer } from '@/store';
+import { Count } from './count';
import * as S from './styled';
export const ConnectionHomePage = () => {
const history = useHistory();
- const [connections, webhook] = useMemo(
+ const [plugins, webhook] = useMemo(
() => [
- PluginConfig.filter((p) => p.type === PluginType.Connection),
- PluginConfig.filter((p) => p.plugin === 'webhook'),
+ PluginConfig.filter((p) => p.type === PluginType.Connection && p.plugin
!== 'webhook'),
+ PluginConfig.find((p) => p.plugin === 'webhook') as PluginConfigType,
],
[],
);
return (
- <S.Wrapper>
- <div className="block">
- <h2>Data Connections</h2>
- <p>Connections are available for data collection.</p>
- <ul>
- {connections.map((cs) => (
- <li key={cs.plugin} onClick={() =>
history.push(`/connections/${cs.plugin}`)}>
- <img src={cs.icon} alt="" />
- <span>{cs.name}</span>
- {cs.isBeta && (
- <Tag intent={Intent.WARNING} round>
- beta
- </Tag>
- )}
- </li>
- ))}
- </ul>
- </div>
- <div className="block">
- <h2>Webhooks</h2>
- <p>
- You can use webhooks to import deployments and incidents from the
unsupported data integrations to calculate
- DORA metrics, etc. Please note: webhooks cannot be created or
managed in Blueprints.
- </p>
- <ul>
- {webhook.map((cs) => (
- <li key={cs.plugin} onClick={() =>
history.push(`/connections/${cs.plugin}`)}>
- <img src={cs.icon} alt="" />
- <span>{cs.name}</span>
- </li>
- ))}
- </ul>
- </div>
- </S.Wrapper>
+ <ConnectionContextProvider>
+ <ConnectionContextConsumer>
+ {({ connections }) => (
+ <S.Wrapper>
+ <div className="block">
+ <h1>Connections</h1>
+ <h5>
+ Create and manage data connections from the following data
sources or Webhooks to be used in syncing
+ data in your Projects.
+ </h5>
+ </div>
+ <div className="block">
+ <h2>Data Connections</h2>
+ <h5>
+ You can create and manage data connections for the following
data sources and use them in your Projects.
+ </h5>
+ <ul>
+ {plugins.map((p) => (
+ <li key={p.plugin} onClick={() =>
history.push(`/connections/${p.plugin}`)}>
+ <img src={p.icon} alt="" />
+ <span className="name">{p.name}</span>
+ <Count count={connections.filter((cs) => cs.plugin ===
p.plugin).length} />
+ {p.isBeta && (
+ <Tag intent={Intent.WARNING} round>
+ beta
+ </Tag>
+ )}
+ </li>
+ ))}
+ </ul>
+ </div>
+ <div className="block">
+ <h2>Webhooks</h2>
+ <h5>
+ You can use webhooks to import deployments and incidents from
the unsupported data integrations to
+ calculate DORA metrics, etc.
+ </h5>
+ <ul>
+ <li onClick={() =>
history.push(`/connections/${webhook.plugin}`)}>
+ <img src={webhook.icon} alt="" />
+ <span className="name">{webhook.name}</span>
+ <Count count={connections.filter((cs) => cs.plugin ===
'webhook').length} />
+ </li>
+ </ul>
+ </div>
+ </S.Wrapper>
+ )}
+ </ConnectionContextConsumer>
+ </ConnectionContextProvider>
);
};
diff --git a/config-ui/src/pages/connection/home/styled.ts
b/config-ui/src/pages/connection/home/styled.ts
index 3f2bf26b2..05cba9ee9 100644
--- a/config-ui/src/pages/connection/home/styled.ts
+++ b/config-ui/src/pages/connection/home/styled.ts
@@ -19,8 +19,12 @@
import styled from 'styled-components';
export const Wrapper = styled.div`
+ h5 {
+ margin-top: 12px;
+ }
+
.block + .block {
- margin-top: 24px;
+ margin-top: 36px;
}
ul {
@@ -34,34 +38,50 @@ export const Wrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
- padding: 16px 0;
- width: 120px;
- border: 2px solid transparent;
+ margin-top: 24px;
+ margin-right: 30px;
+ padding: 20px 0;
+ width: 160px;
+ border-radius: 8px;
+ box-shadow: 0px 2.4px 4.8px -0.8px rgba(0, 0, 0, 0.1), 0px 1.6px 8px
rgba(0, 0, 0, 0.07);
+ box-sizing: border-box;
cursor: pointer;
transition: all 0.2s linear;
&:hover {
background-color: #eeeeee;
- border-color: #7497f7;
- box-shadow: 0 2px 2px 0 rgb(0 0 0 / 16%), 0 0 2px 0 rgb(0 0 0 / 12%);
- }
-
- &:last-child {
- margin-right: 0;
}
& > img {
- width: 45px;
+ width: 60px;
+ margin-bottom: 8px;
}
- & > span {
- margin-top: 4px;
+ & > .name {
+ position: relative;
+ margin-bottom: 8px;
+ padding-bottom: 8px;
+
+ &::after {
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ margin-left: -44px;
+ content: '';
+ width: 88px;
+ height: 1px;
+ background-color: #dbdcdf;
+ }
}
& > .bp4-tag {
position: absolute;
- top: -4px;
- right: 4px;
+ top: 0;
+ right: 0;
}
}
`;
+
+export const Count = styled.span`
+ color: #70727f;
+`;
diff --git a/config-ui/src/plugins/register/webook/config.ts
b/config-ui/src/plugins/register/webook/config.ts
index bc318c73d..06510dceb 100644
--- a/config-ui/src/plugins/register/webook/config.ts
+++ b/config-ui/src/plugins/register/webook/config.ts
@@ -16,16 +16,15 @@
*
*/
-import type { PluginConfigType } from '@/plugins';
import { PluginType } from '@/plugins';
import Icon from './assets/icon.svg';
import { BasePipelineConfig } from '../base';
-export const WebhookConfig: PluginConfigType = {
+export const WebhookConfig = {
...BasePipelineConfig,
plugin: 'webhook',
name: 'Webhook',
- type: PluginType.Incoming_Connection,
+ type: PluginType.Connection,
icon: Icon,
};
diff --git a/config-ui/src/plugins/types.ts b/config-ui/src/plugins/types.ts
index 7dfe2fd5e..4dbe61edc 100644
--- a/config-ui/src/plugins/types.ts
+++ b/config-ui/src/plugins/types.ts
@@ -18,7 +18,6 @@
export enum PluginType {
Connection = 'connection',
- Incoming_Connection = 'incoming_connection',
Pipeline = 'pipeline',
}
diff --git a/config-ui/src/store/connections/status.tsx
b/config-ui/src/store/connections/status.tsx
index 7665f7d93..9a551fa75 100644
--- a/config-ui/src/store/connections/status.tsx
+++ b/config-ui/src/store/connections/status.tsx
@@ -16,7 +16,6 @@
*
*/
-import React from 'react';
import { Icon, Colors, Position, Intent } from '@blueprintjs/core';
import { Tooltip2 } from '@blueprintjs/popover2';
import styled from 'styled-components';
diff --git a/config-ui/src/store/connections/use-context-value.ts
b/config-ui/src/store/connections/use-context-value.ts
index 036790d54..369bc8a92 100644
--- a/config-ui/src/store/connections/use-context-value.ts
+++ b/config-ui/src/store/connections/use-context-value.ts
@@ -27,18 +27,20 @@ import * as API from './api';
export interface UseContextValueProps {
plugin?: string;
filterBeta?: boolean;
+ filterPlugin?: string[];
filter?: string[];
}
-export const useContextValue = ({ plugin, filterBeta = false, filter }:
UseContextValueProps) => {
+export const useContextValue = ({ plugin, filterBeta = false, filterPlugin,
filter }: UseContextValueProps) => {
const [loading, setLoading] = useState(false);
const [connections, setConnections] = useState<ConnectionItemType[]>([]);
const allConnections = useMemo(
() =>
PluginConfig.filter((p) => p.type === PluginType.Connection)
- .filter((p) => (plugin ? p.plugin === plugin : true))
- .filter((p) => (filterBeta ? !p.isBeta : true)),
+ .filter((p) => (filterBeta ? !p.isBeta : true))
+ .filter((p) => (filterPlugin ? !filterPlugin.includes(p.plugin) :
true))
+ .filter((p) => (plugin ? p.plugin === plugin : true)),
[plugin],
);
