52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
import HighlightCode from '@/components/highlight-code';
|
|
import React, { useMemo } from 'react';
|
|
import styled from 'styled-components';
|
|
import { generateRegisterCommand } from '../config';
|
|
|
|
const Title = styled.h3`
|
|
font-weight: 600;
|
|
color: var(--ant-color-text);
|
|
margin-bottom: 12px;
|
|
margin-top: 12px;
|
|
font-size: var(--font-size-normal);
|
|
.ant-tag {
|
|
color: var(--ant-color-text-secondary);
|
|
font-weight: 400;
|
|
}
|
|
`;
|
|
|
|
type AddModalProps = {
|
|
registrationInfo: {
|
|
token: string;
|
|
image: string;
|
|
server_url: string;
|
|
cluster_id: number;
|
|
};
|
|
};
|
|
const AddCluster: React.FC<AddModalProps> = ({ registrationInfo }) => {
|
|
const code = useMemo(() => {
|
|
return generateRegisterCommand({
|
|
server: registrationInfo?.server_url || window.location.origin,
|
|
clusterId: registrationInfo?.cluster_id,
|
|
registrationToken: registrationInfo?.token
|
|
});
|
|
}, [registrationInfo]);
|
|
|
|
const applyCommand = useMemo(() => {
|
|
return `kubectl apply -f manifest.yaml`;
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
<HighlightCode
|
|
theme="dark"
|
|
code={code.replace(/\\/g, '')}
|
|
copyValue={code}
|
|
lang="bash"
|
|
></HighlightCode>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AddCluster;
|