+
+ {getFieldDecorator('BUILD_NO_CACHE', {
+ valuePropName: 'checked',
+ initialValue: isBuildEnvTruthy(envs.BUILD_NO_CACHE)
+ })(
+
+
+ {getFieldDecorator('BP_PHP_VERSION', {
+ initialValue: getPHPDefaultVersion(
+ cnbVersionPolicy,
+ firstNonEmptyEnv(envs, ['BP_PHP_VERSION', 'BUILD_RUNTIMES', 'RUNTIMES'])
+ )
+ })(
+
+ {versions.map(item => (
+ {item}
+ ))}
+
+ )}
+
+
+
+ {getFieldDecorator('BP_COMPOSER_INSTALL_OPTIONS', {
+ initialValue: firstNonEmptyEnv(envs, ['BP_COMPOSER_INSTALL_OPTIONS', 'BUILD_COMPOSER_INSTALL_OPTIONS'])
+ })()}
+
+
+
+ {getFieldDecorator('BP_PHP_WEB_DIR', {
+ initialValue: firstNonEmptyEnv(envs, ['BP_PHP_WEB_DIR', 'BUILD_PHP_WEB_DIR'])
+ })()}
+
+
+
+ {getFieldDecorator('PHP_START_MODE', {
+ initialValue: startMode
+ })(
+
+ {formatMessage({ id: 'componentOverview.body.PHPCNBConfig.start_mode_default' })}
+ {formatMessage({ id: 'componentOverview.body.PHPCNBConfig.start_mode_custom' })}
+
+ )}
+
+
+ {startMode === 'custom' && (
+
+ {getFieldDecorator('BUILD_PROCFILE', {
+ initialValue: envs.BUILD_PROCFILE || ''
+ })()}
+
+ )}
+
+ );
+ }
+}
+
+export default PHPCNBConfig;
diff --git a/src/components/CodeBuildConfig/php/index.js b/src/components/CodeBuildConfig/php/index.js
index 92b5edd62..13c8075a7 100644
--- a/src/components/CodeBuildConfig/php/index.js
+++ b/src/components/CodeBuildConfig/php/index.js
@@ -37,6 +37,7 @@ class Index extends PureComponent {
help={
+
+ {getFieldDecorator('BUILD_NO_CACHE', {
+ valuePropName: 'checked',
+ initialValue: isBuildEnvTruthy(envs.BUILD_NO_CACHE)
+ })(
+
+
+ {getFieldDecorator('BP_CPYTHON_VERSION', {
+ initialValue: getPythonDefaultVersion(
+ cnbVersionPolicy,
+ firstNonEmptyEnv(envs, ['BP_CPYTHON_VERSION', 'BUILD_RUNTIMES', 'RUNTIMES'])
+ )
+ })(
+
+ {versions.map(item => (
+ {item}
+ ))}
+
+ )}
+
+
+ {(packageManager === 'pip' || packageManager === 'pipenv') && (
+
+ {getFieldDecorator('PIP_INDEX_URL', {
+ initialValue: firstNonEmptyEnv(envs, ['PIP_INDEX_URL', 'BUILD_PIP_INDEX_URL']) || DEFAULT_PYTHON_MIRROR_SOURCE
+ })()}
+
+ )}
+
+ {(packageManager === 'pip' || packageManager === 'pipenv') && (
+
+ {getFieldDecorator('PIP_TRUSTED_HOST', {
+ initialValue: firstNonEmptyEnv(envs, ['PIP_TRUSTED_HOST', 'BUILD_PIP_TRUSTED_HOST'])
+ })()}
+
+ )}
+
+ {packageManager === 'poetry' && (
+
+ {getFieldDecorator('BUILD_POETRY_SOURCE_NAME', {
+ initialValue: firstNonEmptyEnv(envs, ['BUILD_POETRY_SOURCE_NAME']) || 'private'
+ })()}
+
+ )}
+
+ {packageManager === 'poetry' && (
+
+ {getFieldDecorator('BUILD_POETRY_SOURCE_URL', {
+ initialValue: firstNonEmptyEnv(envs, ['BUILD_POETRY_SOURCE_URL'])
+ })()}
+
+ )}
+
+ {packageManager === 'conda' && (
+
+ {getFieldDecorator('BUILD_CONDA_CHANNEL_URL', {
+ initialValue: firstNonEmptyEnv(envs, ['BUILD_CONDA_CHANNEL_URL'])
+ })()}
+
+ )}
+
+
+ {getFieldDecorator('BUILD_PROCFILE', {
+ initialValue: firstNonEmptyEnv(envs, ['BUILD_PROCFILE'])
+ })()}
+
+
+ );
+ }
+}
+
+export default PythonCNBConfig;
diff --git a/src/components/CodeBuildConfig/python/index.js b/src/components/CodeBuildConfig/python/index.js
index 172295fa7..ce87f8302 100644
--- a/src/components/CodeBuildConfig/python/index.js
+++ b/src/components/CodeBuildConfig/python/index.js
@@ -44,6 +44,7 @@ class Index extends PureComponent {
help={
-
-
- {formatMessage({ id: 'teamAdd.create.code.demoBtn' })}
-
-
-
-
- {formatMessage({ id: 'teamAdd.create.code.demoBtn' })}
-
-
-
-
- PHP Demo
-
-
-
-
- Python Demo
-
-
-
-
- Node.js Demo
-
-
-
- (
+
- Golang Demo
-
-
-
-
- Java-Maven Demo
-
-
-
-
- Java-Jar Demo
-
-
-
-
- Java-War Demo
-
-
-
-
- Java-Gradle Demo
-
-
-
-
- .NetCore Demo
-
-
+
+ {this.getExampleLabel(example)}
+
+
+ ))}
)
});
};
- extractRepoName = (url) => {
- const regex = /\/([^/]+)\.git/;
- const matches = regex.exec(url);
- if (matches && matches.length > 1) {
- return matches[1];
- }
- return 'demo';
- };
handleChangeDemo = value => {
- const name = this.extractRepoName(value);
+ const name = getSourceExampleDefaultName(value);
const { setFieldsValue } = this.props.form;
setFieldsValue({ service_cname: name, k8s_component_name: name, git_url: value });
this.setState({
@@ -283,7 +202,7 @@ export default class Index extends PureComponent {
!isDisplayOnly && handleItemClick(item)}
+ onMouseEnter={(e) => {
+ if (isDisplayOnly) {
+ return;
+ }
+ const icon = e.currentTarget.querySelector(`.${styles.menuIcon}`);
+ if (icon) {
+ icon.style.backgroundColor = item.hoverBgColor;
+ }
+ }}
+ onMouseLeave={(e) => {
+ if (isDisplayOnly) {
+ return;
+ }
+ const icon = e.currentTarget.querySelector(`.${styles.menuIcon}`);
+ if (icon) {
+ icon.style.backgroundColor = item.bgColor;
+ }
+ }}
+ >
+
+ );
+ };
+
return (
<>
@@ -1995,44 +2237,21 @@ const CreateComponentModal = ({ visible, onCancel, dispatch, currentEnterprise,
+ {item.iconSrc ? (
+ typeof item.iconSrc === 'function' ? (
+ 
+ )
+ ) : (
+
+ {item.title}
+ {!isDisplayOnly &&
{formatMessage({ id: 'componentOverview.body.CreateComponentModal.select_method' })}
-
- {menuItems.map((item) => (
-
-
-
}
>
-
- }
- >
- {getFieldDecorator('logo', {
- rules: [
- {
- required: false,
- message: formatMessage({ id: 'popover.enterpriseOverview.setUpTeam.input_logo' })
+ {getFieldDecorator('namespace', {
+ initialValue: this.generateEnglishName(form.getFieldValue('team_name')),
+ rules: [{ required: true, validator: this.handleValiateNameSpace }]
+ })()}
+ handleItemClick(item)}
- onMouseEnter={(e) => {
- const icon = e.currentTarget.querySelector(`.${styles.menuIcon}`);
- if (icon) {
- icon.style.backgroundColor = item.hoverBgColor;
- }
- }}
- onMouseLeave={(e) => {
- const icon = e.currentTarget.querySelector(`.${styles.menuIcon}`);
- if (icon) {
- icon.style.backgroundColor = item.bgColor;
- }
- }}
- >
-
diff --git a/src/components/CreateComponentModal/index.less b/src/components/CreateComponentModal/index.less
index 4c6c08280..21b452342 100644
--- a/src/components/CreateComponentModal/index.less
+++ b/src/components/CreateComponentModal/index.less
@@ -88,7 +88,7 @@
.subtitle {
font-size: 14px;
color: @text-color-secondary;
- margin-bottom: 12px;
+ margin-bottom: 16px;
line-height: 1.6;
}
@@ -99,6 +99,65 @@
animation: fadeSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
+.groupSectionList {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ max-height: calc(100vh - 220px);
+ overflow-y: auto;
+ animation: fadeSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+}
+
+.groupSection {
+ padding: 0;
+ border-radius: 0;
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+
+.sectionHeader {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ gap: 8px;
+ margin-bottom: 8px;
+}
+
+.sectionOrder {
+ font-size: 12px;
+ font-weight: 600;
+ letter-spacing: 0.08em;
+ color: @rbd-label-color;
+}
+
+.sectionDesc {
+ font-size: 14px;
+ font-weight: 600;
+ color: @text-color-secondary;
+}
+
+.sectionMenuList {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 8px 12px;
+}
+
+.sectionEmpty {
+ padding: 16px;
+ text-align: center;
+ font-size: 12px;
+ color: @text-color-secondary;
+ background: #f7f9fc;
+ border-radius: 12px;
+}
+
.menuDivider {
display: flex;
align-items: center;
@@ -135,52 +194,53 @@
.menuItem {
display: flex;
align-items: center;
- padding: 15px;
- background: @rbd-background-color;
- border-radius: 12px;
+ min-height: 44px;
+ padding: 9px 10px;
+ background: transparent;
+ border-radius: 10px;
cursor: pointer;
- box-shadow: @rbd-card-shadow;
+ box-shadow: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateY(0);
&:hover {
background: @primary-1;
- box-shadow: @rbd-card-shadow-hover;
- transform: translateY(-2px);
+ box-shadow: none;
+ transform: translateY(-1px);
.menuIcon {
color: @text-color;
background: @primary-2;
- transform: scale(1.08) rotate(2deg);
+ transform: scale(1.06);
}
.menuTitle {
color: @text-color;
- transform: translateX(3px);
+ transform: translateX(2px);
}
.arrowIcon {
color: @text-color;
- transform: translateX(3px);
+ transform: translateX(2px);
}
}
&:active {
background: @primary-1;
- box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.06);
- transform: translateY(0) scale(0.98);
+ box-shadow: none;
+ transform: translateY(0);
}
.menuIcon {
- width: 38px;
- height: 38px;
- border-radius: 12px;
- background: @rbd-background-color;
+ width: 24px;
+ height: 24px;
+ border-radius: 8px;
+ background: transparent;
display: flex;
align-items: center;
justify-content: center;
- margin-right: 14px;
- font-size: 20px;
+ margin-right: 8px;
+ font-size: 16px;
color: @text-color-secondary;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -198,17 +258,80 @@
flex: 1;
font-size: 16px;
color: @text-color;
- font-weight: 500;
+ font-weight: 400;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ line-height: 20px;
}
.arrowIcon {
- font-size: 16px;
+ font-size: 14px;
color: #d9d9d9;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
}
+.menuItemDisabled {
+ cursor: default;
+
+ &:hover {
+ background: transparent;
+ box-shadow: none;
+ transform: translateY(0);
+
+ .menuIcon {
+ color: inherit;
+ background: transparent;
+ transform: none;
+ }
+
+ .menuTitle {
+ color: @text-color;
+ transform: none;
+ }
+ }
+
+ &:active {
+ transform: translateY(0);
+ box-shadow: none;
+ }
+}
+
+.menuItemRepository {
+ min-height: 76px;
+ padding: 18px 20px;
+ background: #ffffff;
+ border-radius: 12px;
+ border: 1px solid fade(@border-color-base, 90%);
+
+ &:hover {
+ border-color: fade(@primary-color, 36%);
+ }
+
+ .menuIcon {
+ width: 40px;
+ height: 40px;
+ margin-right: 14px;
+ border-radius: 12px;
+ font-size: 20px;
+ }
+
+ .menuTitle {
+ font-size: 15px;
+ font-weight: 500;
+ line-height: 22px;
+ }
+
+ .arrowIcon {
+ font-size: 16px;
+ }
+}
+
+@media (max-width: 640px) {
+ .sectionMenuList {
+ grid-template-columns: 1fr;
+ }
+}
+
.loadingWrapper {
display: flex;
align-items: center;
@@ -309,6 +432,7 @@
}
}
+
.pluginContent {
width: 100%;
height: 100%;
diff --git a/src/components/CreateTeam/index.js b/src/components/CreateTeam/index.js
index 135c7a9da..55d921123 100644
--- a/src/components/CreateTeam/index.js
+++ b/src/components/CreateTeam/index.js
@@ -1,4 +1,4 @@
-import { Button, Form, Input, Modal, Select, Upload, Icon } from 'antd';
+import { Button, Form, Input, Modal, Select, Table, Tabs, Upload, Icon } from 'antd';
import { connect } from 'dva';
import React, { Fragment, PureComponent } from 'react';
import { FormattedMessage } from 'umi';
@@ -11,8 +11,11 @@ import styles from './index.less';
const FormItem = Form.Item;
const { Option } = Select;
-@connect(({ loading }) => ({
- loading: loading.effects['teamControl/createTeam']
+const { TabPane } = Tabs;
+
+@connect(({ loading, teamControl }) => ({
+ loading: loading.effects['teamControl/createTeam'],
+ clusterNamespaces: teamControl.clusterNamespaces
}))
@Form.create()
class CreateTeam extends PureComponent {
@@ -21,9 +24,13 @@ class CreateTeam extends PureComponent {
this.state = {
regions: [],
regionLoading: true,
- imageBase64:'',
+ imageBase64: '',
imageUrl: '',
- teamNames: []
+ teamNames: [],
+ activeTab: 'new',
+ selectedRegion: null,
+ selectedNamespace: null,
+ namespaceLoading: false
};
}
componentDidMount() {
@@ -51,54 +58,106 @@ class CreateTeam extends PureComponent {
});
};
// 生成英文名
- generateEnglishName = (name) => {
- if(name != undefined){
+ generateEnglishName = name => {
+ if (name != undefined) {
const { teamNames } = this.state;
- const pinyinName = pinyin(name, {toneType: 'none'}).replace(/\s/g, '');
+ const pinyinName = pinyin(name, { toneType: 'none' }).replace(/\s/g, '');
const cleanedPinyinName = pinyinName.toLowerCase();
if (teamNames && teamNames.length > 0) {
const isExist = teamNames.some(item => item === cleanedPinyinName);
if (isExist) {
- const random = Math.floor(Math.random() * 10000);
+ const random = Math.floor(Math.random() * 10000);
return `${cleanedPinyinName}${random}`;
}
return cleanedPinyinName;
}
return cleanedPinyinName;
}
- return ''
- }
+ return '';
+ };
getUnRelationedApp = ID => {
getAllRegion({ enterprise_id: ID, status: '1' })
.then(data => {
- this.setState({
- regions: (data && data.list) || [],
- regionLoading: false
+ const regions = (data && data.list) || [];
+ this.setState({ regions, regionLoading: false }, () => {
+ // 如果只有一个集群，在 bind tab 下自动选中
+ if (regions.length === 1 && this.state.activeTab === 'bind') {
+ this.loadNamespaces(regions[0].region_name);
+ }
});
})
.catch(() => {
- this.setState({
- regionLoading: false
- });
+ this.setState({ regionLoading: false });
});
};
+
+ handleTabChange = key => {
+ const { dispatch, form } = this.props;
+ this.setState({ activeTab: key, selectedNamespace: null, selectedRegion: null });
+ form.setFieldsValue({ namespace: '' });
+ dispatch({ type: 'teamControl/saveClusterNamespaces', payload: [] });
+
+ // 切换到 bind tab 时，如果只有一个集群，自动选中并加载
+ if (key === 'bind') {
+ const { regions } = this.state;
+ if (regions.length === 1) {
+ this.loadNamespaces(regions[0].region_name);
+ }
+ }
+ };
+
+ loadNamespaces = region => {
+ const { dispatch, form } = this.props;
+ this.setState({ selectedRegion: region, selectedNamespace: null, namespaceLoading: true });
+ form.setFieldsValue({ namespace: '' });
+ dispatch({
+ type: 'teamControl/getClusterNamespaces',
+ payload: { region },
+ callback: () => this.setState({ namespaceLoading: false })
+ });
+ };
+
+ handleNamespaceSelect = record => {
+ const { form } = this.props;
+ this.setState({ selectedNamespace: record.name });
+ form.setFieldsValue({ namespace: record.name });
+ };
+
handleSubmit = () => {
const { onOk, form, handleGuideStep } = this.props;
- const {imageUrl} = this.state
- if (handleGuideStep && handleGuideStep) {
+ const { activeTab, selectedNamespace, selectedRegion } = this.state;
+ const { imageUrl } = this.state;
+
+ if (handleGuideStep) {
handleGuideStep(3);
}
- form.validateFields((err, values) => {
-
+
+ if (activeTab === 'bind') {
+ form.validateFields(['team_name_bind'], (err, values) => {
+ if (err || !selectedNamespace || !onOk) {
+ return;
+ }
+ onOk({
+ namespace: selectedNamespace,
+ useable_regions: [selectedRegion],
+ bind_existing_namespace: true,
+ team_name: values.team_name_bind
+ });
+ });
+ return;
+ }
+
+ form.validateFields(['team_name', 'namespace', 'useable_regions', 'logo'], (err, values) => {
if (!err && onOk) {
- if(values.logo){
- values.logo = imageUrl
+ if (values.logo) {
+ values.logo = imageUrl;
}
onOk(values);
}
});
};
+
// 团队命名空间的检验
handleValiateNameSpace = (_, value, callback) => {
if (!value) {
@@ -107,9 +166,7 @@ class CreateTeam extends PureComponent {
if (value && value.length <= 32) {
const Reg = /^[a-z]([-a-z0-9]*[a-z0-9])?$/;
if (!Reg.test(value)) {
- return callback(
- new Error(`${formatMessage({ id: 'placeholder.nameSpaceReg' })}`)
- );
+ return callback(new Error(`${formatMessage({ id: 'placeholder.nameSpaceReg' })}`));
}
callback();
}
@@ -126,24 +183,17 @@ class CreateTeam extends PureComponent {
if (info.file.status === 'done') {
this.setState({
imageUrl:
- info.file &&
- info.file.response &&
- info.file.response.data &&
- info.file.response.data.bean &&
- info.file.response.data.bean.file_url,
- loading: false
+ info.file && info.file.response && info.file.response.data && info.file.response.data.bean && info.file.response.data.bean.file_url,
+ loading: false
});
-
- this.getLogoBase64(info.file.originFileObj, imageBase64 =>
- this.setState({
- imageBase64
- })
- );
+ this.getLogoBase64(info.file.originFileObj, imageBase64 => this.setState({ imageBase64 }));
}
};
+
handleLogoRemove = () => {
this.setState({ imageUrl: '', imageBase64: '' });
};
+
getLogoBase64 = (img, callback) => {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
@@ -151,42 +201,45 @@ class CreateTeam extends PureComponent {
};
render() {
- const {
- onCancel,
- form,
- loading,
- title,
- guideStep,
- handleNewbieGuiding,
- enterprise_id,
- } = this.props;
+ const { onCancel, form, loading, title, guideStep, handleNewbieGuiding, enterprise_id, clusterNamespaces } = this.props;
const token = cookie.get('token');
const { getFieldDecorator } = form;
- const { regions, regionLoading, imageBase64, imageUrl } = this.state;
+ const { regions, regionLoading, imageBase64, imageUrl, activeTab, selectedRegion, selectedNamespace, namespaceLoading } = this.state;
const myheaders = {};
if (token) {
myheaders.Authorization = `GRJWT ${token}`;
}
const formItemLayout = {
- labelCol: {
- xs: { span: 24 },
- sm: { span: 8 }
- },
- wrapperCol: {
- xs: { span: 24 },
- sm: { span: 14 }
- }
+ labelCol: { xs: { span: 24 }, sm: { span: 8 } },
+ wrapperCol: { xs: { span: 24 }, sm: { span: 14 } }
};
const uploadButton = (
- {item.iconSrc ? (
- typeof item.iconSrc === 'function' ? (
-
) : (
-
+ {mainSections.map(section => (
+
@@ -2250,47 +2469,7 @@ const CreateComponentModal = ({ visible, onCancel, dispatch, currentEnterprise,
{item.dividerText}
+
))}
+ {section.label}
- {item.title}
-
+ {section.items.map(renderMenuItem)}
+
+ ) : (
+
+ {formatMessage({ id: 'teamAdd.create.null_data' })}
+
+ )}
handleItemClick(item)}
- onMouseEnter={(e) => {
- if (item.hoverBgColor) {
- const icon = e.currentTarget.querySelector(`.${styles.menuIcon}`);
- if (icon) {
- icon.style.backgroundColor = item.hoverBgColor;
- }
- }
- }}
- onMouseLeave={(e) => {
- if (item.bgColor) {
- const icon = e.currentTarget.querySelector(`.${styles.menuIcon}`);
- if (icon) {
- icon.style.backgroundColor = item.bgColor;
- }
- }
- }}
- >
-
+ renderMenuItem(item)
)
))}
- {item.iconSrc ? (
- typeof item.iconSrc === 'function' ? (
-
- {item.title}
- {formatMessage({id:'teamOverview.uploadIcon'})}
+ {formatMessage({ id: 'teamOverview.uploadIcon' })}
+
}
- ]
- })(
- {logo}
}
- {pluginSVg && 
}
+ {pluginSVg && (
+
+ {buttonNode}
+
+ );
+ }
+ return buttonNode;
} else {
return (
@@ -853,10 +863,11 @@ export default class app extends Component {
};
handleJump = target => {
const { dispatch } = this.props;
+ const path = target === 'upgrade'
+ ? `/team/${globalUtil.getCurrTeamName()}/region/${globalUtil.getCurrRegionName()}/apps/${globalUtil.getAppID()}/version`
+ : `/team/${globalUtil.getCurrTeamName()}/region/${globalUtil.getCurrRegionName()}/apps/${globalUtil.getAppID()}/${target}`;
dispatch(
- routerRedux.push(
- `/team/${globalUtil.getCurrTeamName()}/region/${globalUtil.getCurrRegionName()}/apps/${globalUtil.getAppID()}/${target}`
- )
+ routerRedux.push(path)
);
};
render() {
diff --git a/src/components/SlidePanel/components/app.less b/src/components/SlidePanel/components/app.less
index ba2889ed0..4b1e999c8 100644
--- a/src/components/SlidePanel/components/app.less
+++ b/src/components/SlidePanel/components/app.less
@@ -63,6 +63,17 @@
}
.header_right {
+ .operationButtonWrap {
+ display: inline-block;
+ margin-right: 8px;
+ }
+
+ .snapshotReadyButton {
+ color: #fff !important;
+ background: linear-gradient(135deg, #ff9b3d 0%, #ff6a00 100%) !important;
+ border-color: transparent !important;
+ box-shadow: 0 12px 24px rgba(255, 122, 26, 0.28) !important;
+ }
:global {
.ant-btn {
@@ -267,4 +278,4 @@
}
}
-}
\ No newline at end of file
+}
diff --git a/src/components/SlidePanel/components/components.js b/src/components/SlidePanel/components/components.js
index 1091b167c..3cd2340ae 100644
--- a/src/components/SlidePanel/components/components.js
+++ b/src/components/SlidePanel/components/components.js
@@ -383,6 +383,10 @@ class Main extends PureComponent {
const { componentTimer, isShowKubeBlocksComponent } = this.state;
const { team_name, app_alias } = this.fetchParameter();
+ if (!app_alias) {
+ return;
+ }
+
dispatch({
type: 'appControl/fetchComponentState',
payload: {
@@ -561,6 +565,11 @@ class Main extends PureComponent {
serviceAlias
} = this.fetchParameter();
const prefixUrl = this.fetchPrefixUrl();
+
+ if (!app_alias) {
+ return;
+ }
+
dispatch({
type: 'appControl/fetchDetail',
payload: {
@@ -999,7 +1008,7 @@ class Main extends PureComponent {
this.handleDeploy(fieldsValue.group_version);
} else if (key === 'upgrade') {
dispatch(
- routerRedux.push(`${this.fetchPrefixUrl()}apps/${group_id}/upgrade`)
+ routerRedux.push(`${this.fetchPrefixUrl()}apps/${group_id}/version?panel=source-upgrade`)
);
}
}
diff --git a/src/components/Team/TeamEventList/index.js b/src/components/Team/TeamEventList/index.js
index 622ce84d8..ba9659e73 100644
--- a/src/components/Team/TeamEventList/index.js
+++ b/src/components/Team/TeamEventList/index.js
@@ -1,5 +1,5 @@
/* eslint-disable camelcase */
-import { List, Spin, Row, Col } from 'antd';
+import { List, Pagination, Spin } from 'antd';
import { connect } from 'dva';
import { Link } from 'dva/router';
import React, { PureComponent } from 'react';
@@ -268,63 +268,81 @@ export default class EventList extends PureComponent {
onChange: this.handlePageChange
};
+ const overviewItems = [
+ {
+ key: 'app',
+ title: formatMessage({ id: 'versionUpdata_6_1.appNum' }),
+ value: isTeamOverview ? index?.overviewInfo?.team_app_num || 0 : '**'
+ },
+ {
+ key: 'service',
+ title: formatMessage({ id: 'versionUpdata_6_1.serviceNum' }),
+ value: isTeamOverview ? index?.overviewInfo?.team_service_num || 0 : '**'
+ },
+ {
+ key: 'cpu',
+ title: `${formatMessage({ id: 'versionUpdata_6_1.cpuUsage' })} (${this.handlUnit(
+ 'cpu',
+ index?.overviewInfo?.cpu_usage,
+ 'm'
+ )})`,
+ value: isTeamOverview
+ ? this.handlUnit('cpu', index?.overviewInfo?.cpu_usage) || 0
+ : '**'
+ },
+ {
+ key: 'memory',
+ title: `${formatMessage({ id: 'versionUpdata_6_1.memoryUsage' })} (${this.handlUnit(
+ 'memory',
+ index?.overviewInfo?.memory_usage,
+ 'MB'
+ )})`,
+ value: isTeamOverview
+ ? this.handlUnit('memory', index?.overviewInfo?.memory_usage) || 0
+ : '**'
+ },
+ {
+ key: 'storage',
+ title: showStorageUsed
+ ? `${formatMessage({ id: 'versionUpdata_6_1.storageUsage' })}(${storageUsed?.unit})`
+ : `${formatMessage({ id: 'versionUpdata_6_1.diskUsage' })}(GB)`,
+ value: isTeamOverview
+ ? showStorageUsed
+ ? storageUsed?.value
+ : index?.overviewInfo?.disk_usage
+ : '**'
+ }
+ ];
+
return (
+ {this.renderPluginIcon(pluginSVg)}
+
+ )}
{titleSvg && {titleSvg}
}
{title && {title}
} {action &&{action}
}
@@ -232,4 +249,4 @@ export default class PageHeader extends PureComponent {
);
}
-}
\ No newline at end of file
+}
diff --git a/src/components/PageHeader/index.less b/src/components/PageHeader/index.less
index d4ca48573..f2e4467cd 100644
--- a/src/components/PageHeader/index.less
+++ b/src/components/PageHeader/index.less
@@ -186,8 +186,11 @@
}
}
.Plugin_Icon{
+ display: flex;
+ align-items: center;
margin-right: 6px;
- img{
+ img,
+ svg {
width: 20px;
height: 20px;
}
@@ -248,4 +251,4 @@
}
}
}
-}
\ No newline at end of file
+}
diff --git a/src/components/SlidePanel/components/app.js b/src/components/SlidePanel/components/app.js
index 5023d3e17..00f1a13bb 100644
--- a/src/components/SlidePanel/components/app.js
+++ b/src/components/SlidePanel/components/app.js
@@ -70,7 +70,8 @@ export default class app extends Component {
},
showComponentList: false,
showCreateComponentModal: false,
- headerLeftExpanded: false
+ headerLeftExpanded: false,
+
};
}
componentDidMount() {
@@ -88,7 +89,7 @@ export default class app extends Component {
};
componentWillUnmount() {
this.closeTimer();
- }
+ };
// 获取集群架构信息
handleArchCpuInfo = () => {
const { dispatch } = this.props;
@@ -421,7 +422,6 @@ export default class app extends Component {
},
appPermissions: {
isAppOverview,
- isAppRelease,
isAppUpgrade,
isAppGatewayMonitor,
isAppRouteManage,
@@ -443,21 +443,21 @@ export default class app extends Component {
disabled: false,
onClick: () => this.handleOpenAddComponentOrAppDetail('addComponent')
},
+ {
+ key: 'appSnapshot',
+ type: 'button',
+ icon: 'camera',
+ text: '快照',
+ show: !isSlidePanel,
+ disabled: false,
+ onClick: () => this.handleJump('version')
+ },
{
key: 'visitor',
show: linkList && linkList.length > 0,
type: 'component', // 特殊标识组件类型
component:
{/* 团队概览部分 */}
{(index?.overviewInfo?.region_health || loadingOverview) && (
+
+ );
+}
diff --git a/src/components/Topological/DependencyConfigModal.less b/src/components/Topological/DependencyConfigModal.less
new file mode 100644
index 000000000..0cbb37ccc
--- /dev/null
+++ b/src/components/Topological/DependencyConfigModal.less
@@ -0,0 +1,287 @@
+.dependencyConfigModal {
+ :global {
+ .ant-modal {
+ max-width: calc(100vw - 32px);
+ }
+
+ .ant-modal-body {
+ padding: 0;
+ }
+
+ .ant-modal-footer {
+ padding: 14px 18px;
+ }
+
+ .ant-alert {
+ border-radius: 10px;
+ }
+
+ .ant-tabs-bar {
+ margin-bottom: 10px;
+ }
+ }
+}
+
+.header {
+ padding: 16px 18px 14px;
+ border-bottom: 1px solid @border-color-base;
+}
+
+.titleRow {
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+}
+
+.titleIcon {
+ margin-right: 8px;
+ color: @primary-color;
+ font-size: 18px;
+ line-height: 1;
+}
+
+.titleText {
+ color: @primary-color;
+ font-size: @rbd-sub-title-size;
+ line-height: @rbd-sub-title-line-height;
+ font-weight: 600;
+}
+
+.pathRow {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ color: @rbd-title-big-color;
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 600;
+}
+
+.pathArrow {
+ margin: 0 8px;
+ color: @rbd-auxiliary-color-secondary;
+ font-size: 16px;
+}
+
+.summary {
+ margin-top: 6px;
+ color: @rbd-content-color-secondary;
+ font-size: @rbd-auxiliary-size;
+ line-height: @rbd-auxiliary-line-height;
+}
+
+.loadingWrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 220px;
+}
+
+.content {
+ padding: 14px 18px 2px;
+}
+
+.aliasCard {
+ margin-bottom: 14px;
+ padding: 14px 16px;
+ border: 1px solid fade(@primary-color, 14%);
+ border-radius: 12px;
+ background: fade(@primary-color, 8%);
+}
+
+.aliasTitle {
+ color: @primary-color;
+ font-size: @rbd-sub-title-size;
+ line-height: @rbd-sub-title-line-height;
+ font-weight: 600;
+}
+
+.aliasDesc {
+ margin-top: 4px;
+ color: @primary-color;
+ font-size: @rbd-auxiliary-size;
+ line-height: @rbd-auxiliary-line-height;
+}
+
+.aliasForm {
+ display: flex;
+ gap: 10px;
+ margin-top: 10px;
+}
+
+.portField {
+ width: 170px;
+}
+
+.aliasField {
+ flex: 1;
+}
+
+.fieldLabel {
+ margin-bottom: 6px;
+ color: @rbd-sub-title-color;
+ font-size: @rbd-auxiliary-size;
+ line-height: @rbd-auxiliary-line-height;
+ font-weight: 600;
+}
+
+.aliasHint {
+ margin-top: 6px;
+ color: @rbd-auxiliary-color-secondary;
+ font-size: @rbd-auxiliary-size;
+ line-height: @rbd-auxiliary-line-height;
+}
+
+.emptyTip {
+ margin-top: 8px;
+ color: @warning-color;
+ font-size: @rbd-auxiliary-size;
+ line-height: @rbd-auxiliary-line-height;
+}
+
+.panelGrid {
+ display: flex;
+ gap: 12px;
+ align-items: stretch;
+}
+
+.previewPanel,
+.codePanel {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+}
+
+.panelTitleRow {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 8px;
+}
+
+.panelTitle {
+ display: flex;
+ align-items: center;
+ color: @rbd-title-big-color;
+ font-size: @rbd-sub-title-size;
+ line-height: @rbd-sub-title-line-height;
+ font-weight: 600;
+}
+
+.panelTitle :global(.anticon) {
+ margin-right: 8px;
+}
+
+.panelExtra {
+ color: @rbd-auxiliary-color-secondary;
+ font-size: @rbd-auxiliary-size;
+ line-height: @rbd-auxiliary-line-height;
+}
+
+.successIcon {
+ color: @success-color;
+}
+
+.codeIcon {
+ color: @primary-color;
+}
+
+.envBlock {
+ flex: 1;
+ min-height: 170px;
+ padding: 14px 16px;
+ border-radius: 12px;
+ background: #111a33;
+ box-shadow: @rbd-min-card-shadow;
+}
+
+.envLine {
+ display: flex;
+ align-items: baseline;
+ margin-bottom: 10px;
+ font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
+ font-size: 13px;
+ line-height: 20px;
+}
+
+.envLine:last-child {
+ margin-bottom: 0;
+}
+
+.envName {
+ color: #4ade80;
+ font-weight: 600;
+}
+
+.envSplit {
+ margin: 0 6px;
+ color: #cbd5e1;
+}
+
+.envValue {
+ color: #f8fafc;
+}
+
+.emptyEnv {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 170px;
+ padding: 14px 16px;
+ border: 1px dashed @border-color-base;
+ border-radius: 12px;
+ color: @rbd-auxiliary-color-secondary;
+ font-size: @rbd-auxiliary-size;
+ line-height: @rbd-auxiliary-line-height;
+}
+
+.notice {
+ margin-top: 10px;
+}
+
+.codeBlock {
+ flex: 1;
+ min-height: 220px;
+ padding: 12px 14px;
+ border: 1px solid @border-color-base;
+ border-radius: 12px;
+ background: #f8fafc;
+ overflow: auto;
+}
+
+.codeBlock pre {
+ margin: 0;
+ color: @rbd-content-color;
+ font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
+ font-size: 13px;
+ line-height: 20px;
+ white-space: pre-wrap;
+ word-break: break-word;
+}
+
+@media (max-width: 768px) {
+ .aliasForm,
+ .panelGrid {
+ display: block;
+ }
+
+ .codePanel {
+ margin-top: 12px;
+ }
+
+ .portField {
+ width: 100%;
+ margin-bottom: 10px;
+ }
+
+ .pathRow {
+ font-size: @rbd-sub-title-size;
+ line-height: @rbd-sub-title-line-height;
+ }
+
+ .pathArrow {
+ font-size: 14px;
+ }
+}
diff --git a/src/components/Topological/index.js b/src/components/Topological/index.js
index dce4cec3f..fea62a031 100644
--- a/src/components/Topological/index.js
+++ b/src/components/Topological/index.js
@@ -19,6 +19,7 @@ import React, { Fragment, PureComponent } from 'react';
import { formatMessage } from '@/utils/intl';
import apiconfig from '../../../config/api.config';
import ConfirmModal from '../ConfirmModal'
+import DependencyConfigModal from './DependencyConfigModal';
import globalUtil from '../../utils/global';
import roleUtil from '../../utils/role';
import dateUtil from '../../utils/date-util';
@@ -27,8 +28,32 @@ import teamUtil from '../../utils/team';
import userUtil from '../../utils/user';
import list from '@/models/list';
import styless from '../../components/CreateTeam/index.less';
-import { addRelationedApp, removeRelationedApp } from '../../services/app';
+import {
+ addRelationedApp,
+ editPortAlias,
+ getOuterEnvs,
+ getPorts,
+ removeRelationedApp,
+ updateRolling
+} from '../../services/app';
import styles from './index.less'
+
+const getDefaultDependencyConfigState = () => ({
+ dependencyConfigVisible: false,
+ dependencyConfigLoading: false,
+ dependencyConfigSubmitting: false,
+ dependencyConfigSource: null,
+ dependencyConfigTarget: null,
+ dependencyConfigPorts: [],
+ dependencyConfigAllEnvs: [],
+ dependencyConfigSelectedPort: '',
+ dependencyConfigAlias: '',
+ dependencyConfigInitialAliases: {},
+ dependencyConfigActiveLanguage: 'java',
+ dependencyConfigShouldUpdate: true
+});
+
+const escapeRegExp = (value = '') => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@connect(
({ user, appControl, global, teamControl, enterprise, loading }) => ({
currUser: user.currentUser,
@@ -68,12 +93,14 @@ class Index extends React.Component {
teamName: '',
regionName: '',
build: false,
+ ...getDefaultDependencyConfigState()
}
+
componentWillMount() {
const that = this
const teamName = globalUtil.getCurrTeamName();
const regionName = globalUtil.getCurrRegionName();
- const { group_id: groupId, dispatch, apps } = this.props;
+ const { group_id: groupId, dispatch } = this.props;
const appID = globalUtil.getAppID();
const componentID = globalUtil.getSlidePanelComponentID();
const timestamp = new Date().getTime();
@@ -120,7 +147,7 @@ class Index extends React.Component {
)
)
} else {
- const app = apps.find(app => app.service_alias === componentID);
+ const app = (that.props.apps || []).find(app => app.service_alias === componentID);
if (app?.status === "creating" && app.service_source !== 'kubeblocks') {
dispatch(
routerRedux.push(
@@ -311,26 +338,14 @@ class Index extends React.Component {
}).then(res => {
if (res && res.status_code === 200) {
- notification.success({ message: formatMessage({ id: 'notification.success.Depend_add' }) });
- dispatch(
- routerRedux.push(
- `/team/${teamName}/region/${regionName}/apps/${appID}/overview?refresh=${timestamp}`
- )
- );
-
- // 检查是否需要更新组件
- if (sourceShape !== 'undeploy' && sourceShape !== 'closed' && sourceShape !== 'stopping') {
- Modal.confirm({
- title: formatMessage({ id: 'notification.success.Depend_add_need_update' }),
- okText: formatMessage({ id: 'button.update' }),
- onOk: () => {
- dispatch({
- type: 'appControl/putUpdateRolling',
- payload: { team_name: teamName, app_alias: sourceServiceAlias }
- });
- }
- });
- }
+ that.openDependencyConfigModal({
+ sourceServiceAlias,
+ sourceServiceCname,
+ sourceShape,
+ targetServiceId: targetNodeId,
+ targetServiceAlias,
+ targetServiceCname
+ });
} else if (res && res.status_code === 201) {
// 需要选择端口
if (res.list && res.list.length > 0) {
@@ -342,12 +357,15 @@ class Index extends React.Component {
container_port: res.list[0]
}).then(portRes => {
if (portRes && portRes.status_code === 200) {
- notification.success({ message: formatMessage({ id: 'notification.success.Depend_add' }) });
- dispatch(
- routerRedux.push(
- `/team/${teamName}/region/${regionName}/apps/${appID}/overview?refresh=${timestamp}`
- )
- );
+ that.openDependencyConfigModal({
+ sourceServiceAlias,
+ sourceServiceCname,
+ sourceShape,
+ targetServiceId: targetNodeId,
+ targetServiceAlias,
+ targetServiceCname,
+ preferredPort: res.list[0]
+ });
}
});
}
@@ -459,6 +477,337 @@ class Index extends React.Component {
}
}
+ getTargetAppDetail = (targetServiceId, targetServiceAlias) => {
+ const currentApps = this.props.apps || [];
+ return (
+ currentApps.find(app => `${app.service_id}` === `${targetServiceId}`) ||
+ currentApps.find(app => app.service_alias === targetServiceAlias) ||
+ null
+ );
+ };
+
+ getDependencyDisplayName = (component, fallbackCname, fallbackAlias) => {
+ return (
+ (component && (component.service_cname || component.service_alias)) ||
+ fallbackCname ||
+ fallbackAlias ||
+ ''
+ );
+ };
+
+ getSelectablePorts = (ports = []) => {
+ const openedInnerPorts = ports.filter(port => port.is_inner_service);
+ return openedInnerPorts.length ? openedInnerPorts : ports;
+ };
+
+ getSelectedDependencyPort = () => {
+ const { dependencyConfigPorts, dependencyConfigSelectedPort } = this.state;
+ return dependencyConfigPorts.find(
+ port => `${port.container_port}` === `${dependencyConfigSelectedPort}`
+ );
+ };
+
+ getDependencyPreviewEnvs = () => {
+ const {
+ dependencyConfigAllEnvs,
+ dependencyConfigAlias,
+ dependencyConfigSelectedPort
+ } = this.state;
+ const selectedPort = this.getSelectedDependencyPort();
+
+ if (!selectedPort) {
+ return [];
+ }
+
+ const exactPortEnvs = dependencyConfigAllEnvs.filter(
+ env => `${env.container_port}` === `${dependencyConfigSelectedPort}`
+ );
+ const sharedEnvs = dependencyConfigAllEnvs.filter(
+ env => Number(env.container_port) === 0
+ );
+
+ const previewEnvs = exactPortEnvs.length
+ ? exactPortEnvs.concat(
+ sharedEnvs.filter(
+ env =>
+ !exactPortEnvs.some(item => item.attr_name === env.attr_name)
+ )
+ )
+ : dependencyConfigAllEnvs;
+
+ const originalAlias = selectedPort.port_alias || '';
+ const nextAlias = dependencyConfigAlias || originalAlias;
+ const aliasPattern = originalAlias
+ ? new RegExp(`^${escapeRegExp(originalAlias)}`)
+ : null;
+
+ return previewEnvs.map(env => {
+ const attrName = env.attr_name || '';
+ return {
+ ...env,
+ attr_name:
+ aliasPattern && attrName.indexOf(`${originalAlias}_`) === 0
+ ? attrName.replace(aliasPattern, nextAlias)
+ : attrName
+ };
+ });
+ };
+
+ openDependencyConfigModal = ({
+ sourceServiceAlias,
+ sourceServiceCname,
+ sourceShape,
+ targetServiceId,
+ targetServiceAlias,
+ targetServiceCname,
+ preferredPort
+ }) => {
+ const teamName = globalUtil.getCurrTeamName();
+ const targetApp = this.getTargetAppDetail(targetServiceId, targetServiceAlias);
+ const resolvedTargetAlias =
+ (targetApp && targetApp.service_alias) || targetServiceAlias;
+
+ if (!resolvedTargetAlias) {
+ notification.warning({
+ message: formatMessage({ id: 'topology.dependency_config.load_failed' })
+ });
+ return;
+ }
+
+ const dependencyConfigSource = {
+ service_alias: sourceServiceAlias,
+ displayName: this.getDependencyDisplayName(
+ null,
+ sourceServiceCname,
+ sourceServiceAlias
+ ),
+ shape: sourceShape
+ };
+
+ const dependencyConfigTarget = {
+ ...(targetApp || {}),
+ service_alias: resolvedTargetAlias,
+ displayName: this.getDependencyDisplayName(
+ targetApp,
+ targetServiceCname,
+ resolvedTargetAlias
+ )
+ };
+
+ this.setState({
+ ...getDefaultDependencyConfigState(),
+ dependencyConfigVisible: true,
+ dependencyConfigLoading: true,
+ dependencyConfigSource,
+ dependencyConfigTarget,
+ dependencyConfigShouldUpdate:
+ sourceShape !== 'undeploy' &&
+ sourceShape !== 'closed' &&
+ sourceShape !== 'stopping'
+ });
+
+ Promise.all([
+ getPorts({
+ team_name: teamName,
+ app_alias: resolvedTargetAlias
+ }).catch(() => null),
+ getOuterEnvs({
+ team_name: teamName,
+ app_alias: resolvedTargetAlias,
+ page: 1,
+ page_size: 1000,
+ env_name: ''
+ }).catch(() => null)
+ ]).then(([portsRes, envRes]) => {
+ const rawPorts = portsRes && portsRes.list ? portsRes.list : [];
+ const dependencyConfigPorts = this.getSelectablePorts(rawPorts);
+ const dependencyConfigInitialAliases = dependencyConfigPorts.reduce(
+ (result, port) => {
+ result[`${port.container_port}`] = port.port_alias || '';
+ return result;
+ },
+ {}
+ );
+
+ let dependencyConfigSelectedPort = '';
+
+ if (
+ preferredPort &&
+ dependencyConfigPorts.some(
+ port => `${port.container_port}` === `${preferredPort}`
+ )
+ ) {
+ dependencyConfigSelectedPort = `${preferredPort}`;
+ } else if (dependencyConfigPorts.length) {
+ dependencyConfigSelectedPort = `${dependencyConfigPorts[0].container_port}`;
+ }
+
+ this.setState({
+ dependencyConfigLoading: false,
+ dependencyConfigPorts,
+ dependencyConfigAllEnvs: envRes && envRes.list ? envRes.list : [],
+ dependencyConfigInitialAliases,
+ dependencyConfigSelectedPort,
+ dependencyConfigAlias:
+ dependencyConfigInitialAliases[dependencyConfigSelectedPort] || ''
+ });
+ });
+ };
+
+ closeDependencyConfigModal = () => {
+ this.setState(getDefaultDependencyConfigState());
+ };
+
+ refreshTopologyOverview = () => {
+ const teamName = globalUtil.getCurrTeamName();
+ const regionName = globalUtil.getCurrRegionName();
+ const { dispatch, group_id: groupId } = this.props;
+ const timestamp = new Date().getTime();
+
+ dispatch(
+ routerRedux.push(
+ `/team/${teamName}/region/${regionName}/apps/${groupId}/overview?refresh=${timestamp}`
+ )
+ );
+ };
+
+ handleDependencyConfigCancel = () => {
+ this.closeDependencyConfigModal();
+ this.refreshTopologyOverview();
+ };
+
+ handleDependencyPortChange = value => {
+ const { dependencyConfigInitialAliases } = this.state;
+ this.setState({
+ dependencyConfigSelectedPort: value,
+ dependencyConfigAlias: dependencyConfigInitialAliases[value] || '',
+ dependencyConfigActiveLanguage: 'java'
+ });
+ };
+
+ handleDependencyAliasChange = e => {
+ this.setState({
+ dependencyConfigAlias: e.target.value
+ });
+ };
+
+ handleDependencyLanguageChange = dependencyConfigActiveLanguage => {
+ this.setState({ dependencyConfigActiveLanguage });
+ };
+
+ handleDependencyConfigSubmit = () => {
+ const teamName = globalUtil.getCurrTeamName();
+ const selectedPort = this.getSelectedDependencyPort();
+ const {
+ dependencyConfigAlias,
+ dependencyConfigInitialAliases,
+ dependencyConfigShouldUpdate,
+ dependencyConfigSource,
+ dependencyConfigTarget,
+ dependencyConfigPorts
+ } = this.state;
+
+ if (!selectedPort || !dependencyConfigTarget || !dependencyConfigSource) {
+ return;
+ }
+
+ const nextAlias = (dependencyConfigAlias || '').trim();
+
+ if (!nextAlias) {
+ notification.warning({
+ message: formatMessage({ id: 'topology.dependency_config.alias_required' })
+ });
+ return;
+ }
+
+ if (!/^[A-Z][A-Z0-9_]*$/.test(nextAlias)) {
+ notification.warning({
+ message: formatMessage({ id: 'topology.dependency_config.alias_invalid' })
+ });
+ return;
+ }
+
+ const portKey = `${selectedPort.container_port}`;
+ const originalAlias = dependencyConfigInitialAliases[portKey] || '';
+ const aliasChanged = nextAlias !== originalAlias;
+
+ this.setState({ dependencyConfigSubmitting: true });
+
+ const saveAliasRequest = aliasChanged
+ ? editPortAlias({
+ team_name: teamName,
+ app_alias: dependencyConfigTarget.service_alias,
+ k8s_service_name: selectedPort.k8s_service_name,
+ port: selectedPort.container_port,
+ port_alias: nextAlias
+ })
+ : Promise.resolve({ status_code: 200 });
+
+ saveAliasRequest
+ .then(res => {
+ if (!res || (res.status_code && res.status_code >= 400)) {
+ throw { step: 'edit' };
+ }
+
+ if (!dependencyConfigShouldUpdate) {
+ return { updated: false };
+ }
+
+ return updateRolling({
+ team_name: teamName,
+ app_alias: dependencyConfigSource.service_alias
+ }).then(updateRes => {
+ if (!updateRes || (updateRes.status_code && updateRes.status_code >= 400)) {
+ throw { step: 'update' };
+ }
+ return { updated: true };
+ });
+ })
+ .then(({ updated }) => {
+ const nextPorts = aliasChanged
+ ? dependencyConfigPorts.map(port => {
+ if (`${port.container_port}` !== portKey) {
+ return port;
+ }
+ return {
+ ...port,
+ port_alias: nextAlias
+ };
+ })
+ : dependencyConfigPorts;
+
+ this.setState({
+ dependencyConfigPorts: nextPorts,
+ dependencyConfigInitialAliases: {
+ ...dependencyConfigInitialAliases,
+ [portKey]: nextAlias
+ },
+ dependencyConfigSubmitting: false
+ });
+
+ notification.success({
+ message: formatMessage({
+ id: updated
+ ? 'notification.success.operationUpdata'
+ : 'notification.success.succeeded'
+ })
+ });
+
+ this.closeDependencyConfigModal();
+ this.refreshTopologyOverview();
+ })
+ .catch(error => {
+ this.setState({ dependencyConfigSubmitting: false });
+ notification.error({
+ message: formatMessage({
+ id: error && error.step === 'edit'
+ ? 'notification.error.edit'
+ : 'notification.error.update'
+ })
+ });
+ });
+ };
+
// 删除
cancelDeleteApp = (isOpen = true) => {
this.setState({ flag: false });
@@ -603,13 +952,41 @@ class Index extends React.Component {
render() {
const { deleteAppLoading, reStartLoading, stopLoading, startLoading, updateRollingLoading, flagHeight, iframeHeight } = this.props
- const { flag, promptModal, closes, start, updated, keyes, srcUrl, teamName, regionName, appAlias, build } = this.state
+ const {
+ flag,
+ promptModal,
+ closes,
+ start,
+ updated,
+ keyes,
+ srcUrl,
+ teamName,
+ regionName,
+ appAlias,
+ build,
+ dependencyConfigVisible,
+ dependencyConfigLoading,
+ dependencyConfigSubmitting,
+ dependencyConfigSource,
+ dependencyConfigTarget,
+ dependencyConfigPorts,
+ dependencyConfigSelectedPort,
+ dependencyConfigAlias,
+ dependencyConfigActiveLanguage,
+ dependencyConfigShouldUpdate
+ } = this.state
const codeObj = {
start: formatMessage({ id: 'topology.Topological.start' }),
stop: formatMessage({ id: 'topology.Topological.stop' }),
rolling: formatMessage({ id: 'topology.Topological.rolling' }),
build: formatMessage({ id: 'topology.Topological.build' })
};
+ const dependencySelectedPort = this.getSelectedDependencyPort();
+ const dependencyPreviewEnvs = this.getDependencyPreviewEnvs();
+ const canSubmitDependencyConfig =
+ !dependencyConfigLoading &&
+ !!dependencySelectedPort &&
+ !!(dependencyConfigAlias || '').trim();
return (
// eslint-disable-next-line jsx-a11y/iframe-has-title
未知 ;
+ }
+ return (
+
+ {upgradeInfoUtil.getStatusCNS(status)}
+
+ );
+ };
+
+ renderPersonalOverview = () => {
+ const personalTemplate = this.getPersonalTemplate();
+ const latestPublish = this.getLatestPublishRecord();
+ const { overview } = this.state;
+ const changeSummary = overview.change_summary || {};
+ return (
+
+
+ );
+ };
+
+ renderUpgradeBanner = () => {
+ const upgradeableSources = this.getUpgradeableSources();
+ if (!upgradeableSources.length) {
+ return null;
+ }
+ const primarySource = upgradeableSources[0];
+ const upgradeableComponentCount = this.getUpgradeableComponentCount(upgradeableSources);
+ return (
+
+
+ );
+ };
+
+ getSourceTimeline = template => {
+ const hasUpgradeVersion =
+ template.latestVersion &&
+ template.latestVersion !== '-' &&
+ `${template.latestVersion}` !== `${template.currentVersion}`;
+ const relatedRecords = (this.state.upgradeRecords || [])
+ .filter(record => {
+ const sameGroupKey = `${record.group_key || ''}` === `${template.groupKey || ''}`;
+ const sameUpgradeGroup =
+ `${record.upgrade_group_id || ''}` === `${template.upgradeGroupId || ''}` ||
+ !record.upgrade_group_id;
+ return sameGroupKey && sameUpgradeGroup;
+ })
+ .sort((a, b) => new Date(b.create_time).getTime() - new Date(a.create_time).getTime());
+
+ const latestNode =
+ hasUpgradeVersion
+ ? {
+ id: `${template.id}-latest`,
+ title: `${template.templateName} ${template.latestVersion}`,
+ subTitle: template.marketName
+ ? `${template.marketName} / 待升级版本`
+ : '待升级版本',
+ createTime: this.state.appDetail.update_time || this.state.appDetail.create_time,
+ description: `上游检测到新版本 ${template.latestVersion}，可以从当前安装版本继续升级。`,
+ detail: {
+ ...template,
+ currentVersion: template.latestVersion
+ },
+ timelineState: 'upgrade',
+ isCurrent: false
+ }
+ : null;
+
+ const currentNode = {
+ id: `${template.id}-current`,
+ title: `${template.templateName} ${template.currentVersion}`,
+ subTitle: template.marketName ? `${template.marketName} / 当前已安装版本` : '当前已安装版本',
+ createTime: this.state.appDetail.update_time || this.state.appDetail.create_time,
+ description: hasUpgradeVersion
+ ? `当前运行在 ${template.currentVersion}，上方可升级到 ${template.latestVersion}`
+ : '当前没有检测到更高的来源版本',
+ detail: template,
+ timelineState: 'current',
+ isCurrent: true
+ };
+
+ const historyNodes = relatedRecords.map(record => ({
+ id: `upgrade-${record.ID || record.id}`,
+ title: `${template.templateName} ${record.version || template.currentVersion}`,
+ subTitle: record.old_version ? `从 ${record.old_version} 升级到 ${record.version}` : '来源升级记录',
+ createTime: record.create_time,
+ description: `状态：${record.status}`,
+ detail: record,
+ timelineState: 'history',
+ isCurrent: false
+ }));
+
+ return (latestNode ? [latestNode] : []).concat([currentNode]).concat(historyNodes);
+ };
+
+ renderTemplateTable = selectedTemplate => {
+ const columns = [
+ {
+ title: '模板名称',
+ dataIndex: 'templateName',
+ key: 'templateName',
+ render: (value, record) => (
+ {value}
+ },
+ {
+ title: '最新版本',
+ dataIndex: 'latestVersion',
+ key: 'latestVersion',
+ render: (value, record) =>
+ record.templateType === 'market' ? {value} : -
+ },
+ {
+ title: '组件数',
+ dataIndex: 'componentCount',
+ key: 'componentCount'
+ },
+ {
+ title: '操作',
+ key: 'action',
+ render: (_, record) => (
+
+
+ selectedTemplate && selectedTemplate.id === record.id ? styles.templateRowActive : ''
+ }
+ />
+
+ );
+ };
+
+ renderTemplateSwitcher = selectedTemplate => {
+ const rows = this.getTemplateRows();
+ return (
+
-
-
-
diff --git a/src/components/Team/TeamEventList/index.less b/src/components/Team/TeamEventList/index.less
index c054550e8..06702f434 100644
--- a/src/components/Team/TeamEventList/index.less
+++ b/src/components/Team/TeamEventList/index.less
@@ -2,46 +2,97 @@
@import "../../../utils/utils.less";
.teamEventListWrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ height: calc(100vh - 320px);
+ min-height: 520px;
+ min-width: 0;
+
// 团队概览样式
.teamOverview {
- padding: 20px;
- background-color: #fff;
- border-radius: 12px;
- margin-bottom: 12px;
- border: 1px solid #e3e3e3;
+ flex-shrink: 0;
}
.basicInfoRow {
+ display: grid;
+ grid-template-columns: repeat(5, minmax(0, 1fr));
+ gap: 12px;
box-sizing: border-box;
- margin: 8px 0px 0;
+ margin: 8px 0 0;
.basicInfo {
- text-align: center;
- border-radius: 8px;
- padding: 10px 12px;
+ min-height: 92px;
+ padding: 12px 14px;
+ text-align: left;
+ border-radius: 12px;
+ background: radial-gradient(circle at top right,
+ fade(@primary-color, 8%) 0%,
+ fade(@primary-color, 4%) 40%,
+ transparent 80%);
+ border: 1px solid fade(@primary-color, 10%);
+ box-shadow: @rbd-min-card-shadow;
.basicInfoTitle {
font-weight: 500;
font-size: 12px;
color: @rbd-auxiliary-color-secondary;
line-height: 1.4;
+ word-break: break-word;
}
.basicInfoContent {
- color: @primary-color;
+ color: @heading-color;
font-size: 24px;
font-weight: 600;
width: 100%;
height: auto;
- text-align: center;
- margin-top: 4px;
+ text-align: left;
+ margin-top: 10px;
+ line-height: 1.2;
+ word-break: break-word;
}
}
}
}
.eventListContainer {
+ flex: 1;
+ min-height: 0;
+ display: flex;
+ flex-direction: column;
+ padding: 16px;
background-color: #fff;
+ border-radius: 12px;
+ border: 1px solid #e3e3e3;
+ overflow: hidden;
+
+ :global {
+ .ant-spin-nested-loading,
+ .ant-spin-container {
+ display: flex;
+ flex: 1;
+ min-height: 0;
+ flex-direction: column;
+ }
+ }
+}
+
+.eventListBody {
+ flex: 1;
+ min-height: 0;
+ overflow-y: auto;
+ overflow-x: hidden;
+ padding-right: 4px;
+}
+
+.eventListPagination {
+ flex-shrink: 0;
+ display: flex;
+ justify-content: flex-end;
+ padding-top: 12px;
+ margin-top: 12px;
+ border-top: 1px solid fade(@primary-color, 8%);
}
.eventListHeader {
@@ -72,6 +123,8 @@
}
.activitiesList {
+ min-height: 100%;
+
.username {
color: @text-color;
}
@@ -85,9 +138,9 @@
margin-bottom: 12px;
padding: 12px;
border: 1px solid #e3e3e3;
- border-radius: 12px;
+ border-radius: 12px;
}
-}
+ }
}
.eventItem {
@@ -302,6 +355,16 @@
}
@media screen and (max-width: @screen-xl) and (min-width: @screen-lg) {
+ .teamEventListWrapper {
+ height: calc(100vh - 340px);
+ }
+
+ .teamOverview {
+ .basicInfoRow {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
+ }
+
.activeCard {
margin-bottom: 24px;
}
@@ -320,6 +383,22 @@
}
@media screen and (max-width: @screen-lg) {
+ .teamEventListWrapper {
+ height: auto;
+ min-height: 0;
+ }
+
+ .teamOverview {
+ .basicInfoRow {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+ }
+
+ .eventListContainer {
+ max-height: calc(100vh - 360px);
+ min-height: 320px;
+ }
+
.activeCard {
margin-bottom: 24px;
}
@@ -356,6 +435,12 @@
}
@media screen and (max-width: @screen-sm) {
+ .teamOverview {
+ .basicInfoRow {
+ grid-template-columns: 1fr;
+ }
+ }
+
.pageHeaderContent {
display: block;
@@ -428,4 +513,4 @@
.tableListForm :global(.ant-form-item) {
margin-right: 8px;
}
-}
\ No newline at end of file
+}
diff --git a/src/components/Topological/DependencyConfigModal.js b/src/components/Topological/DependencyConfigModal.js
new file mode 100644
index 000000000..8e9572c17
--- /dev/null
+++ b/src/components/Topological/DependencyConfigModal.js
@@ -0,0 +1,301 @@
+import { Alert, Button, Icon, Input, Modal, Select, Spin, Tabs } from 'antd';
+import React from 'react';
+import { formatMessage } from '@/utils/intl';
+import styles from './DependencyConfigModal.less';
+
+const { Option } = Select;
+const { TabPane } = Tabs;
+
+function findEnvBySuffix(envs, suffixes) {
+ return envs.find(env => {
+ const attrName = env.attr_name || '';
+ return suffixes.some(suffix => attrName.endsWith(suffix));
+ });
+}
+
+function buildCodeExamples(envs) {
+ const hostEnv = findEnvBySuffix(envs, ['_HOST']);
+ const portEnv = findEnvBySuffix(envs, ['_PORT']);
+ const userEnv = findEnvBySuffix(envs, ['_USER', '_USERNAME']);
+ const passwordEnv = findEnvBySuffix(envs, ['_PASSWORD', '_PASS']);
+ const nameEnv = findEnvBySuffix(envs, ['_NAME', '_DATABASE']);
+
+ if (!envs.length) {
+ return {
+ java: '// No environment variables available',
+ python: '# No environment variables available',
+ nodejs: '// No environment variables available',
+ go: '// No environment variables available'
+ };
+ }
+
+ const javaLines = [
+ '// Java',
+ `String host = System.getenv("${hostEnv ? hostEnv.attr_name : ''}");`,
+ `String port = System.getenv("${portEnv ? portEnv.attr_name : ''}");`
+ ];
+ if (userEnv) {
+ javaLines.push(`String username = System.getenv("${userEnv.attr_name}");`);
+ }
+ if (passwordEnv) {
+ javaLines.push(`String password = System.getenv("${passwordEnv.attr_name}");`);
+ }
+ if (nameEnv) {
+ javaLines.push(`String database = System.getenv("${nameEnv.attr_name}");`);
+ }
+
+ const pythonLines = [
+ '# Python',
+ 'import os',
+ '',
+ `host = os.getenv("${hostEnv ? hostEnv.attr_name : ''}")`,
+ `port = os.getenv("${portEnv ? portEnv.attr_name : ''}")`
+ ];
+ if (userEnv) {
+ pythonLines.push(`username = os.getenv("${userEnv.attr_name}")`);
+ }
+ if (passwordEnv) {
+ pythonLines.push(`password = os.getenv("${passwordEnv.attr_name}")`);
+ }
+ if (nameEnv) {
+ pythonLines.push(`database = os.getenv("${nameEnv.attr_name}")`);
+ }
+
+ const nodejsLines = [
+ '// Node.js',
+ `const host = process.env.${hostEnv ? hostEnv.attr_name : ''};`,
+ `const port = process.env.${portEnv ? portEnv.attr_name : ''};`
+ ];
+ if (userEnv) {
+ nodejsLines.push(`const username = process.env.${userEnv.attr_name};`);
+ }
+ if (passwordEnv) {
+ nodejsLines.push(`const password = process.env.${passwordEnv.attr_name};`);
+ }
+ if (nameEnv) {
+ nodejsLines.push(`const database = process.env.${nameEnv.attr_name};`);
+ }
+
+ const goLines = [
+ '// Go',
+ 'import "os"',
+ '',
+ `host := os.Getenv("${hostEnv ? hostEnv.attr_name : ''}")`,
+ `port := os.Getenv("${portEnv ? portEnv.attr_name : ''}")`
+ ];
+ if (userEnv) {
+ goLines.push(`username := os.Getenv("${userEnv.attr_name}")`);
+ }
+ if (passwordEnv) {
+ goLines.push(`password := os.Getenv("${passwordEnv.attr_name}")`);
+ }
+ if (nameEnv) {
+ goLines.push(`database := os.Getenv("${nameEnv.attr_name}")`);
+ }
+
+ return {
+ java: javaLines.join('\n'),
+ python: pythonLines.join('\n'),
+ nodejs: nodejsLines.join('\n'),
+ go: goLines.join('\n')
+ };
+}
+
+export default function DependencyConfigModal({
+ visible,
+ loading,
+ submitting,
+ sourceName,
+ targetName,
+ ports,
+ selectedPortKey,
+ selectedPort,
+ aliasValue,
+ envs,
+ activeLanguage,
+ shouldUpdateService,
+ canSubmit,
+ onClose,
+ onPortChange,
+ onAliasChange,
+ onLanguageChange,
+ onCancelAction,
+ onSubmit
+}) {
+ const codeExamples = buildCodeExamples(envs);
+ const footer = [
+ ,
+
+ ];
+
+ return (
+
-
-
- {formatMessage({ id: 'versionUpdata_6_1.appNum' })}
-
- {isTeamOverview ? index?.overviewInfo?.team_app_num || 0 : '**'}
-
-
-
)}
{/* 事件列表部分 */}
{formatMessage({ id: 'versionUpdata_6_1.serviceNum' })}
- {isTeamOverview ? index?.overviewInfo?.team_service_num || 0 : '**'}
+
+ {overviewItems.map(item => (
+
+
-
- {item.title}
+ {item.value}
-
-
- {formatMessage({ id: 'versionUpdata_6_1.cpuUsage' })} ({this.handlUnit('cpu', index?.overviewInfo?.cpu_usage, 'm')})
- {isTeamOverview ? this.handlUnit('cpu', index?.overviewInfo?.cpu_usage) || 0 : '**'}
-
-
-
- {formatMessage({ id: 'versionUpdata_6_1.memoryUsage' })} ({this.handlUnit('memory', index?.overviewInfo?.memory_usage, 'MB')})
- {isTeamOverview ? this.handlUnit('memory', index?.overviewInfo?.memory_usage) || 0 : '**'}
-
-
-
-
+ ))}
+
- {showStorageUsed ? `${formatMessage({ id: 'versionUpdata_6_1.storageUsage' })}(${storageUsed?.unit})` : `${formatMessage({ id: 'versionUpdata_6_1.diskUsage' })}(GB)`}
-
-
- {isTeamOverview ? (showStorageUsed ? storageUsed?.value : index?.overviewInfo?.disk_usage) : '**'}
-
- - pageSize ? pagination : false}
- size="large"
- >
+
- {this.renderActivities()}
+
+ - {this.renderActivities()}
+
-
+
+
+ {loading ? (
+
+
+
+
+ {sourceName}
+
+
+ {formatMessage(
+ { id: 'topology.dependency_config.summary' },
+ {
+ source: sourceName,
+ target: targetName
+ }
+ )}
+
+
+
+ ) : (
+
+
+ )}
+
+
+
+
+ {formatMessage({ id: 'topology.dependency_config.alias_title' })}
+
+
+ {formatMessage({ id: 'topology.dependency_config.alias_desc' })}
+
+
+
+ {!ports.length && (
+
+
+
+ {formatMessage({ id: 'topology.dependency_config.port_label' })}
+
+
+
+
+
+ {formatMessage({ id: 'topology.dependency_config.alias_input_label' })}
+
+
+
+ {formatMessage({ id: 'topology.dependency_config.alias_hint' })}
+
+
+ {formatMessage({ id: 'topology.dependency_config.empty_ports' })}
+
+ )}
+
+
+
+
+
+
+
+
+ {envs.length ? (
+
+
+
+ {formatMessage({
+ id: shouldUpdateService
+ ? 'topology.dependency_config.effect_update'
+ : 'topology.dependency_config.effect_restart'
+ })}
+
+
+ {envs.map(env => (
+
+ ) : (
+
+ {env.attr_name}
+ =
+ {env.attr_value}
+
+ ))}
+
+ {formatMessage({ id: 'topology.dependency_config.empty_envs' })}
+
+ )}
+
+
+
+
+
+
+
+
+
+ {codeExamples[activeLanguage] || codeExamples.java}
+
@@ -645,6 +1022,33 @@ class Index extends React.Component {
)}
+ {dependencyConfigVisible && (
+
+
+ );
+ };
+
+ openPublishPage = (recordVersion = '') => {
+ this.createPublishRecord('', {}, recordVersion);
+ };
+
+ handlePublishAction = (target, recordVersion = '') => {
+ if (target === 'market') {
+ this.openCloudPublishPage(recordVersion);
+ return;
+ }
+ this.openPublishPage(recordVersion);
+ };
+
+ openCloudPublishPage = recordVersion => {
+ if (!this.canPublishSnapshotVersion(recordVersion)) {
+ notification.warning({ message: '请先创建快照后再发布' });
+ return;
+ }
+ const enterpriseId = this.getEnterpriseId();
+ if (!enterpriseId) {
+ notification.warning({ message: '当前企业信息缺失，无法发布到云应用商店' });
+ return;
+ }
+ this.setState({
+ storeLoading: true,
+ pendingPublishVersion: recordVersion
+ });
+ this.props.dispatch({
+ type: 'enterprise/fetchEnterpriseStoreList',
+ payload: {
+ enterprise_id: enterpriseId
+ },
+ callback: data => {
+ const storeList = (data && data.list) || [];
+ if (!storeList.length) {
+ this.setState({
+ storeLoading: false,
+ storeList: [],
+ selectStoreVisible: false
+ });
+ notification.warning({ message: '当前企业未配置可用的云应用商店' });
+ return;
+ }
+ if (storeList[0].access_key) {
+ const writableStores = storeList.filter(
+ item => item.status === 1 && fetchMarketAuthority(item, 'Write')
+ );
+ if (!writableStores.length) {
+ this.setState({
+ storeLoading: false,
+ storeList: [],
+ selectStoreVisible: false
+ });
+ notification.warning({ message: '当前没有可写入的云应用商店，请先检查商店权限' });
+ return;
+ }
+ this.setState({
+ selectStoreVisible: true,
+ isAuthCompany: false,
+ storeList: writableStores,
+ storeLoading: false
+ });
+ return;
+ }
+ this.setState({
+ storeName: storeList[0].name,
+ isAuthCompany: true,
+ storeLoading: false,
+ selectStoreVisible: false
+ });
+ }
+ });
+ };
+
+ renderPublishAction = ({
+ recordVersion = '',
+ disabled = false,
+ size = 'default',
+ type,
+ ghost = false
+ } = {}) => {
+ const overlay = (
+
+ );
+
+ return (
+
+
+
+ );
+ };
+
+ openUpgradePage = template => {
+ if (this.state.sourceUpgradeVisible) {
+ this.closeSourceUpgradeDrawer(() => this.openUpgradePage(template));
+ return;
+ }
+ const { dispatch } = this.props;
+ const { teamName, regionName, appID } = this.props.match.params;
+ if (!template || !template.groupKey || !template.upgradeGroupId) {
+ this.openSourceUpgradeDrawer();
+ return;
+ }
+ getAppModelLastRecord({
+ appID: appID,
+ team_name: teamName,
+ upgrade_group_id: template.upgradeGroupId
+ })
+ .then(re => {
+ const record = re && re.bean;
+ const status = record && record.status;
+ if (record && status && ![3, 8].includes(status)) {
+ this.openUpgradeInfoPage(record, template);
+ return;
+ }
+ return postUpgradeRecord({
+ team_name: teamName,
+ appID: appID,
+ upgrade_group_id: template.upgradeGroupId,
+ noModels: true
+ }).then(createRes => {
+ this.openUpgradeInfoPage(createRes && createRes.bean, template);
+ });
+ })
+ .catch(() => {
+ postUpgradeRecord({
+ team_name: teamName,
+ appID: appID,
+ upgrade_group_id: template.upgradeGroupId,
+ noModels: true
+ }).then(createRes => {
+ this.openUpgradeInfoPage(createRes && createRes.bean, template);
+ });
+ });
+ };
+
+ openUpgradeInfoPage = (record, template) => {
+ const { dispatch } = this.props;
+ const { teamName, regionName, appID } = this.props.match.params;
+ if (!record) {
+ this.openSourceUpgradeDrawer();
+ return;
+ }
+ const recordId = record.ID || record.id;
+ const upgradeGroupId = record.upgrade_group_id || template.upgradeGroupId;
+ const groupKey = record.group_key || template.groupKey;
+ if (!recordId || !upgradeGroupId || !groupKey) {
+ this.openSourceUpgradeDrawer();
+ return;
+ }
+ const jumpToUpgradePage = () => {
+ dispatch(
+ routerRedux.push(
+ `/team/${teamName}/region/${regionName}/apps/${appID}/upgrade/${upgradeGroupId}/record/${recordId}?app_id=${groupKey}`
+ )
+ );
+ };
+ if (this.state.sourceUpgradeVisible) {
+ this.closeSourceUpgradeDrawer(jumpToUpgradePage);
+ return;
+ }
+ jumpToUpgradePage();
+ };
+
+ openSourceUpgradeDrawer = () => {
+ this.setState({ sourceUpgradeVisible: true });
+ };
+
+ closeSourceUpgradeDrawer = callback => {
+ this.setState({ sourceUpgradeVisible: false }, () => {
+ runCloseCallback(callback);
+ });
+ };
+
+ openTemplateActionModal = () => {
+ this.setState({ templateActionVisible: true });
+ };
+
+ closeTemplateActionModal = () => {
+ this.setState({ templateActionVisible: false });
+ };
+
+ hideSelectStore = () => {
+ this.setState({
+ selectStoreVisible: false,
+ storeLoading: false,
+ pendingPublishVersion: ''
+ });
+ };
+
+ handleSelectStore = values => {
+ const { pendingPublishVersion } = this.state;
+ if (!values || !values.store_id) {
+ return;
+ }
+ this.setState({ storeLoading: true });
+ this.createPublishRecord('goodrain', { store_id: values.store_id }, pendingPublishVersion);
+ };
+
+ handleAddPersonalTemplate = () => {
+ this.closeTemplateActionModal();
+ this.handleCreateSnapshot();
+ };
+
+ handleAddMarketTemplate = () => {
+ this.closeTemplateActionModal();
+ notification.info({
+ message: '请从应用总览的添加入口继续安装来源模板'
+ });
+ };
+
+ formatTime = value => {
+ if (!value) {
+ return '-';
+ }
+ return moment(value)
+ .locale('zh-cn')
+ .format('YYYY-MM-DD HH:mm:ss');
+ };
+
+ formatPublishScope = scope => {
+ if (scope === 'team') {
+ return '团队';
+ }
+ if (scope === 'enterprise') {
+ return '企业';
+ }
+ if (scope === 'goodrain') {
+ return '应用市场';
+ }
+ return '本地';
+ };
+
+ formatPublishStatus = status => {
+ if (status === 0) {
+ return '发布中';
+ }
+ if (status === 1) {
+ return '已发布';
+ }
+ if (status === 2) {
+ return '已取消';
+ }
+ return '-';
+ };
+
+ isEmptyDetailValue = value =>
+ value === undefined || value === null || value === '';
+
+ isScalarDetailValue = value =>
+ value === undefined ||
+ value === null ||
+ typeof value === 'string' ||
+ typeof value === 'number' ||
+ typeof value === 'boolean';
+
+ isScalarDetailArray = value =>
+ Array.isArray(value) &&
+ value.every(item => this.isScalarDetailValue(item));
+
+ areDetailValuesEqual = (left, right) => {
+ try {
+ return JSON.stringify(left) === JSON.stringify(right);
+ } catch (error) {
+ return left === right;
+ }
+ };
+
+ getReadableDetailLabel = key => {
+ const labelMap = {
+ attr_name: '名称',
+ attr_value: '值',
+ scope: '作用域',
+ name: '键',
+ container_port: '容器端口',
+ protocol: '协议',
+ port_alias: '端口别名',
+ k8s_service_name: '服务名',
+ node_port: '节点端口',
+ lb_mapping_port: 'LB端口',
+ volume_name: '卷名称',
+ volume_path: '挂载路径',
+ volume_capacity: '容量',
+ volume_type: '类型',
+ access_mode: '访问模式',
+ volume_provider_name: '存储类',
+ probe_id: '探针标识',
+ mode: '探针类型',
+ port: '端口',
+ path: '路径',
+ cmd: '命令',
+ scheme: '协议',
+ initial_delay_second: '初始延迟',
+ period_second: '探测周期',
+ timeout_second: '超时时间',
+ success_threshold: '成功阈值',
+ failure_threshold: '失败阈值',
+ min_node: '最小实例',
+ max_node: '最大实例',
+ step_node: '扩容步长',
+ min_memory: '最小内存',
+ init_memory: '初始内存',
+ max_memory: '最大内存',
+ step_memory: '内存步长',
+ min_cpu: '最小 CPU',
+ init_cpu: '初始 CPU',
+ container_cpu: 'CPU',
+ max_cpu: '最大 CPU',
+ step_cpu: 'CPU 步长',
+ is_restart: '变更后重启',
+ build_version: '构建版本',
+ deploy_version: '部署版本',
+ update_time: '更新时间'
+ };
+ return labelMap[key] || key;
+ };
+
+ getFieldRowSchema = fieldKey => {
+ const schemaMap = {
+ service_env_map_list: ['attr_name', 'attr_value', 'scope'],
+ service_connect_info_map_list: ['attr_name', 'attr_value'],
+ extend_method_map: [
+ 'min_node',
+ 'max_node',
+ 'step_node',
+ 'min_memory',
+ 'init_memory',
+ 'max_memory',
+ 'step_memory',
+ 'min_cpu',
+ 'init_cpu',
+ 'container_cpu',
+ 'max_cpu',
+ 'step_cpu',
+ 'is_restart'
+ ],
+ port_map_list: [
+ 'container_port',
+ 'protocol',
+ 'port_alias',
+ 'k8s_service_name',
+ 'node_port',
+ 'lb_mapping_port'
+ ],
+ service_volume_map_list: [
+ 'volume_name',
+ 'volume_path',
+ 'volume_capacity',
+ 'volume_type',
+ 'access_mode',
+ 'volume_provider_name'
+ ],
+ probes: [
+ 'probe_id',
+ 'mode',
+ 'port',
+ 'path',
+ 'cmd',
+ 'scheme',
+ 'initial_delay_second',
+ 'period_second',
+ 'timeout_second',
+ 'success_threshold',
+ 'failure_threshold'
+ ]
+ };
+ return schemaMap[fieldKey] || [];
+ };
+
+ formatDetailScalarValue = value => {
+ if (this.isEmptyDetailValue(value)) {
+ return '-';
+ }
+ if (typeof value === 'boolean') {
+ return value ? '是' : '否';
+ }
+ return String(value);
+ };
+
+ describeComplexDetailValue = value => {
+ if (Array.isArray(value)) {
+ return `数组（${value.length} 项，请展开查看原始配置）`;
+ }
+ if (value && typeof value === 'object') {
+ return `对象（${Object.keys(value).length} 个字段，请展开查看原始配置）`;
+ }
+ return this.formatDetailScalarValue(value);
+ };
+
+ formatDetailPreviewValue = value => {
+ if (this.isScalarDetailArray(value)) {
+ const items = value
+ .map(item => this.formatDetailScalarValue(item))
+ .filter(item => item && item !== '-');
+ return items.length > 0 ? items.join('，') : '-';
+ }
+ if (Array.isArray(value) || (value && typeof value === 'object')) {
+ return this.describeComplexDetailValue(value);
+ }
+ return this.formatDetailScalarValue(value);
+ };
+
+ formatDetailRowValue = (key, value) => {
+ if (
+ ['min_node', 'max_node', 'step_node'].includes(key) &&
+ !this.isEmptyDetailValue(value)
+ ) {
+ return `${value} 个`;
+ }
+ if (
+ ['min_memory', 'init_memory', 'max_memory', 'step_memory'].includes(key) &&
+ !this.isEmptyDetailValue(value)
+ ) {
+ return `${value} MB`;
+ }
+ if (
+ ['min_cpu', 'init_cpu', 'container_cpu', 'max_cpu', 'step_cpu'].includes(key) &&
+ !this.isEmptyDetailValue(value)
+ ) {
+ return `${value} m`;
+ }
+ if (key === 'is_restart' && !this.isEmptyDetailValue(value)) {
+ return String(value) === '1' || value === true ? '是' : '否';
+ }
+ if ((key === 'protocol' || key === 'scheme') && !this.isEmptyDetailValue(value)) {
+ return String(value).toUpperCase();
+ }
+ return this.formatDetailPreviewValue(value);
+ };
+
+ pickFirstReadableValue = (...values) => {
+ for (let index = 0; index < values.length; index += 1) {
+ if (!this.isEmptyDetailValue(values[index])) {
+ return values[index];
+ }
+ }
+ return '';
+ };
+
+ getCuratedFieldSummaryRows = (fieldKey, value) => {
+ if (!value || typeof value !== 'object' || Array.isArray(value)) {
+ return null;
+ }
+
+ if (fieldKey === 'extend_method_map') {
+ const instanceCount = this.pickFirstReadableValue(value.min_node, value.max_node);
+ const memory = this.pickFirstReadableValue(value.init_memory, value.min_memory, value.max_memory);
+ const cpu = this.pickFirstReadableValue(
+ value.container_cpu,
+ value.init_cpu,
+ value.min_cpu,
+ value.max_cpu
+ );
+
+ return [
+ {
+ key: 'instance_count',
+ label: '实例数',
+ value: this.isEmptyDetailValue(instanceCount) ? '-' : `${instanceCount} 个`
+ },
+ {
+ key: 'memory',
+ label: '内存',
+ value: this.isEmptyDetailValue(memory) ? '-' : `${memory} MB`
+ },
+ {
+ key: 'cpu',
+ label: 'CPU',
+ value: this.isEmptyDetailValue(cpu) ? '-' : `${cpu} m`
+ }
+ ];
+ }
+
+ if (fieldKey === 'service_volume_map_list') {
+ const mountSource = value.volume_name || '-';
+ const mountTarget = value.volume_path || '-';
+ const volumeCapacity = this.pickFirstReadableValue(value.volume_capacity);
+
+ return [
+ {
+ key: 'mount',
+ label: '挂载',
+ value: `${mountSource} -> ${mountTarget}`
+ },
+ {
+ key: 'capacity',
+ label: '容量',
+ value: this.isEmptyDetailValue(volumeCapacity) ? '-' : String(volumeCapacity)
+ }
+ ];
+ }
+
+ return null;
+ };
+
+ getSummaryRowsForValue = (fieldKey, value, compareValue) => {
+ if (this.isScalarDetailValue(value) || this.isScalarDetailArray(value)) {
+ return [
+ {
+ key: 'value',
+ label: '值',
+ value: this.formatDetailPreviewValue(value)
+ }
+ ];
+ }
+ if (!value || typeof value !== 'object') {
+ return [];
+ }
+
+ const curatedRows = this.getCuratedFieldSummaryRows(fieldKey, value);
+ if (curatedRows) {
+ return curatedRows;
+ }
+
+ const rows = [];
+ const schemaKeys = this.getFieldRowSchema(fieldKey);
+ const usedKeys = {};
+
+ schemaKeys.forEach(key => {
+ usedKeys[key] = true;
+ const currentValue = value[key];
+ const compareItem = compareValue && compareValue[key];
+ const hasValue =
+ !this.isEmptyDetailValue(currentValue) &&
+ (!Array.isArray(currentValue) || currentValue.length > 0);
+ if (!hasValue && (!compareValue || this.areDetailValuesEqual(currentValue, compareItem))) {
+ return;
+ }
+ rows.push({
+ key,
+ label: this.getReadableDetailLabel(key),
+ value: this.formatDetailRowValue(key, currentValue)
+ });
+ });
+
+ Object.keys(value)
+ .sort()
+ .forEach(key => {
+ if (usedKeys[key]) {
+ return;
+ }
+ const currentValue = value[key];
+ const compareItem = compareValue && compareValue[key];
+ const isCollection =
+ Array.isArray(currentValue) ||
+ (currentValue && typeof currentValue === 'object');
+ if (isCollection && !this.isScalarDetailArray(currentValue)) {
+ return;
+ }
+ if (
+ this.isEmptyDetailValue(currentValue) &&
+ (!compareValue || this.areDetailValuesEqual(currentValue, compareItem))
+ ) {
+ return;
+ }
+ if (compareValue && this.areDetailValuesEqual(currentValue, compareItem)) {
+ return;
+ }
+ rows.push({
+ key,
+ label: this.getReadableDetailLabel(key),
+ value: this.formatDetailRowValue(key, currentValue)
+ });
+ });
+
+ return rows;
+ };
+
+ formatOtherChangeValue = value => {
+ if (value === undefined || value === null || value === '') {
+ return '-';
+ }
+ if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+ return String(value);
+ }
+ try {
+ return JSON.stringify(value, null, 2);
+ } catch (error) {
+ return '-';
+ }
+ };
+
+ shouldRenderRawValue = (fieldKey, value) => {
+ if (typeof value === 'string') {
+ return value.length > 160 || value.indexOf('\n') > -1;
+ }
+ if (!value || typeof value !== 'object') {
+ return false;
+ }
+ if (this.getCuratedFieldSummaryRows(fieldKey, value)) {
+ return false;
+ }
+ if (this.getFieldRowSchema(fieldKey).length) {
+ return false;
+ }
+ return true;
+ };
+
+ renderOtherChangeValueBlock = (value, summaryLabel = '查看原始 JSON') => {
+ const formattedValue = this.formatOtherChangeValue(value);
+ const shouldCollapse =
+ (value && typeof value === 'object') ||
+ formattedValue.length > 160 ||
+ formattedValue.indexOf('\n') > -1;
+ if (!shouldCollapse) {
+ return
+ {updatedComponents.map(component => (
+
+
+ )}
+ >
+ {component.field_changes && component.field_changes.length > 0 ? (
+
+
+
+
+ 应用版本中心
+ {this.getAppName()}
+
+ 聚合管理个人模板与应用商店模板版本，在同一视图里查看版本演进、发布状态与来源升级。
+
+
+
+
+
+
+
+ 当前模板
+ {selectedTemplate ? selectedTemplate.templateName : '-'}
+
+
+ 模板总数
+ {templateRows.length}
+
+
+ 来源模板
+ {this.state.sourceGroups.length}
+
+
+ 最新发布
+ {latestPublish ? latestPublish.version || '-' : '未发布'}
+
+ {formattedValue};
+ }
+ return (
+
+
+ );
+ };
+
+ renderFieldValueSummary = (fieldKey, value) => {
+ const rows = this.getSummaryRowsForValue(fieldKey, value);
+ return (
+ + {summaryLabel} +
+{formattedValue}
+
+ {rows.length > 0 ? (
+
+ );
+ };
+
+ getFieldCompareRows = (fieldKey, before, after) => {
+ const beforeRows = this.getSummaryRowsForValue(fieldKey, before, after);
+ const afterRows = this.getSummaryRowsForValue(fieldKey, after, before);
+ const rowMap = {};
+ const order = [];
+
+ const appendRow = (row, side) => {
+ if (!rowMap[row.key]) {
+ rowMap[row.key] = {
+ key: row.key,
+ label: row.label,
+ before: '-',
+ after: '-'
+ };
+ order.push(row.key);
+ }
+ rowMap[row.key][side] = row.value;
+ };
+
+ beforeRows.forEach(row => appendRow(row, 'before'));
+ afterRows.forEach(row => appendRow(row, 'after'));
+
+ if (order.length === 0) {
+ return [
+ {
+ key: 'raw',
+ label: '内容',
+ before: this.describeComplexDetailValue(before),
+ after: this.describeComplexDetailValue(after)
+ }
+ ];
+ }
+
+ return order.map(key => rowMap[key]);
+ };
+
+ renderFieldValueCompare = (fieldKey, before, after) => {
+ const rows = this.getFieldCompareRows(fieldKey, before, after);
+ const showBeforeRaw = this.shouldRenderRawValue(fieldKey, before);
+ const showAfterRaw = this.shouldRenderRawValue(fieldKey, after);
+
+ return (
+
+ {rows.map(row => (
+
+ ) : (
+
+
+ ))}
+ {row.label}
+ {row.value}
+
+ {this.formatDetailPreviewValue(value)}
+
+ )}
+ {this.shouldRenderRawValue(fieldKey, value) ? (
+
+ {this.renderOtherChangeValueBlock(value)}
+
+ ) : null}
+
+
+ );
+ };
+
+ getFieldChangeEntryCount = fieldChange => {
+ if (!fieldChange) {
+ return 0;
+ }
+ return []
+ .concat(fieldChange.added || [])
+ .concat(fieldChange.removed || [])
+ .concat(fieldChange.updated || []).length;
+ };
+
+ getUpdatedComponentSummaryItems = component => {
+ const summaryItems = [];
+ (component.field_changes || []).forEach(fieldChange => {
+ const count = this.getFieldChangeEntryCount(fieldChange);
+ if (count > 0) {
+ summaryItems.push({
+ key: fieldChange.field_key,
+ label: fieldChange.field_label,
+ count
+ });
+ }
+ });
+ if (component.other_changes && component.other_changes.length > 0) {
+ summaryItems.push({
+ key: 'other_changes',
+ label: '其他配置',
+ count: component.other_changes.length
+ });
+ }
+ return summaryItems;
+ };
+
+ renderComponentNameList = (components, emptyText) => {
+ if (!components || components.length === 0) {
+ return
+
+ {rows.map(row => (
+ 字段
+ 之前
+ 现在
+
+
+ ))}
+ {showBeforeRaw || showAfterRaw ? (
+ {row.label}
+ {row.before}
+ {row.after}
+
+ {showBeforeRaw ? (
+
+ ) : null}
+
+
+ ) : null}
+ {showAfterRaw ? (
+ 之前原始配置
+ {this.renderOtherChangeValueBlock(before, '查看之前的原始 JSON')}
+
+
+ ) : null}
+ 现在原始配置
+ {this.renderOtherChangeValueBlock(after, '查看现在的原始 JSON')}
+ {emptyText}
;
+ }
+ return (
+
+ {components.map(item => (
+
+ {item.component_name}
+
+ ))}
+
+ );
+ };
+
+ renderFieldChangeEntries = (fieldKey, changeType, entries) => {
+ if (!entries || entries.length === 0) {
+ return null;
+ }
+ const titleMap = {
+ added: '新增',
+ removed: '删除',
+ updated: '修改'
+ };
+ const classNameMap = {
+ added: styles.detailChangeAdded,
+ removed: styles.detailChangeRemoved,
+ updated: styles.detailChangeUpdated
+ };
+ return (
+
+
+ );
+ };
+
+ renderUpdatedComponentDetails = updatedComponents => {
+ if (!updatedComponents || updatedComponents.length === 0) {
+ return
+
+ {titleMap[changeType]}
+
+ {entries.length} 项
+
+
+ {entries.map((entry, index) => (
+
+
+
+ ))}
+ {entry.identity || '未命名条目'}
+ {changeType === 'updated' ? (
+
+ {this.renderFieldValueCompare(fieldKey, entry.before, entry.after)}
+
+ ) : (
+
+ {this.renderFieldValueSummary(fieldKey, entry.item)}
+
+ )}
+ 当前没有组件字段级修改
;
+ }
+ const defaultActiveKeys =
+ updatedComponents.length <= 2
+ ? updatedComponents.map(component => component.component_name)
+ : [updatedComponents[0].component_name];
+ return (
+ {component.component_name}
+
+ {this.getUpdatedComponentSummaryItems(component).map(item => (
+
+ {item.label} {item.count}
+
+ ))}
+
+
+ {component.field_changes.map(fieldChange => (
+
+ ) : null}
+ {component.other_changes && component.other_changes.length > 0 ? (
+
+
+ ))}
+ {fieldChange.field_label}
+ {this.renderFieldChangeEntries(fieldChange.field_key, 'added', fieldChange.added)}
+ {this.renderFieldChangeEntries(fieldChange.field_key, 'removed', fieldChange.removed)}
+ {this.renderFieldChangeEntries(fieldChange.field_key, 'updated', fieldChange.updated)}
+
+ {component.other_changes.map(change => (
+
+ ) : null}
+ {(!component.field_changes || component.field_changes.length === 0) &&
+ (!component.other_changes || component.other_changes.length === 0) ? (
+
+
+ ))}
+ {change.field_label}
+ {this.renderFieldValueCompare(change.field_key, change.before, change.after)}
+ 当前没有可展开的配置变化。
+ ) : null}
+
+ ))}
+
+ );
+ };
+
+ renderDiffDetailContent = (diffSummary, componentDiffDetails, emptyText) => {
+ const addedComponents = componentDiffDetails.added_components || [];
+ const removedComponents = componentDiffDetails.removed_components || [];
+ const updatedComponents = componentDiffDetails.updated_components || [];
+
+ return (
+ <>
+
+
+ {!diffSummary.has_changes ? (
+
+ 新增组件
+ {diffSummary.added_count || 0}
+
+
+ 删除组件
+ {diffSummary.removed_count || 0}
+
+
+ 修改组件
+ {diffSummary.updated_count || 0}
+
+ {emptyText}
+ ) : (
+ <>
+
+
+ 新增组件
+ {this.renderComponentNameList(addedComponents, '当前没有新增组件')}
+
+
+ 删除组件
+ {this.renderComponentNameList(removedComponents, '当前没有删除组件')}
+
+
+
+ )}
+
+ );
+ };
+
+ renderDetailDiffSection = record => {
+ const diffSummary = (record && record.diff_summary) || {};
+ const componentDiffDetails = (record && record.component_diff_details) || {};
+
+ if (record && record.detail_mode === 'runtime') {
+ return (
+ 修改组件
+ {this.renderUpdatedComponentDetails(updatedComponents)}
+
+
+ );
+ }
+
+ return (
+ 当前状态变更
+
+ 当前展示的是运行态相较快照基线 {record.baseline_version || '-'} 的差异。
+
+ {this.renderDiffDetailContent(
+ diffSummary,
+ componentDiffDetails,
+ '当前运行态与快照基线一致，没有额外差异。'
+ )}
+
+
+ );
+ };
+
+ getRuntimeStateComponentNames = diffDetails => {
+ const detail = diffDetails || {};
+ const names = []
+ .concat((detail.added_components || []).map(item => item.component_name))
+ .concat((detail.removed_components || []).map(item => item.component_name))
+ .concat((detail.updated_components || []).map(item => item.component_name));
+ return Array.from(new Set(names.filter(Boolean)));
+ };
+
+ getCurrentBaselineSnapshot = () => {
+ const { overview, snapshotVersions } = this.state;
+ const versions = snapshotVersions || [];
+ if (!versions.length) {
+ return null;
+ }
+ const currentVersionId = overview && overview.current_version_id;
+ return (
+ versions.find(item => `${item.version_id}` === `${currentVersionId}`) ||
+ versions[0]
+ );
+ };
+
+ getPersonalTimeline = () => {
+ const { overview, snapshotVersions, appDetail } = this.state;
+ const versions = snapshotVersions || [];
+ const baselineSnapshot = this.getCurrentBaselineSnapshot();
+ const baselineSnapshotId = baselineSnapshot && baselineSnapshot.version_id;
+ const baselineSnapshotIndex = versions.findIndex(
+ item => `${item.version_id}` === `${baselineSnapshotId || ''}`
+ );
+ const timeline = [];
+
+ if (overview && overview.has_changes && baselineSnapshot) {
+ const runtimeComponentNames = this.getRuntimeStateComponentNames(overview.component_diff_details);
+ timeline.push({
+ id: 'runtime-state',
+ version: '已修改',
+ createTime: appDetail.update_time || appDetail.create_time,
+ timeLabel: '最近更新',
+ description: `当前运行态与快照基线 ${baselineSnapshot.version || '-'} 存在差异，尚未形成新的快照版本。`,
+ componentLabel: '变化组件',
+ componentNames: runtimeComponentNames,
+ emptyComponentText: '当前状态未返回组件差异',
+ detail: {
+ templateName: '当前状态',
+ title: '当前状态',
+ detail_mode: 'runtime',
+ baseline_version: baselineSnapshot.version,
+ currentVersion: baselineSnapshot.version,
+ app_version_info: '当前运行态相较快照基线的未保存修改。',
+ create_time: appDetail.update_time || appDetail.create_time,
+ diff_summary: overview.change_summary || {},
+ component_diff_details: overview.component_diff_details || {},
+ },
+ timelineState: 'runtime',
+ isCurrent: true,
+ });
+ }
+
+ return timeline.concat(
+ versions.map((record, index) => {
+ const isCurrentBaseline = `${record.version_id}` === `${baselineSnapshotId || ''}`;
+ return {
+ id: `snapshot-${record.version_id}`,
+ version: record.version || '未命名版本',
+ createTime: record.create_time,
+ timeLabel: '创建于',
+ description: record.app_version_info || '当前快照未填写版本说明',
+ componentLabel: '包含组件',
+ componentNames: record.includedComponentNames || [],
+ emptyComponentText: '当前版本未返回组件信息',
+ actionVersion: record.version || '',
+ detail: record,
+ timelineState: isCurrentBaseline
+ ? 'current'
+ : baselineSnapshotIndex !== -1 && index < baselineSnapshotIndex
+ ? 'upgrade'
+ : 'history',
+ isCurrent: isCurrentBaseline,
+ isCurrentBaseline,
+ isLatestCreated: `${record.version_id}` === `${versions[0] && versions[0].version_id}`,
+ };
+ })
+ );
+ };
+
+ handleCreateSnapshot = async () => {
+ const { dispatch } = this.props;
+ const { teamName, regionName, appID } = this.props.match.params;
+ let overview = this.state.overview || {};
+ try {
+ const res = await getAppVersionOverview({
+ team_name: teamName,
+ group_id: appID
+ });
+ overview = (res && res.bean) || {};
+ if (!this.unmounted) {
+ this.setState({ overview });
+ }
+ } catch (error) {
+ overview = this.state.overview || {};
+ }
+ if (!this.canCreateSnapshot(overview)) {
+ notification.warning({ message: '当前没有新的变更，无需创建快照' });
+ return;
+ }
+ dispatch({
+ type: 'application/ShareGroup',
+ payload: {
+ team_name: teamName,
+ group_id: appID,
+ scope: '',
+ target: {},
+ snapshot_mode: true,
+ snapshot_app_id: overview.template_id || ''
+ },
+ callback: data => {
+ const bean = data && data.bean;
+ const recordId = bean && bean.ID;
+ const appModelId = (bean && bean.app_id) || overview.template_id;
+ const latestSnapshotVersion = getLatestSnapshotVersionSeed(overview);
+ if (!recordId) {
+ notification.error({ message: '打开快照配置页失败' });
+ return;
+ }
+ dispatch(
+ routerRedux.push(
+ `/team/${teamName}/region/${regionName}/apps/${appID}/share/${recordId}/one?mode=snapshot${appModelId ? `&preferred_app_id=${appModelId}` : ''}${latestSnapshotVersion ? `&latest_snapshot_version=${latestSnapshotVersion}` : ''}`
+ )
+ );
+ }
+ });
+ };
+
+ handleRollbackSnapshot = async item => {
+ const versionId = item && item.detail && item.detail.version_id;
+ if (!versionId) {
+ return;
+ }
+ try {
+ const res = await rollbackAppVersionSnapshot({
+ team_name: globalUtil.getCurrTeamName(),
+ group_id: this.getAppId(),
+ version_id: versionId
+ });
+ this.clearRollbackRefreshPolling();
+ const rollbackRecord = (res && res.bean) || {};
+ const rollbackRecordId = rollbackRecord.ID || rollbackRecord.id;
+ this.openRollbackRecordsDrawer(rollbackRecordId);
+ if (rollbackRecordId) {
+ this.pollRollbackRecordUntilSettled(rollbackRecordId);
+ } else {
+ await Promise.all([
+ this.fetchAppVersionOverview(),
+ this.fetchSnapshotVersions(),
+ this.fetchAppDetail(),
+ this.fetchRollbackRecords()
+ ]);
+ }
+ notification.success({ message: '回滚任务已创建' });
+ } catch (error) {
+ notification.error({ message: '回滚失败' });
+ }
+ };
+
+ confirmRollbackSnapshot = item => {
+ const snapshotVersion = item && item.detail && item.detail.version;
+ if (!snapshotVersion) {
+ return;
+ }
+ Modal.confirm({
+ title: '确认回滚',
+ content: `应用当前运行态将回滚到快照 ${snapshotVersion}，未保存的修改可能会丢失，确认继续吗？`,
+ okText: '确认回滚',
+ cancelText: '取消',
+ onOk: () => this.handleRollbackSnapshot(item)
+ });
+ };
+
+ getRequestErrorMessage = (error, fallback) => {
+ return (
+ (error && error.msg_show) ||
+ (error && error.response && error.response.data && error.response.data.msg_show) ||
+ (error && error.data && error.data.msg_show) ||
+ fallback
+ );
+ };
+
+ handleDeleteSnapshot = async versionId => {
+ try {
+ const res = await deleteAppVersionSnapshot({
+ team_name: globalUtil.getCurrTeamName(),
+ group_id: this.getAppId(),
+ version_id: versionId
+ });
+ notification.success({
+ message: (res && res.msg_show) || '删除成功'
+ });
+ await Promise.all([
+ this.fetchAppVersionOverview({ refreshExportStatus: false }),
+ this.fetchSnapshotVersions({ refreshExportStatus: false })
+ ]);
+ } catch (error) {
+ notification.error({
+ message: this.getRequestErrorMessage(error, '删除失败')
+ });
+ }
+ };
+
+ confirmDeleteSnapshot = item => {
+ if (!this.canDeleteSnapshot(item)) {
+ return;
+ }
+ Modal.confirm({
+ title: '删除历史版本',
+ content: '删除后该历史版本将无法再查看、发布或回滚，且不可恢复。',
+ okText: '确认删除',
+ cancelText: '取消',
+ onOk: () => this.handleDeleteSnapshot(item.detail.version_id)
+ });
+ };
+
+ continuePublishRecord = record => {
+ if (!record || !record.record_id) {
+ return;
+ }
+ this.navigateToPublishStep(record.record_id, record.step);
+ };
+
+ cancelPublishRecord = async recordId => {
+ if (!recordId) {
+ notification.warning({
+ message: formatMessage({ id: 'notification.warn.parameter_error' })
+ });
+ return;
+ }
+ try {
+ await cancelShareRecord({
+ team_name: globalUtil.getCurrTeamName(),
+ share_id: recordId
+ });
+ notification.success({ message: '已取消发布' });
+ this.fetchPublishRecords();
+ } catch (error) {
+ notification.error({
+ message: this.getRequestErrorMessage(error, '取消发布失败')
+ });
+ }
+ };
+
+ handleDeletePublishRecord = async recordId => {
+ try {
+ await removeShareRecord({
+ team_name: globalUtil.getCurrTeamName(),
+ app_id: this.getAppId(),
+ record_id: recordId
+ });
+ notification.success({ message: '删除成功' });
+ this.fetchPublishRecords();
+ } catch (error) {
+ notification.error({
+ message: this.getRequestErrorMessage(error, '删除失败')
+ });
+ }
+ };
+
+ confirmDeletePublishRecord = recordId => {
+ if (!recordId) {
+ return;
+ }
+ Modal.confirm({
+ title: '删除发布记录',
+ content: '删除后该发布记录将不可恢复，是否继续？',
+ okText: '确认删除',
+ cancelText: '取消',
+ onOk: () => this.handleDeletePublishRecord(recordId)
+ });
+ };
+
+ setSharedAppExporting = status => {
+ this.setState({ sharedAppExporting: status });
+ };
+
+ hideSharedAppExport = () => {
+ this.setState({ showExporterApp: false, exporterAppData: null });
+ };
+
+ buildPublishRecordExportData = record => {
+ const versions = Array.isArray(record && record.version)
+ ? record.version.filter(Boolean)
+ : record && record.version
+ ? [record.version]
+ : [];
+ return {
+ ...record,
+ version: versions,
+ versions_info:
+ versions.length > 0
+ ? versions.map(version => ({
+ ...(record && record.app_version_info ? record.app_version_info : {}),
+ version
+ }))
+ : [],
+ app_id: record && record.app_model_id
+ };
+ };
+
+ openPublishRecordsDrawer = () => {
+ this.setState({ publishRecordsVisible: true });
+ };
+
+ closePublishRecordsDrawer = () => {
+ this.setState({ publishRecordsVisible: false });
+ };
+
+ showSharedAppExport = data => {
+ if (!data) {
+ return;
+ }
+ const exporterAppData = this.buildPublishRecordExportData(data);
+ if (!exporterAppData.app_id || exporterAppData.version.length === 0) {
+ notification.warning({ message: '当前发布记录暂不可导出' });
+ return;
+ }
+ this.setState({
+ showExporterApp: true,
+ exporterAppData
+ });
+ };
+
+ buildSnapshotExportData = detail => {
+ const { overview } = this.state;
+ const version = detail && detail.version;
+ if (!overview || !overview.template_id || !version) {
+ return null;
+ }
+ const versionInfo = detail && detail.version_info ? detail.version_info : {};
+ return {
+ app_id: overview.template_id,
+ version: [version],
+ versions_info: [
+ {
+ ...versionInfo,
+ version
+ }
+ ]
+ };
+ };
+
+ showSnapshotExport = detail => {
+ const exporterAppData = this.buildSnapshotExportData(detail);
+ if (!exporterAppData) {
+ notification.warning({ message: '当前快照暂不可导出' });
+ return;
+ }
+ this.setState({
+ showExporterApp: true,
+ exporterAppData
+ });
+ };
+
+ canRollbackSnapshot = item => {
+ const { overview } = this.state;
+ if (!item || !item.detail || !item.detail.version_id) {
+ return false;
+ }
+ if (item.timelineState === 'runtime') {
+ return false;
+ }
+ if (item.timelineState === 'history' || item.timelineState === 'upgrade') {
+ return true;
+ }
+ return !!(overview && overview.has_changes);
+ };
+
+ canDeleteSnapshot = item => {
+ const { overview } = this.state;
+ if (!item || !item.detail || !item.detail.version_id) {
+ return false;
+ }
+ if (!['history', 'upgrade'].includes(item.timelineState)) {
+ return false;
+ }
+ return `${item.detail.version_id}` !== `${overview && overview.current_version_id}`;
+ };
+
+ canCreateSnapshot = overview => {
+ const currentOverview = overview || this.state.overview || {};
+ const hasSnapshotBaseline = !!(
+ currentOverview.has_template &&
+ currentOverview.current_version &&
+ Number(currentOverview.snapshot_count || 0) > 0
+ );
+ if (!hasSnapshotBaseline) {
+ return true;
+ }
+ return !!currentOverview.has_changes;
+ };
+
+ renderRollbackStatusTag = status => {
+ if (status === undefined || status === null || status === '') {
+ return 版本变更
+ {!record.has_previous_version ? (
+ 该版本是首个快照，当前没有可对比的上一个版本。
+ ) : (
+ <>
+
+ 当前展示的是版本 {record.version || '-'} 相较上一版本 {record.previous_version || '-'} 的差异。
+
+ {this.renderDiffDetailContent(
+ diffSummary,
+ componentDiffDetails,
+ '这个版本与上一个快照没有配置差异。'
+ )}
+
+ )}
+
+
+
+
+ {this.getAppName()}
+
+ {overview.has_changes
+ ? `当前应用存在未快照变更：新增 ${changeSummary.added_count || 0} 个组件，修改 ${changeSummary.updated_count || 0} 个组件，删除 ${changeSummary.removed_count || 0} 个组件。`
+ : '默认只展示当前应用的版本时间线；如果来源模板有更新，会在上方横幅里提示。'}
+
+
+
+
+
+
+
+
+
+ 当前版本
+ {personalTemplate.currentVersion}
+
+
+ 快照数量
+ {overview.snapshot_count || 0}
+
+
+ 来源模板
+ {overview.source_template_count || this.state.sourceGroups.length}
+
+
+ 最近发布时间
+
+ {latestPublish ? this.formatTime(latestPublish.create_time) : '未发布'}
+
+
+
+
+
+
+
+
+
+ {`发现 ${upgradeableComponentCount} 个组件有新版本`}
+
+
+ {upgradeableSources.length > 1
+ ? '建议查看升级详情后升级。'
+ : `${primarySource.templateName} 可升级到 ${primarySource.latestVersion}。`}
+
+
+ {upgradeableSources.map(source => (
+
+ {source.templateName} {source.currentVersion} -> {source.latestVersion}
+
+ ))}
+
+
+
+
+
+ {value}
+
+ {record.templateType === 'personal' ? '个人模板' : '应用商店'}
+
+
+ )
+ },
+ {
+ title: '当前版本',
+ dataIndex: 'currentVersion',
+ key: 'currentVersion',
+ render: value =>
+ {record.templateType === 'market' && (
+
+ )}
+ {record.templateType === 'personal' && (
+ this.renderPublishAction({
+ recordVersion: record.currentVersion,
+ disabled: record.currentVersion === '未发布',
+ size: 'small'
+ })
+ )}
+
+
+ )
+ }
+ ];
+
+ return (
+
+
+
+
+ 模板列表
+ 上方切换模板，下方时间线只展示当前选中模板。
+
+
+
+