diff --git a/ui/src/router/components/form/components/RouterUpdateSummary.js b/ui/src/router/components/form/components/RouterUpdateSummary.js
new file mode 100644
index 000000000..c6c8dc6ae
--- /dev/null
+++ b/ui/src/router/components/form/components/RouterUpdateSummary.js
@@ -0,0 +1,15 @@
+import React, { Fragment } from "react";
+import { EuiSpacer } from "@elastic/eui";
+
+export const RouterUpdateSummary = ({ router }) => {
+ return (
+
+
+ You're about to deploy your changes for the Turing router{" "}
+ {router.name}.
+
+
+
+
+ );
+};
diff --git a/ui/src/router/components/form/components/VersionCreationSummary.js b/ui/src/router/components/form/components/VersionCreationSummary.js
new file mode 100644
index 000000000..954e4df96
--- /dev/null
+++ b/ui/src/router/components/form/components/VersionCreationSummary.js
@@ -0,0 +1,20 @@
+import React, { Fragment } from "react";
+import { EuiSpacer } from "@elastic/eui";
+
+export const VersionCreationSummary = ({ router }) => {
+ return (
+
+
+ You're about to save your changes as a new version for the Turing
+ router {router.name}.
+
+
+
+ The new version can be deployed at any time from the router history
+ page.
+
+
+
+
+ );
+};
diff --git a/ui/src/router/edit/EditRouterView.js b/ui/src/router/edit/EditRouterView.js
index b0cb4a7a3..341ea029c 100644
--- a/ui/src/router/edit/EditRouterView.js
+++ b/ui/src/router/edit/EditRouterView.js
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from "react";
+import React, { useContext, useEffect, useState } from "react";
import { TuringRouter } from "../../services/router/TuringRouter";
import { FormContext, FormContextProvider } from "@gojek/mlp-ui";
import { addToast, replaceBreadcrumbs, useToggle } from "@gojek/mlp-ui";
@@ -6,14 +6,15 @@ import { UpdateRouterForm } from "../components/form/UpdateRouterForm";
import { ExperimentEngineContextProvider } from "../../providers/experiments/ExperimentEngineContextProvider";
import { VersionComparisonView } from "./components/VersionComparisonView";
import { useTuringApi } from "../../hooks/useTuringApi";
-import { DeploymentSummary } from "../components/form/components/DeploymentSummary";
+import { RouterUpdateSummary } from "../components/form/components/RouterUpdateSummary";
import { ConfirmationModal } from "../../components/confirmation_modal/ConfirmationModal";
+import { VersionCreationSummary } from "../components/form/components/VersionCreationSummary";
const EditRouterView = ({ projectId, currentRouter, ...props }) => {
- const { data: updatedRouter } = useContext(FormContext);
+ const { data: routerConfig } = useContext(FormContext);
const [showDiffView, toggleDiffView] = useToggle();
- const [submissionResponse, submitForm] = useTuringApi(
+ const [updateRouterResponse, submitUpdateRouter] = useTuringApi(
`/projects/${projectId}/routers/${currentRouter.id}`,
{
method: "PUT",
@@ -23,10 +24,20 @@ const EditRouterView = ({ projectId, currentRouter, ...props }) => {
false
);
+ const [createRouterVersionResponse, submitCreateRouterVersion] = useTuringApi(
+ `/projects/${projectId}/routers/${currentRouter.id}/versions`,
+ {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ },
+ {},
+ false
+ );
+
useEffect(() => {
- if (submissionResponse.isLoaded && !submissionResponse.error) {
+ if (updateRouterResponse.isLoaded && !updateRouterResponse.error) {
addToast({
- id: "submit-success-create",
+ id: "submit-success-update-router",
title: "Router configuration is updated!",
color: "success",
iconType: "check",
@@ -34,20 +45,60 @@ const EditRouterView = ({ projectId, currentRouter, ...props }) => {
props.navigate("../", { state: { refresh: true } });
}
- }, [submissionResponse, props]);
+ }, [updateRouterResponse, props]);
- const onSubmit = () => submitForm({ body: JSON.stringify(updatedRouter) });
+ useEffect(() => {
+ if (
+ createRouterVersionResponse.isLoaded &&
+ !createRouterVersionResponse.error
+ ) {
+ addToast({
+ id: "submit-success-create-router-version",
+ title: `Router version ${createRouterVersionResponse.data.version} is saved (but not deployed)!`,
+ color: "success",
+ iconType: "check",
+ });
+
+ props.navigate("../", { state: { refresh: true } });
+ }
+ }, [createRouterVersionResponse, props]);
+
+ const [withDeployment, setWithDeployment] = useState(null);
+
+ const onSubmit = () => {
+ if (withDeployment === true) {
+ return submitUpdateRouter({
+ body: JSON.stringify(routerConfig),
+ });
+ } else if (withDeployment === false) {
+ return submitCreateRouterVersion({
+ body: JSON.stringify(routerConfig.toJSON().config),
+ });
+ }
+ };
return (
}
- isLoading={submissionResponse.isLoading}
+ title={
+ withDeployment
+ ? "Deploy Turing Router Version"
+ : "Save Turing Router Version"
+ }
+ content={
+ withDeployment ? (
+
+ ) : (
+
+ )
+ }
+ isLoading={
+ updateRouterResponse.isLoading || createRouterVersionResponse.isLoading
+ }
onConfirm={onSubmit}
- confirmButtonText="Deploy"
- confirmButtonColor="primary">
- {(onSubmit) =>
- !showDiffView ? (
+ confirmButtonText={withDeployment ? "Deploy" : "Save"}
+ confirmButtonColor={"primary"}>
+ {(onSubmit) => {
+ return !showDiffView ? (
props.navigate("../")}
@@ -57,13 +108,23 @@ const EditRouterView = ({ projectId, currentRouter, ...props }) => {
) : (
{
+ setWithDeployment(true);
+ return onSubmit();
+ }}
+ onSave={() => {
+ setWithDeployment(false);
+ return onSubmit();
+ }}
/>
- )
- }
+ );
+ }}
);
};
diff --git a/ui/src/router/edit/components/VersionComparisonView.js b/ui/src/router/edit/components/VersionComparisonView.js
index 5b5cc2ce4..d9037f8ce 100644
--- a/ui/src/router/edit/components/VersionComparisonView.js
+++ b/ui/src/router/edit/components/VersionComparisonView.js
@@ -1,6 +1,11 @@
import React, { useContext } from "react";
-import { EuiFlexGroup, EuiFlexItem, EuiPanel } from "@elastic/eui";
-import { StepActions } from "@gojek/mlp-ui";
+import {
+ EuiButton,
+ EuiButtonEmpty,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiPanel,
+} from "@elastic/eui";
import { ConfigSection } from "../../../components/config_section";
import { VersionComparisonPanel } from "../../versions/components/version_diff/VersionComparisonPanel";
import { RouterVersion } from "../../../services/version/RouterVersion";
@@ -10,8 +15,9 @@ export const VersionComparisonView = ({
currentRouter,
updatedRouter,
onPrevious,
- onSubmit,
isSubmitting,
+ onDeploy,
+ onSave,
}) => {
const { getEngineProperties } = useContext(ExperimentEngineContext);
const currentVersionContext = {
@@ -45,13 +51,33 @@ export const VersionComparisonView = ({
-
+
+
+
+ Previous
+
+
+
+
+ Save
+
+
+
+
+ Deploy
+
+
+
);