From 348d9acc23db4aa948932761ced34e23e98d4715 Mon Sep 17 00:00:00 2001 From: barnettZQG Date: Sat, 22 Oct 2022 13:11:57 +0800 Subject: [PATCH] Fix: enhance the drawer page of the addon (#620) * Fix: enhance the drawer page of the addon Signed-off-by: barnettZQG * Fix: reset the schema after version changed Signed-off-by: barnettZQG Signed-off-by: barnettZQG --- src/api/addons.ts | 26 ++-- src/common.less | 9 -- src/components/Drawer/index.less | 43 ++++++ src/interface/addon.ts | 11 ++ src/lib.less | 4 + src/pages/Addons/components/detail/index.less | 11 +- src/pages/Addons/components/detail/index.tsx | 137 +++++++++++++----- .../components/ComponentDialog/index.tsx | 3 - 8 files changed, 178 insertions(+), 66 deletions(-) diff --git a/src/api/addons.ts b/src/api/addons.ts index 7c8bed471..49b07a7a1 100644 --- a/src/api/addons.ts +++ b/src/api/addons.ts @@ -1,6 +1,7 @@ import { post, get, rdelete, put } from './request'; import { addons, addonRegistries, enabledAddon } from './productionLink'; import { getDomain } from '../utils/common'; +import type { EnableAddonRequest } from '../interface/addon'; const baseURLOject = getDomain(); const base = baseURLOject.MOCK || baseURLOject.APIBASE; @@ -23,7 +24,16 @@ export function getAddonsList(params: any) { export function getAddonsDetails(params: { name: string; version?: string }) { const gurl = `${base + addons}/${params.name}`; - return get(gurl, params).then((res) => res); + return get( + gurl, + params.version + ? { + params: { + version: params.version, + }, + } + : {}, + ).then((res) => res); } export function disableAddon(params: { name: string }) { @@ -31,12 +41,7 @@ export function disableAddon(params: { name: string }) { return post(gurl, params).then((res) => res); } -export function enableAddon(params: { - name: string; - version: string; - clusters?: string[]; - properties: any; -}) { +export function enableAddon(params: EnableAddonRequest) { const gurl = `${base + addons}/${params.name}/enable`; const req: any = { args: params.properties, version: params.version }; if (params.clusters) { @@ -45,12 +50,7 @@ export function enableAddon(params: { return post(gurl, req).then((res) => res); } -export function upgradeAddon(params: { - name: string; - version: string; - clusters?: string[]; - properties: any; -}) { +export function upgradeAddon(params: EnableAddonRequest) { const gurl = `${base + addons}/${params.name}/update`; const req: any = { args: params.properties, version: params.version }; if (params.clusters) { diff --git a/src/common.less b/src/common.less index ad9df9af9..f8ed12f3b 100644 --- a/src/common.less +++ b/src/common.less @@ -470,15 +470,6 @@ a { display: inline-block; } -.next-drawer-close { - right: 24px; - - .next-drawer-close-icon.next-icon::before { - width: 16px !important; - height: 16px !important; - font-size: 16px !important; - } -} .next-btn.danger-btn { color: @dangerColor !important; border: @dangerColor 1px solid !important; diff --git a/src/components/Drawer/index.less b/src/components/Drawer/index.less index 9dd4602e4..97a98fcd8 100644 --- a/src/components/Drawer/index.less +++ b/src/components/Drawer/index.less @@ -8,3 +8,46 @@ height: 60px; background: #fff; } + +.next-drawer { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + .next-drawer-header { + position: absolute; + top: 0; + z-index: 1000; + display: flex; + flex: 0; + align-items: center; + width: 100%; + height: 55px; + padding: 16px 24px; + font-size: 16px; + line-height: 22px; + border-bottom: 1px solid rgba(0, 0, 0, 0.06); + } + .next-drawer-body { + flex: 1; + min-width: 0; + min-height: 0; + margin-top: 71px; + padding: 24px; + overflow: auto; + } +} + +.next-drawer-close { + right: 26px !important; + + .next-drawer-close-icon.next-icon::before { + color: #000; + font-weight: 800 !important; + font-size: 24px !important; + line-height: 24px !important; + &:hover { + color: var(--primary-color); + } + } +} diff --git a/src/interface/addon.ts b/src/interface/addon.ts index da98cb0be..8585022e4 100644 --- a/src/interface/addon.ts +++ b/src/interface/addon.ts @@ -16,6 +16,10 @@ export interface Addon { registryName?: string; availableVersions?: string[]; url?: string; + system?: { + vela?: string; + kubernetes?: string; + }; } export interface AddonStatus { @@ -69,3 +73,10 @@ export interface AddonBaseStatus { name: string; phase: 'disabled' | 'enabled' | 'enabling' | 'suspend' | 'disabling'; } + +export interface EnableAddonRequest { + name: string; + version: string; + properties: Record; + clusters?: string[]; +} diff --git a/src/lib.less b/src/lib.less index a4f0eecac..86cb1aa60 100644 --- a/src/lib.less +++ b/src/lib.less @@ -1,3 +1,7 @@ +:root { + --primary-color: #1b58f4; + --warning-color: var(--message-warning-color-icon-inline, #fac800); +} @border-radius-8: 8px; @F7F7F7: #f7f7f7; @F9F8FF: #f9f8ff; diff --git a/src/pages/Addons/components/detail/index.less b/src/pages/Addons/components/detail/index.less index 4f1f23a4f..700a1a903 100644 --- a/src/pages/Addons/components/detail/index.less +++ b/src/pages/Addons/components/detail/index.less @@ -13,13 +13,18 @@ img { width: 100%; } - ol, ul { + ol, + ul { list-style: decimal; } p { font-size: 14px; } } -.addon-readme li>p { +.addon-readme li > p { font-size: 14px; -} \ No newline at end of file +} + +.warning-text { + color: var(--warning-color); +} diff --git a/src/pages/Addons/components/detail/index.tsx b/src/pages/Addons/components/detail/index.tsx index 902be79eb..e9f1660ba 100644 --- a/src/pages/Addons/components/detail/index.tsx +++ b/src/pages/Addons/components/detail/index.tsx @@ -13,6 +13,7 @@ import { Grid, Dropdown, Menu, + Icon, } from '@b-design/ui'; import type { Rule } from '@alifd/field'; import { If } from 'tsx-control-statements/components'; @@ -27,13 +28,12 @@ import ReactMarkdown from 'react-markdown'; import remarkGfm from 'remark-gfm'; import Empty from '../../../../components/Empty'; import DrawerWithFooter from '../../../../components/Drawer'; -import Group from '../../../../extends/Group'; import Translation from '../../../../components/Translation'; import UISchema from '../../../../components/UISchema'; -import type { Addon, AddonStatus } from '../../../../interface/addon'; +import type { Addon, AddonStatus, EnableAddonRequest } from '../../../../interface/addon'; import locale from '../../../../utils/locale'; import StatusShow from '../../../../components/StatusShow'; -import type { ApplicationStatus } from '../../../../interface/application'; +import type { ApplicationStatus, UIParam } from '../../../../interface/application'; import i18n from '../../../../i18n'; import type { NameAlias } from '../../../../interface/env'; import Permission from '../../../../components/Permission'; @@ -68,6 +68,8 @@ type State = { allClusters?: NameAlias[]; enabledClusters?: string[]; endpoints?: Endpoint[]; + propertiesMode: 'code' | 'native'; + schema?: UIParam[]; }; class AddonDetailDialog extends React.Component { @@ -77,6 +79,7 @@ class AddonDetailDialog extends React.Component { constructor(props: Props) { super(props); this.state = { + propertiesMode: 'native', addonDetailInfo: { name: '', }, @@ -103,7 +106,7 @@ class AddonDetailDialog extends React.Component { getAddonsDetails({ name: this.props.addonName, version: version }) .then((res: Addon) => { if (res) { - this.setState({ addonDetailInfo: res, loading: false }); + this.setState({ addonDetailInfo: res, schema: res.uiSchema, loading: false }); if (!this.state.version && res.version) { this.setState({ version: res.version }); } @@ -212,17 +215,21 @@ class AddonDetailDialog extends React.Component { return; } this.setState({ upgradeLoading: true }); - upgradeAddon({ + const params: EnableAddonRequest = { name: this.props.addonName, version: this.state.version, - clusters: this.state.clusters, properties: values.properties, - }).then(() => { + }; + if (this.state.addonDetailInfo?.deployTo?.runtimeCluster) { + params.clusters = this.state.clusters; + } + upgradeAddon(params).then(() => { this.loadAddonStatus(); this.setState({ upgradeLoading: false }); }); }); }; + enableAddon = async (properties: any) => { if (!this.state.version) { Message.warning(i18n.t('Please firstly select want to enable version')); @@ -237,12 +244,15 @@ class AddonDetailDialog extends React.Component { } this.setState({ statusLoading: true }, () => { if (this.state.version) { - enableAddon({ + const params: EnableAddonRequest = { name: this.props.addonName, version: this.state.version, - clusters: this.state.clusters, properties: properties, - }).then(() => { + }; + if (this.state.addonDetailInfo?.deployTo?.runtimeCluster) { + params.clusters = this.state.clusters; + } + enableAddon(params).then(() => { this.loadAddonStatus(); }); } @@ -270,7 +280,9 @@ class AddonDetailDialog extends React.Component { }; changeVersion = (version: string) => { this.setState({ version: version }, () => { - this.loadAddonDetail(); + this.setState({ schema: undefined }, () => { + this.loadAddonDetail(); + }); }); }; @@ -296,6 +308,8 @@ class AddonDetailDialog extends React.Component { allClusters, enabledClusters, endpoints, + propertiesMode, + schema, } = this.state; const { showAddon, addonName } = this.props; const validator = (rule: Rule, value: any, callback: (error?: string) => void) => { @@ -477,6 +491,18 @@ class AddonDetailDialog extends React.Component { value={version} /> + {addonDetailInfo?.system && ( + + This version requirements: ( + {addonDetailInfo?.system.vela + ? `KubeVela: ${addonDetailInfo?.system.vela}` + : ''} + {addonDetailInfo?.system.kubernetes + ? ` Kubernetes: ${addonDetailInfo?.system.kubernetes}` + : ''} + ) + + )} @@ -491,34 +517,69 @@ class AddonDetailDialog extends React.Component { - - Properties} - description={Set the addon configuration parameters} - required={true} - closed={status === 'enabled'} - alwaysShow={true} - disableAddon={true} - hasToggleIcon={true} + + { + if (propertiesMode === 'native') { + this.setState({ propertiesMode: 'code' }); + } else { + this.setState({ propertiesMode: 'native' }); + } + }} + > + + + + + + + , + ] + : [] + } > -
- {this.state.mode && ( - - )} - -
+ + + {this.state.mode && ( + + )} + + + { return (
{alias ? `${alias}(${name})` : name} -
); } else { return (
{i18n.t('New Component')} -
); }