|
|
@@ -1,4 +1,3 @@
|
|
|
-import DynamicLink from "components/DynamicLink";
|
|
|
import Heading from "components/form-components/Heading";
|
|
|
import Helper from "components/form-components/Helper";
|
|
|
import KeyValueArray from "components/form-components/KeyValueArray";
|
|
|
@@ -16,6 +15,8 @@ import {
|
|
|
} from "shared/types";
|
|
|
import styled, { keyframes } from "styled-components";
|
|
|
import yaml from "js-yaml";
|
|
|
+import DynamicLink from "components/DynamicLink";
|
|
|
+import { AxiosError } from "axios";
|
|
|
|
|
|
const DEFAULT_PAKETO_STACK = "paketobuildpacks/builder:full";
|
|
|
const DEFAULT_HEROKU_STACK = "heroku/buildpacks:20";
|
|
|
@@ -62,8 +63,13 @@ const BuildSettingsTab: React.FC<Props> = ({ chart, isPreviousVersion }) => {
|
|
|
|
|
|
const [buildConfig, setBuildConfig] = useState<BuildConfig>(null);
|
|
|
const [envVariables, setEnvVariables] = useState(
|
|
|
- chart.config?.container?.env?.normal || null
|
|
|
+ chart.config?.container?.env?.build || null
|
|
|
);
|
|
|
+ const [runningWorkflowURL, setRunningWorkflowURL] = useState("");
|
|
|
+ const [reRunError, setReRunError] = useState<{
|
|
|
+ title: string;
|
|
|
+ description: string;
|
|
|
+ }>(null);
|
|
|
const [buttonStatus, setButtonStatus] = useState<
|
|
|
"loading" | "successful" | string
|
|
|
>("");
|
|
|
@@ -99,7 +105,7 @@ const BuildSettingsTab: React.FC<Props> = ({ chart, isPreviousVersion }) => {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
- values.container.env.normal = envs;
|
|
|
+ values.container.env.build = { ...envs };
|
|
|
const valuesYaml = yaml.dump({ ...values });
|
|
|
try {
|
|
|
await api.upgradeChartValues(
|
|
|
@@ -128,12 +134,71 @@ const BuildSettingsTab: React.FC<Props> = ({ chart, isPreviousVersion }) => {
|
|
|
project_id: currentProject.id,
|
|
|
cluster_id: currentCluster.id,
|
|
|
git_installation_id: chart.git_action_config?.git_repo_id,
|
|
|
- owner: chart.git_action_config.repo?.split("/")[0],
|
|
|
- name: chart.git_action_config.repo?.split("/")[1],
|
|
|
- filename: `porter_${chart.name.replaceAll("-", "_")}.yaml`,
|
|
|
+ owner: chart.git_action_config?.git_repo?.split("/")[0],
|
|
|
+ name: chart.git_action_config?.git_repo?.split("/")[1],
|
|
|
+ branch: chart.git_action_config?.git_branch,
|
|
|
+ release_name: chart.name,
|
|
|
}
|
|
|
);
|
|
|
} catch (error) {
|
|
|
+ if (!error?.response) {
|
|
|
+ throw error;
|
|
|
+ }
|
|
|
+
|
|
|
+ let tmpError: AxiosError = error;
|
|
|
+
|
|
|
+ /**
|
|
|
+ * @smell
|
|
|
+ * Currently the expanded chart is clearing all the state when a chart update is triggered (saveEnvVariables).
|
|
|
+ * Temporary usage of setCurrentError until a context is applied to keep the state of the ReRunError during re renders.
|
|
|
+ */
|
|
|
+
|
|
|
+ if (tmpError.response.status === 400) {
|
|
|
+ // setReRunError({
|
|
|
+ // title: "No previous run found",
|
|
|
+ // description:
|
|
|
+ // "There are no previous runs for this workflow, please trigger manually a run before changing the build settings.",
|
|
|
+ // });
|
|
|
+ setCurrentError(
|
|
|
+ "There are no previous runs for this workflow, please trigger manually a run before changing the build settings."
|
|
|
+ );
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (tmpError.response.status === 409) {
|
|
|
+ // setReRunError({
|
|
|
+ // title: "The workflow is still running",
|
|
|
+ // description:
|
|
|
+ // 'If you want to make more changes, please choose the option "Save" until the workflow finishes.',
|
|
|
+ // });
|
|
|
+
|
|
|
+ if (typeof tmpError.response.data === "string") {
|
|
|
+ setRunningWorkflowURL(tmpError.response.data);
|
|
|
+ }
|
|
|
+ setCurrentError(
|
|
|
+ 'The workflow is still running. If you want to make more changes, please choose the option "Save" until the workflow finishes. You can check the current status of the workflow here ' +
|
|
|
+ tmpError.response.data
|
|
|
+ );
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (tmpError.response.status === 404) {
|
|
|
+ let description =
|
|
|
+ "Apparently there's no action file that corresponds to this deployment. ";
|
|
|
+ if (typeof tmpError.response.data === "string") {
|
|
|
+ const filename = tmpError.response.data;
|
|
|
+ description = description.concat(
|
|
|
+ `Please check that the file ${filename} exists on your repository.`
|
|
|
+ );
|
|
|
+ }
|
|
|
+ // setReRunError({
|
|
|
+ // title: "The action doesn't seem to exist",
|
|
|
+ // description,
|
|
|
+ // });
|
|
|
+
|
|
|
+ setCurrentError(description);
|
|
|
+ return;
|
|
|
+ }
|
|
|
throw error;
|
|
|
}
|
|
|
};
|
|
|
@@ -182,6 +247,34 @@ const BuildSettingsTab: React.FC<Props> = ({ chart, isPreviousVersion }) => {
|
|
|
</DisabledOverlay>
|
|
|
) : null}
|
|
|
<StyledSettingsSection blurContent={isPreviousVersion}>
|
|
|
+ {/* {reRunError !== null ? (
|
|
|
+ <AlertCard>
|
|
|
+ <AlertCardIcon className="material-icons">error</AlertCardIcon>
|
|
|
+ <AlertCardContent className="content">
|
|
|
+ <AlertCardTitle className="title">
|
|
|
+ {reRunError.title}
|
|
|
+ </AlertCardTitle>
|
|
|
+ {reRunError.description}
|
|
|
+ {runningWorkflowURL.length ? (
|
|
|
+ <>
|
|
|
+ {" "}
|
|
|
+ To go to the workflow{" "}
|
|
|
+ <DynamicLink to={runningWorkflowURL} target="_blank">
|
|
|
+ click here
|
|
|
+ </DynamicLink>
|
|
|
+ </>
|
|
|
+ ) : null}
|
|
|
+ </AlertCardContent>
|
|
|
+ <AlertCardAction
|
|
|
+ onClick={() => {
|
|
|
+ setReRunError(null);
|
|
|
+ setRunningWorkflowURL("");
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <span className="material-icons">close</span>
|
|
|
+ </AlertCardAction>
|
|
|
+ </AlertCard>
|
|
|
+ ) : null} */}
|
|
|
<Heading isAtTop>Build step environment variables:</Heading>
|
|
|
<KeyValueArray
|
|
|
values={envVariables}
|
|
|
@@ -191,17 +284,20 @@ const BuildSettingsTab: React.FC<Props> = ({ chart, isPreviousVersion }) => {
|
|
|
clusterId: currentCluster.id,
|
|
|
}}
|
|
|
setValues={(values) => {
|
|
|
- console.log(values);
|
|
|
setEnvVariables(values);
|
|
|
}}
|
|
|
></KeyValueArray>
|
|
|
|
|
|
- <Heading>Buildpack settings</Heading>
|
|
|
- <BuildpackConfigSection
|
|
|
- currentChart={chart}
|
|
|
- actionConfig={chart.git_action_config}
|
|
|
- onChange={(buildConfig) => setBuildConfig(buildConfig)}
|
|
|
- />
|
|
|
+ {!chart.git_action_config.dockerfile_path ? (
|
|
|
+ <>
|
|
|
+ <Heading>Buildpack settings</Heading>
|
|
|
+ <BuildpackConfigSection
|
|
|
+ currentChart={chart}
|
|
|
+ actionConfig={chart.git_action_config}
|
|
|
+ onChange={(buildConfig) => setBuildConfig(buildConfig)}
|
|
|
+ />
|
|
|
+ </>
|
|
|
+ ) : null}
|
|
|
<SaveButtonWrapper>
|
|
|
<MultiSaveButton
|
|
|
options={[
|
|
|
@@ -252,8 +348,6 @@ const BuildpackConfigSection: React.FC<{
|
|
|
[]
|
|
|
);
|
|
|
|
|
|
- const [runningWorkflowURL, setRunningWorkflowURL] = useState<string>(null);
|
|
|
-
|
|
|
useEffect(() => {
|
|
|
const currentBuildConfig = currentChart?.build_config;
|
|
|
|
|
|
@@ -473,28 +567,6 @@ const BuildpackConfigSection: React.FC<{
|
|
|
|
|
|
return (
|
|
|
<BuildpackConfigurationContainer>
|
|
|
- {runningWorkflowURL && (
|
|
|
- <AlertCard>
|
|
|
- <AlertCardIcon className="material-icons">error</AlertCardIcon>
|
|
|
- <AlertCardContent className="content">
|
|
|
- <AlertCardTitle className="title">
|
|
|
- The workflow is still running
|
|
|
- </AlertCardTitle>
|
|
|
- Please wait until it finishes before changing the buildpack
|
|
|
- configuration. To go to the workflow{" "}
|
|
|
- <DynamicLink to={runningWorkflowURL} target="_blank">
|
|
|
- click here
|
|
|
- </DynamicLink>
|
|
|
- </AlertCardContent>
|
|
|
- <AlertCardAction
|
|
|
- onClick={() => {
|
|
|
- setRunningWorkflowURL("");
|
|
|
- }}
|
|
|
- >
|
|
|
- <span className="material-icons">close</span>
|
|
|
- </AlertCardAction>
|
|
|
- </AlertCard>
|
|
|
- )}
|
|
|
<>
|
|
|
<SelectRow
|
|
|
value={selectedBuilder}
|
|
|
@@ -527,17 +599,6 @@ const BuildpackConfigSection: React.FC<{
|
|
|
)}
|
|
|
</>
|
|
|
</BuildpackConfigurationContainer>
|
|
|
- // <SaveButtonWrapper>
|
|
|
- // <SaveButton
|
|
|
- // onClick={() => {
|
|
|
- // handleSubmit();
|
|
|
- // }}
|
|
|
- // status={buttonStatus}
|
|
|
- // text="Save build config"
|
|
|
- // makeFlush
|
|
|
- // clearPosition
|
|
|
- // />
|
|
|
- // </SaveButtonWrapper>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
@@ -563,55 +624,6 @@ const fadeIn = keyframes`
|
|
|
}
|
|
|
`;
|
|
|
|
|
|
-const AlertCard = styled.div`
|
|
|
- transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
|
- border-radius: 4px;
|
|
|
- box-shadow: none;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 0.875rem;
|
|
|
- line-height: 1.43;
|
|
|
- letter-spacing: 0.01071em;
|
|
|
- border: 1px solid rgb(229, 115, 115);
|
|
|
- display: flex;
|
|
|
- padding: 6px 16px;
|
|
|
- color: rgb(244, 199, 199);
|
|
|
- margin-top: 20px;
|
|
|
- position: relative;
|
|
|
-`;
|
|
|
-
|
|
|
-const AlertCardIcon = styled.span`
|
|
|
- color: rgb(239, 83, 80);
|
|
|
- margin-right: 12px;
|
|
|
- padding: 7px 0px;
|
|
|
- display: flex;
|
|
|
- font-size: 22px;
|
|
|
- opacity: 0.9;
|
|
|
-`;
|
|
|
-
|
|
|
-const AlertCardTitle = styled.div`
|
|
|
- margin: -2px 0px 0.35em;
|
|
|
- font-size: 1rem;
|
|
|
- line-height: 1.5;
|
|
|
- letter-spacing: 0.00938em;
|
|
|
- font-weight: 500;
|
|
|
-`;
|
|
|
-
|
|
|
-const AlertCardContent = styled.div`
|
|
|
- padding: 8px 0px;
|
|
|
-`;
|
|
|
-
|
|
|
-const AlertCardAction = styled.button`
|
|
|
- position: absolute;
|
|
|
- right: 5px;
|
|
|
- top: 5px;
|
|
|
- border: none;
|
|
|
- background-color: unset;
|
|
|
- color: white;
|
|
|
- :hover {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-`;
|
|
|
-
|
|
|
const SaveButtonWrapper = styled.div`
|
|
|
width: 100%;
|
|
|
margin-top: 30px;
|
|
|
@@ -683,12 +695,6 @@ const EventName = styled.div`
|
|
|
color: #ffffff;
|
|
|
`;
|
|
|
|
|
|
-const EventReason = styled.div`
|
|
|
- font-family: "Work Sans", sans-serif;
|
|
|
- color: #aaaabb;
|
|
|
- margin-top: 5px;
|
|
|
-`;
|
|
|
-
|
|
|
const ActionContainer = styled.div`
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -719,27 +725,51 @@ const DeleteButton = styled.button`
|
|
|
}
|
|
|
`;
|
|
|
|
|
|
-const SubmitButton = styled.button`
|
|
|
- height: 35px;
|
|
|
- font-size: 13px;
|
|
|
+const AlertCard = styled.div`
|
|
|
+ transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: none;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 0.875rem;
|
|
|
+ line-height: 1.43;
|
|
|
+ letter-spacing: 0.01071em;
|
|
|
+ border: 1px solid rgb(229, 115, 115);
|
|
|
+ display: flex;
|
|
|
+ padding: 6px 16px;
|
|
|
+ color: rgb(244, 199, 199);
|
|
|
margin-top: 20px;
|
|
|
- margin-bottom: 30px;
|
|
|
+ position: relative;
|
|
|
+`;
|
|
|
+
|
|
|
+const AlertCardIcon = styled.span`
|
|
|
+ color: rgb(239, 83, 80);
|
|
|
+ margin-right: 12px;
|
|
|
+ padding: 7px 0px;
|
|
|
+ display: flex;
|
|
|
+ font-size: 22px;
|
|
|
+ opacity: 0.9;
|
|
|
+`;
|
|
|
+
|
|
|
+const AlertCardTitle = styled.div`
|
|
|
+ margin: -2px 0px 0.35em;
|
|
|
+ font-size: 1rem;
|
|
|
+ line-height: 1.5;
|
|
|
+ letter-spacing: 0.00938em;
|
|
|
font-weight: 500;
|
|
|
- font-family: "Work Sans", sans-serif;
|
|
|
+`;
|
|
|
+
|
|
|
+const AlertCardContent = styled.div`
|
|
|
+ padding: 8px 0px;
|
|
|
+`;
|
|
|
+
|
|
|
+const AlertCardAction = styled.button`
|
|
|
+ position: absolute;
|
|
|
+ right: 5px;
|
|
|
+ top: 5px;
|
|
|
+ border: none;
|
|
|
+ background-color: unset;
|
|
|
color: white;
|
|
|
- padding: 6px 20px 7px 20px;
|
|
|
- text-align: left;
|
|
|
- border: 0;
|
|
|
- border-radius: 5px;
|
|
|
- background: ${(props) => (!props.disabled ? props.color : "#aaaabb")};
|
|
|
- box-shadow: ${(props) =>
|
|
|
- !props.disabled ? "0 2px 5px 0 #00000030" : "none"};
|
|
|
- cursor: ${(props) => (!props.disabled ? "pointer" : "default")};
|
|
|
- user-select: none;
|
|
|
- :focus {
|
|
|
- outline: 0;
|
|
|
- }
|
|
|
:hover {
|
|
|
- filter: ${(props) => (!props.disabled ? "brightness(120%)" : "")};
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
`;
|