Skip to content

Commit

Permalink
feat:Add the operation of resource pool on Topo (#262)
Browse files Browse the repository at this point in the history 
* feat:Add the operation of resource pool on Topo

* Code restoration

* feat:Add state:minResource

* fix:resolve resource pool value conflicts

* feat:Custom cluster mdoe Select component

* i18n
  • Loading branch information
@yang1666204
yang1666204 authored Mar 27, 2024
1 parent 9366966 commit ea5467f
Show file tree
Hide file tree
Showing 36 changed files with 805 additions and 212 deletions.
2 changes: 1 addition & 1 deletion ui/src/components/EventsTable/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ export default function EventsTable({
defaultExpand = false,
name
}: EventsTableProps) {
const defaultParams = {};
const defaultParams:API.EventParams = {};
if(objectType){
defaultParams.objectType = objectType;
}
Expand Down
2 changes: 1 addition & 1 deletion ui/src/components/MonitorComp/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ interface MonitorCompProps {
filterLabel: API.MetricsLabels;
queryRange: QueryRangeType;
isRefresh?: boolean;
queryScope:API.EventObjectType;
queryScope:API.MetricScope;
type: API.MonitorUseTarget;
groupLabels:API.LableKeys[];
useFor?: API.MonitorUseFor;
Expand Down
5 changes: 3 additions & 2 deletions ui/src/components/TopoComponent/G6register.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@ const reactStyles = {

function ReactNode(handleClick?: any) {
return ({ cfg }: any) => {
// Zones not included in the tenant will be disabled
const { label, status, typeText, disable } = cfg;
return (
<Group>
Expand Down Expand Up @@ -191,15 +192,15 @@ function ReactNode(handleClick?: any) {
</Text>
{cfg.type !== 'server' && (
<Image
onClick={disable ? null : handleClick}
onClick={ handleClick}
id={cfg.label}
style={{
position: 'absolute',
x: 130,
y: 16,
width: 2.5,
height: 16,
cursor: disable ? 'auto' : 'pointer',
cursor:'pointer',
img: moreImg,
}}
name="moreImg"
Expand Down
41 changes: 31 additions & 10 deletions ui/src/components/TopoComponent/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,22 +76,43 @@ const clusterOperateOfTenant: OperateTypeLabel = [
},
];

const zoneOperateOfTenant: OperateTypeLabel = [
{
value: 'modifyUnitSpecification',
label: intl.formatMessage({
id: 'Dashboard.components.TopoComponent.constants.AdjustUnitSpecifications',
defaultMessage: '调整 Unit 规格',
}),
},
];
const getZoneOperateOfTenant = (
haveResourcePool: boolean,
): OperateTypeLabel => {
return haveResourcePool
? [
{
value: 'editResourcePools',
label: intl.formatMessage({
id: 'Dashboard.components.TopoComponent.constants.EditResourcePool',
defaultMessage: '编辑资源池',
}),
},
{
value: 'deleteResourcePool',
label: intl.formatMessage({
id: 'Dashboard.components.TopoComponent.constants.DeleteAResourcePool',
defaultMessage: '删除资源池',
}),
},
]
: [
{
value: 'createResourcePools',
label: intl.formatMessage({
id: 'Dashboard.components.TopoComponent.constants.AddAResourcePool',
defaultMessage: '新增资源池',
}),
},
];
};

export {
clusterOperate,
clusterOperateOfTenant,
getZoneOperateOfTenant,
serverOperate,
zoneOperate,
zoneOperateOfTenant,
};

export type { OperateTypeLabel };
84 changes: 76 additions & 8 deletions ui/src/components/TopoComponent/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,18 @@ import showDeleteConfirm from '@/components/customModal/DeleteModal';
import OperateModal from '@/components/customModal/OperateModal';
import { RESULT_STATUS } from '@/constants';
import BasicInfo from '@/pages/Cluster/Detail/Overview/BasicInfo';
import { getClusterFromTenant, getZonesOptions } from '@/pages/Tenant/helper';
import { deleteObcluster, deleteObzone, getClusterDetailReq } from '@/services';
import { deleteObtenantPool } from '@/services/tenant';
import { getNSName } from '../../pages/Cluster/Detail/Overview/helper';
import { ReactNode, config } from './G6register';
import type { OperateTypeLabel } from './constants';
import {
clusterOperate,
clusterOperateOfTenant,
getZoneOperateOfTenant,
serverOperate,
zoneOperate,
zoneOperateOfTenant,
} from './constants';
import { appenAutoShapeListener, checkIsSame, getServerNumber } from './helper';

Expand All @@ -29,6 +31,9 @@ interface TopoProps {
namespace?: string;
clusterNameOfKubectl?: string; // k8s resource name
header?: ReactElement;
resourcePoolDefaultValue?: any;
refreshTenant?: () => void;
defaultUnitCount?: number;
}

//Cluster topology diagram component
Expand All @@ -37,11 +42,13 @@ export default function TopoComponent({
header,
namespace,
clusterNameOfKubectl,
resourcePoolDefaultValue,
refreshTenant,
defaultUnitCount,
}: TopoProps) {
const clusterOperateList = tenantReplicas
? clusterOperateOfTenant
: clusterOperate;
const zoneOperateList = tenantReplicas ? zoneOperateOfTenant : zoneOperate;
const modelRef = useRef<HTMLInputElement>(null);
const [visible, setVisible] = useState<boolean>(false);
const [operateList, setOprateList] =
Expand Down Expand Up @@ -79,6 +86,7 @@ export default function TopoComponent({
},
},
);

//Node more icon click event
const handleClick = (evt: IG6GraphEvent) => {
if (modelRef.current) {
Expand All @@ -87,8 +95,18 @@ export default function TopoComponent({
setOprateList(clusterOperateList);
break;
case 'zone':
setOprateList(zoneOperateList);
chooseZoneName.current = evt.item?._cfg?.model?.label as string;
const zone = evt.item?._cfg?.model?.label as string;
if (tenantReplicas) {
const { setEditZone } = resourcePoolDefaultValue;
if (setEditZone) setEditZone(zone);
const haveResourcePool = !!tenantReplicas?.find(
(replica) => replica.zone === zone,
);
setOprateList(getZoneOperateOfTenant(haveResourcePool));
} else {
setOprateList(zoneOperate);
}
chooseZoneName.current = zone;
break;
case 'server':
setOprateList(serverOperate);
Expand Down Expand Up @@ -171,6 +189,21 @@ export default function TopoComponent({
graph.current.render();
appenAutoShapeListener(graph.current);
};
// delete resource pool
const deleteResourcePool = async (zoneName: string) => {
const [ns, name] = getNSName();
const res = await deleteObtenantPool({ ns, name, zoneName });
if (res.successful) {
if (refreshTenant) refreshTenant();
message.success(
res.message ||
intl.formatMessage({
id: 'Dashboard.Detail.Overview.Replicas.DeletedSuccessfully',
defaultMessage: '删除成功',
}),
);
}
};

/**
* Call up the operation and maintenance operation modal
Expand Down Expand Up @@ -215,10 +248,30 @@ export default function TopoComponent({
setOperateModalVisible(true);
}

if (operate === 'modifyUnitSpecification') {
modalType.current = 'modifyUnitSpecification';
if (operate === 'editResourcePools') {
modalType.current = 'editResourcePools';
setOperateModalVisible(true);
}

if (operate === 'createResourcePools') {
modalType.current = 'createResourcePools';
setOperateModalVisible(true);
}

if (operate === 'deleteResourcePool') {
modalType.current = 'deleteResourcePool';
showDeleteConfirm({
onOk: () => deleteResourcePool(chooseZoneName.current),
title: intl.formatMessage(
{
id: 'Dashboard.components.TopoComponent.AreYouSureYouWant',
defaultMessage:
'确定要删除该租户在{{chooseZoneNameCurrent}}上的资源池吗？',
},
{ chooseZoneNameCurrent: chooseZoneName.current },
),
});
}
};

const mouseEnter = () => setInModal(true);
Expand Down Expand Up @@ -286,6 +339,7 @@ export default function TopoComponent({
modelRef.current?.removeEventListener('mouseleave', mouseLeave);
};
}, []);
const isCreatePool = modalType.current === 'createResourcePools';

// Use different pictures for nodes in different states
return (
Expand Down Expand Up @@ -320,8 +374,22 @@ export default function TopoComponent({
visible={operateModalVisible}
setVisible={setOperateModalVisible}
successCallback={operateSuccess}
zoneName={chooseZoneName.current}
defaultValue={chooseServerNum}
params={{
zoneName: chooseZoneName.current,
defaultValue: chooseServerNum,
defaultUnitCount: defaultUnitCount,
...resourcePoolDefaultValue,
newResourcePool: isCreatePool,
zonesOptions: isCreatePool
? getZonesOptions(
getClusterFromTenant(
resourcePoolDefaultValue?.clusterList,
resourcePoolDefaultValue?.clusterResourceName,
),
resourcePoolDefaultValue?.replicaList,
)
: undefined,
}}
/>
</div>
);
Expand Down
Loading

0 comments on commit ea5467f

Please sign in to comment.