|
@@ -6,7 +6,7 @@ import { RouteComponentProps, withRouter } from "react-router";
|
|
|
|
|
|
|
|
import api from "shared/api";
|
|
import api from "shared/api";
|
|
|
import { Context } from "shared/Context";
|
|
import { Context } from "shared/Context";
|
|
|
-import { pushFiltered } from "shared/routing";
|
|
|
|
|
|
|
+import { getQueryParam, getQueryParams, pushFiltered } from "shared/routing";
|
|
|
|
|
|
|
|
import { hardcodedNames } from "shared/hardcodedNameDict";
|
|
import { hardcodedNames } from "shared/hardcodedNameDict";
|
|
|
import SourcePage from "./SourcePage";
|
|
import SourcePage from "./SourcePage";
|
|
@@ -16,6 +16,7 @@ import TitleSection from "components/TitleSection";
|
|
|
|
|
|
|
|
import {
|
|
import {
|
|
|
ActionConfigType,
|
|
ActionConfigType,
|
|
|
|
|
+ ChartTypeWithExtendedConfig,
|
|
|
FullActionConfigType,
|
|
FullActionConfigType,
|
|
|
PorterTemplate,
|
|
PorterTemplate,
|
|
|
StorageType,
|
|
StorageType,
|
|
@@ -26,6 +27,8 @@ type PropsType = RouteComponentProps & {
|
|
|
currentTemplate: PorterTemplate;
|
|
currentTemplate: PorterTemplate;
|
|
|
hideLaunchFlow: () => void;
|
|
hideLaunchFlow: () => void;
|
|
|
form: any;
|
|
form: any;
|
|
|
|
|
+ isCloning: boolean;
|
|
|
|
|
+ clonedChart: ChartTypeWithExtendedConfig;
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const defaultActionConfig: ActionConfigType = {
|
|
const defaultActionConfig: ActionConfigType = {
|
|
@@ -38,7 +41,9 @@ const defaultActionConfig: ActionConfigType = {
|
|
|
const LaunchFlow: React.FC<PropsType> = (props) => {
|
|
const LaunchFlow: React.FC<PropsType> = (props) => {
|
|
|
const context = useContext(Context);
|
|
const context = useContext(Context);
|
|
|
|
|
|
|
|
- const [currentPage, setCurrentPage] = useState("source");
|
|
|
|
|
|
|
+ const [currentPage, setCurrentPage] = useState(
|
|
|
|
|
+ props.isCloning ? "settings" : "source"
|
|
|
|
|
+ );
|
|
|
const [templateName, setTemplateName] = useState("");
|
|
const [templateName, setTemplateName] = useState("");
|
|
|
const [saveValuesStatus, setSaveValuesStatus] = useState("");
|
|
const [saveValuesStatus, setSaveValuesStatus] = useState("");
|
|
|
const [sourceType, setSourceType] = useState("");
|
|
const [sourceType, setSourceType] = useState("");
|
|
@@ -60,25 +65,23 @@ const LaunchFlow: React.FC<PropsType> = (props) => {
|
|
|
const [selectedRegistry, setSelectedRegistry] = useState(null);
|
|
const [selectedRegistry, setSelectedRegistry] = useState(null);
|
|
|
const [shouldCreateWorkflow, setShouldCreateWorkflow] = useState(true);
|
|
const [shouldCreateWorkflow, setShouldCreateWorkflow] = useState(true);
|
|
|
|
|
|
|
|
- const setRandomNameIfEmpty = () => {
|
|
|
|
|
- if (!templateName) {
|
|
|
|
|
- const randomTemplateName = randomWords({ exactly: 3, join: "-" });
|
|
|
|
|
- setTemplateName(randomTemplateName);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ const generateRandomName = () => {
|
|
|
|
|
+ const randomTemplateName = randomWords({ exactly: 3, join: "-" });
|
|
|
|
|
+ return randomTemplateName;
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const getFullActionConfig = (): FullActionConfigType => {
|
|
const getFullActionConfig = (): FullActionConfigType => {
|
|
|
- let imageRepoUri = `${selectedRegistry.url}/${templateName}-${selectedNamespace}`;
|
|
|
|
|
|
|
+ let imageRepoUri = `${selectedRegistry?.url}/${templateName}-${selectedNamespace}`;
|
|
|
|
|
|
|
|
// DockerHub registry integration is per repo
|
|
// DockerHub registry integration is per repo
|
|
|
- if (selectedRegistry.service === "dockerhub") {
|
|
|
|
|
- imageRepoUri = selectedRegistry.url;
|
|
|
|
|
|
|
+ if (selectedRegistry?.service === "dockerhub") {
|
|
|
|
|
+ imageRepoUri = selectedRegistry?.url;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
return {
|
|
|
git_repo: actionConfig.git_repo,
|
|
git_repo: actionConfig.git_repo,
|
|
|
branch: branch,
|
|
branch: branch,
|
|
|
- registry_id: selectedRegistry.id,
|
|
|
|
|
|
|
+ registry_id: selectedRegistry?.id,
|
|
|
dockerfile_path: dockerfilePath,
|
|
dockerfile_path: dockerfilePath,
|
|
|
folder_path: folderPath,
|
|
folder_path: folderPath,
|
|
|
image_repo_uri: imageRepoUri,
|
|
image_repo_uri: imageRepoUri,
|
|
@@ -91,6 +94,8 @@ const LaunchFlow: React.FC<PropsType> = (props) => {
|
|
|
let { currentCluster, currentProject, setCurrentError } = context;
|
|
let { currentCluster, currentProject, setCurrentError } = context;
|
|
|
setSaveValuesStatus("loading");
|
|
setSaveValuesStatus("loading");
|
|
|
|
|
|
|
|
|
|
+ const name = templateName || generateRandomName();
|
|
|
|
|
+
|
|
|
let values = {};
|
|
let values = {};
|
|
|
for (let key in wildcard) {
|
|
for (let key in wildcard) {
|
|
|
_.set(values, key, wildcard[key]);
|
|
_.set(values, key, wildcard[key]);
|
|
@@ -103,7 +108,7 @@ const LaunchFlow: React.FC<PropsType> = (props) => {
|
|
|
template_name: props.currentTemplate.name,
|
|
template_name: props.currentTemplate.name,
|
|
|
template_version: props.currentTemplate?.currentVersion || "latest",
|
|
template_version: props.currentTemplate?.currentVersion || "latest",
|
|
|
values: values,
|
|
values: values,
|
|
|
- name: props.currentTemplate.name.toLowerCase().trim(),
|
|
|
|
|
|
|
+ name,
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
id: currentProject.id,
|
|
id: currentProject.id,
|
|
@@ -157,8 +162,14 @@ const LaunchFlow: React.FC<PropsType> = (props) => {
|
|
|
_.set(values, key, rawValues[key]);
|
|
_.set(values, key, rawValues[key]);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- let url = imageUrl,
|
|
|
|
|
- tag = imageTag;
|
|
|
|
|
|
|
+ let url = imageUrl;
|
|
|
|
|
+ let tag = imageTag;
|
|
|
|
|
+
|
|
|
|
|
+ if (props.isCloning) {
|
|
|
|
|
+ url = props.clonedChart.config.image.repository;
|
|
|
|
|
+ tag = props.clonedChart.config.image.tag;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
if (url.includes(":")) {
|
|
if (url.includes(":")) {
|
|
|
let splits = url.split(":");
|
|
let splits = url.split(":");
|
|
|
url = splits[0];
|
|
url = splits[0];
|
|
@@ -206,6 +217,8 @@ const LaunchFlow: React.FC<PropsType> = (props) => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
var external_domain: string;
|
|
var external_domain: string;
|
|
|
|
|
+
|
|
|
|
|
+ const release_name = templateName || generateRandomName();
|
|
|
// check if template is docker and create external domain if necessary
|
|
// check if template is docker and create external domain if necessary
|
|
|
if (props.currentTemplate.name == "web") {
|
|
if (props.currentTemplate.name == "web") {
|
|
|
if (values?.ingress?.enabled && !values?.ingress?.custom_domain) {
|
|
if (values?.ingress?.enabled && !values?.ingress?.custom_domain) {
|
|
@@ -217,7 +230,7 @@ const LaunchFlow: React.FC<PropsType> = (props) => {
|
|
|
{
|
|
{
|
|
|
id: currentProject.id,
|
|
id: currentProject.id,
|
|
|
cluster_id: currentCluster.id,
|
|
cluster_id: currentCluster.id,
|
|
|
- release_name: templateName,
|
|
|
|
|
|
|
+ release_name,
|
|
|
namespace: selectedNamespace,
|
|
namespace: selectedNamespace,
|
|
|
}
|
|
}
|
|
|
)
|
|
)
|
|
@@ -240,7 +253,11 @@ const LaunchFlow: React.FC<PropsType> = (props) => {
|
|
|
|
|
|
|
|
let githubActionConfig: FullActionConfigType = null;
|
|
let githubActionConfig: FullActionConfigType = null;
|
|
|
if (sourceType === "repo") {
|
|
if (sourceType === "repo") {
|
|
|
- githubActionConfig = getFullActionConfig();
|
|
|
|
|
|
|
+ if (props.isCloning) {
|
|
|
|
|
+ githubActionConfig = props.clonedChart?.git_action_config;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ githubActionConfig = getFullActionConfig();
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
api
|
|
api
|
|
@@ -251,7 +268,7 @@ const LaunchFlow: React.FC<PropsType> = (props) => {
|
|
|
values: values,
|
|
values: values,
|
|
|
template_name: props.currentTemplate.name.toLowerCase().trim(),
|
|
template_name: props.currentTemplate.name.toLowerCase().trim(),
|
|
|
template_version: props.currentTemplate?.currentVersion || "latest",
|
|
template_version: props.currentTemplate?.currentVersion || "latest",
|
|
|
- name: templateName,
|
|
|
|
|
|
|
+ name: release_name,
|
|
|
github_action_config: githubActionConfig,
|
|
github_action_config: githubActionConfig,
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
@@ -318,7 +335,10 @@ const LaunchFlow: React.FC<PropsType> = (props) => {
|
|
|
);
|
|
);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- setRandomNameIfEmpty();
|
|
|
|
|
|
|
+ if (!templateName && !props.isCloning) {
|
|
|
|
|
+ const newTemplateName = generateRandomName();
|
|
|
|
|
+ setTemplateName(newTemplateName);
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
if (currentPage === "workflow" && currentTab === "porter") {
|
|
if (currentPage === "workflow" && currentTab === "porter") {
|
|
|
const fullActionConfig = getFullActionConfig();
|
|
const fullActionConfig = getFullActionConfig();
|
|
@@ -337,6 +357,7 @@ const LaunchFlow: React.FC<PropsType> = (props) => {
|
|
|
// Display main (non-source) settings page
|
|
// Display main (non-source) settings page
|
|
|
return (
|
|
return (
|
|
|
<SettingsPage
|
|
<SettingsPage
|
|
|
|
|
+ isCloning={props.isCloning}
|
|
|
onSubmit={currentTab === "porter" ? handleSubmit : handleSubmitAddon}
|
|
onSubmit={currentTab === "porter" ? handleSubmit : handleSubmitAddon}
|
|
|
saveValuesStatus={saveValuesStatus}
|
|
saveValuesStatus={saveValuesStatus}
|
|
|
selectedNamespace={selectedNamespace}
|
|
selectedNamespace={selectedNamespace}
|
|
@@ -373,10 +394,14 @@ const LaunchFlow: React.FC<PropsType> = (props) => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
return (
|
|
|
- <StyledLaunchFlow>
|
|
|
|
|
|
|
+ <StyledLaunchFlow disableMarginTop={props.isCloning}>
|
|
|
<TitleSection handleNavBack={props.hideLaunchFlow}>
|
|
<TitleSection handleNavBack={props.hideLaunchFlow}>
|
|
|
{renderIcon()}
|
|
{renderIcon()}
|
|
|
- New {currentTemplateName} {currentTab === "porter" ? null : "Instance"}
|
|
|
|
|
|
|
+ {!props.isCloning
|
|
|
|
|
+ ? `New ${currentTemplateName} ${
|
|
|
|
|
+ currentTab !== "porter" ? "Instance" : ""
|
|
|
|
|
+ }`
|
|
|
|
|
+ : `Cloning ${currentTemplateName} deployment: ${props.clonedChart.name}`}
|
|
|
</TitleSection>
|
|
</TitleSection>
|
|
|
{renderCurrentPage()}
|
|
{renderCurrentPage()}
|
|
|
<Br />
|
|
<Br />
|
|
@@ -424,5 +449,6 @@ const Polymer = styled.div`
|
|
|
const StyledLaunchFlow = styled.div`
|
|
const StyledLaunchFlow = styled.div`
|
|
|
width: calc(90% - 130px);
|
|
width: calc(90% - 130px);
|
|
|
min-width: 300px;
|
|
min-width: 300px;
|
|
|
- margin-top: calc(50vh - 380px);
|
|
|
|
|
|
|
+ margin-top: ${(props: { disableMarginTop: boolean }) =>
|
|
|
|
|
+ props.disableMarginTop ? "inherit" : "calc(50vh - 380px)"};
|
|
|
`;
|
|
`;
|