UI 1678 add cost estimation component to create cluster form

cmd/clusters-service/pkg/server/templates.go

@@ -245,7 +245,7 @@ func (s *server) RenderTemplate(ctx context.Context, msg *capiv1_proto.RenderTem
 		}
 	}
 
-	return &capiv1_proto.RenderTemplateResponse{RenderedTemplate: files.RenderedTemplate, ProfileFiles: profileFiles, KustomizationFiles: kustomizationFiles}, err
+	return &capiv1_proto.RenderTemplateResponse{RenderedTemplate: files.RenderedTemplate, ProfileFiles: profileFiles, KustomizationFiles: kustomizationFiles, CostEstimate: files.CostEstimate}, err
 }
 
 func (s *server) getFiles(ctx context.Context, tmpl template.Template, msg GetFilesRequest, createRequestMessage *capiv1_proto.CreatePullRequestRequest) (*GetFilesReturn, error) {

ui-cra/src/components/Clusters/Form/Partials/ApplicationsWrapper.tsx

@@ -24,8 +24,7 @@ const useStyles = makeStyles(() =>
 export const ApplicationsWrapper: FC<{
   formData: any;
   setFormData: Dispatch<React.SetStateAction<any>>;
-  isKustomizationsEnabled?: string;
-}> = ({ formData, setFormData, isKustomizationsEnabled = 'true' }) => {
+}> = ({ formData, setFormData }) => {
   const classes = useStyles();
 
   const handleAddApplication = () => {
@@ -39,14 +38,14 @@ export const ApplicationsWrapper: FC<{
     setFormData({ ...formData, clusterAutomations: newAutomations });
   };
 
-  return isKustomizationsEnabled === 'false' ? null : (
+  return (
     <div className={classes.addApplicationSectionWrapper}>
       <h2>Applications</h2>
       {formData.clusterAutomations?.map((kustomization: any, index: number) => {
         return (
           <div key={index} className={classes.applicationWrapper}>
             <h3>Application No.{index + 1}</h3>
-            <Grid container className="">
+            <Grid container>
               <Grid item xs={12} sm={8} md={8} lg={8}>
                 <AppFields
                   index={index}

ui-cra/src/components/Clusters/Form/Partials/CostEstimation.tsx

@@ -0,0 +1,74 @@
+import { createStyles, Grid, makeStyles } from '@material-ui/core';
+import { Button, LoadingPage, theme } from '@weaveworks/weave-gitops';
+import React, { FC } from 'react';
+import { validateFormData } from '../../../../utils/form';
+
+const CostEstimation: FC<{
+  costEstimate: string;
+  isCostEstimationLoading: boolean;
+  handleCostEstimation: () => Promise<void>;
+}> = ({ handleCostEstimation, costEstimate, isCostEstimationLoading }) => {
+  const useStyles = makeStyles(() =>
+    createStyles({
+      getEstimationButton: {
+        marginRight: theme.spacing.medium,
+      },
+      costWrapper: {
+        marginRight: theme.spacing.medium,
+        fontWeight: 'bold',
+      },
+      previewLoading: {
+        padding: theme.spacing.base,
+      },
+    }),
+  );
+  const classes = useStyles();
+  return isCostEstimationLoading ? (
+    <LoadingPage className={classes.previewLoading} />
+  ) : (
+    <div>
+      <h2>Cost Estimation</h2>
+      <Grid container>
+        <Grid item xs={6} sm={6} md={6} lg={6}>
+          <Grid container>
+            <Grid
+              item
+              xs={6}
+              justifyContent="flex-start"
+              alignItems="center"
+              container
+            >
+              <div>Monthly Cost:</div>
+            </Grid>
+            <Grid
+              item
+              xs={6}
+              justifyContent="flex-end"
+              alignItems="center"
+              container
+            >
+              <div className={classes.costWrapper}>{costEstimate}</div>
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid
+          item
+          xs={6}
+          justifyContent="flex-end"
+          alignItems="center"
+          container
+        >
+          <Button
+            id="get-estimation"
+            className={classes.getEstimationButton}
+            onClick={event => validateFormData(event, handleCostEstimation)}
+          >
+            GET ESTIMATION
+          </Button>
+        </Grid>
+      </Grid>
+    </div>
+  );
+};
+
+export default CostEstimation;

ui-cra/src/components/Clusters/Form/Partials/Credentials.tsx

@@ -8,12 +8,7 @@ import { useListCredentials } from '../../../../hooks/credentials';
 const Credentials: FC<{
   infraCredential: Credential | null;
   setInfraCredential: Dispatch<React.SetStateAction<Credential | null>>;
-  isCredentialEnabled?: string;
-}> = ({
-  infraCredential,
-  setInfraCredential,
-  isCredentialEnabled = 'true',
-}) => {
+}> = ({ infraCredential, setInfraCredential }) => {
   const { data, isLoading } = useListCredentials();
   const credentials = useMemo(
     () => data?.credentials || [],
@@ -46,7 +41,7 @@ const Credentials: FC<{
     [credentials, setInfraCredential],
   );
 
-  return isCredentialEnabled === 'false' ? null : (
+  return (
     <div className="credentials">
       <span>Infrastructure provider credentials:</span>
       <FormControl>

ui-cra/src/components/Clusters/Form/Partials/Profiles.tsx

@@ -85,7 +85,7 @@ const Profiles: FC<{
   const numSelected = updatedProfilesList.filter(up => up.selected).length;
   const rowCount = updatedProfilesList.length || 0;
 
-  return isProfilesEnabled === 'false' ? null : (
+  return (
     <ProfilesWrapper>
       <>
         <h2>{context === 'app' ? 'Helm Releases' : 'Profiles'}</h2>

ui-cra/src/components/Clusters/Form/index.tsx

@@ -46,9 +46,11 @@ import {
   FLUX_BOOSTRAP_KUSTOMIZATION_NAMESPACE,
 } from '../../../utils/config';
 import { validateFormData } from '../../../utils/form';
+import { getFormattedCostEstimate } from '../../../utils/formatters';
 import { Routes } from '../../../utils/nav';
 import { isUnauthenticated, removeToken } from '../../../utils/request';
 import { ApplicationsWrapper } from './Partials/ApplicationsWrapper';
+import CostEstimation from './Partials/CostEstimation';
 import Credentials from './Partials/Credentials';
 import GitOps from './Partials/GitOps';
 import Preview from './Partials/Preview';
@@ -127,9 +129,6 @@ const useStyles = makeStyles(theme =>
       display: 'flex',
       justifyContent: 'flex-end',
       padding: small,
-      button: {
-        width: '200px',
-      },
     },
     previewLoading: {
       padding: base,
@@ -294,8 +293,20 @@ const ClusterForm: FC<ClusterFormProps> = ({ template, cluster }) => {
     null,
   );
   const [loading, setLoading] = useState<boolean>(false);
+  const [costEstimationLoading, setCostEstimationLoading] =
+    useState<boolean>(false);
+  const [costEstimate, setCostEstimate] = useState<string>('00.00 USD');
   const [enableCreatePR, setEnableCreatePR] = useState<boolean>(false);
 
+  const isCredentialEnabled =
+    annotations?.['templates.weave.works/credentials-enabled'] || 'true';
+  const isProfilesEnabled =
+    annotations?.['templates.weave.works/profiles-enabled'] || 'true';
+  const isKustomizationsEnabled =
+    annotations?.['templates.weave.works/kustomizations-enabled'] || 'true';
+  const isCostEstimationEnabled =
+    annotations?.['templates.weave.works/cost-estimation-enabled'] || 'false';
+
   const handlePRPreview = useCallback(() => {
     const { parameterValues } = formData;
     setPreviewLoading(true);
@@ -330,6 +341,39 @@ const ClusterForm: FC<ClusterFormProps> = ({ template, cluster }) => {
     updatedProfiles,
   ]);
 
+  const handleCostEstimation = useCallback(() => {
+    const { parameterValues } = formData;
+    setCostEstimationLoading(true);
+    return renderTemplate({
+      templateName: template.name,
+      templateNamespace: template.namespace,
+      values: parameterValues,
+      profiles: encodedProfiles(updatedProfiles),
+      credentials: infraCredential || undefined,
+      kustomizations: getKustomizations(formData),
+      templateKind: template.templateKind,
+    })
+      .then(data => {
+        const { costEstimate } = data;
+        setCostEstimate(getFormattedCostEstimate(costEstimate));
+      })
+      .catch(err =>
+        setNotifications([
+          { message: { text: err.message }, variant: 'danger' },
+        ]),
+      )
+      .finally(() => setCostEstimationLoading(false));
+  }, [
+    formData,
+    renderTemplate,
+    infraCredential,
+    setNotifications,
+    template.name,
+    template.templateKind,
+    template.namespace,
+    updatedProfiles,
+  ]);
+
   const handleAddCluster = useCallback(() => {
     const payload = toPayload(
       formData,
@@ -400,6 +444,10 @@ const ClusterForm: FC<ClusterFormProps> = ({ template, cluster }) => {
     }
   }, [cluster, formData.parameterValues, setFormData]);
 
+  useEffect(() => {
+    setCostEstimate('00.00 USD');
+  }, [formData.parameterValues]);
+
   return useMemo(() => {
     return (
       <CallbackStateContextProvider
@@ -418,13 +466,12 @@ const ClusterForm: FC<ClusterFormProps> = ({ template, cluster }) => {
               <div className="template-title">
                 Template: <span>{template.name}</span>
               </div>
-              <Credentials
-                infraCredential={infraCredential}
-                setInfraCredential={setInfraCredential}
-                isCredentialEnabled={
-                  annotations?.['templates.weave.works/credentials-enabled']
-                }
-              />
+              {isCredentialEnabled === 'true' ? (
+                <Credentials
+                  infraCredential={infraCredential}
+                  setInfraCredential={setInfraCredential}
+                />
+              ) : null}
             </CredentialsWrapper>
             <Divider
               className={
@@ -437,22 +484,20 @@ const ClusterForm: FC<ClusterFormProps> = ({ template, cluster }) => {
               setFormData={setFormData}
             />
           </Grid>
-          <Profiles
-            isLoading={profilesIsLoading}
-            updatedProfiles={updatedProfiles}
-            setUpdatedProfiles={setUpdatedProfiles}
-            isProfilesEnabled={
-              annotations?.['templates.weave.works/profiles-enabled']
-            }
-          />
-          <Grid item xs={12} sm={10} md={10} lg={8}>
-            <ApplicationsWrapper
-              formData={formData}
-              setFormData={setFormData}
-              isKustomizationsEnabled={
-                annotations?.['templates.weave.works/kustomizations-enabled']
-              }
+          {isProfilesEnabled === 'true' ? (
+            <Profiles
+              isLoading={profilesIsLoading}
+              updatedProfiles={updatedProfiles}
+              setUpdatedProfiles={setUpdatedProfiles}
             />
+          ) : null}
+          <Grid item xs={12} sm={10} md={10} lg={8}>
+            {isKustomizationsEnabled === 'true' ? (
+              <ApplicationsWrapper
+                formData={formData}
+                setFormData={setFormData}
+              />
+            ) : null}
             {previewLoading ? (
               <LoadingPage className={classes.previewLoading} />
             ) : (
@@ -472,6 +517,15 @@ const ClusterForm: FC<ClusterFormProps> = ({ template, cluster }) => {
               PRPreview={PRPreview}
             />
           ) : null}
+          <Grid item xs={12} sm={10} md={10} lg={8}>
+            {isCostEstimationEnabled === 'true' ? (
+              <CostEstimation
+                handleCostEstimation={handleCostEstimation}
+                costEstimate={costEstimate}
+                isCostEstimationLoading={costEstimationLoading}
+              />
+            ) : null}
+          </Grid>
           <Grid item xs={12} sm={10} md={10} lg={8}>
             <GitOps
               formData={formData}
@@ -514,7 +568,13 @@ const ClusterForm: FC<ClusterFormProps> = ({ template, cluster }) => {
     previewLoading,
     loading,
     enableCreatePR,
-    annotations,
+    costEstimationLoading,
+    handleCostEstimation,
+    costEstimate,
+    isCredentialEnabled,
+    isCostEstimationEnabled,
+    isKustomizationsEnabled,
+    isProfilesEnabled,
   ]);
 };
 

ui-cra/src/utils/formatters.ts

@@ -1,5 +1,6 @@
 import { URL } from '../types/global';
 import GitUrlParse from 'git-url-parse';
+import { CostEstimate } from '../cluster-services/cluster_services.pb';
 
 export const toPercent = (value: number, precision = 0) =>
   `${(100 * value).toFixed(precision)}%`;
@@ -31,3 +32,19 @@ export const getGitRepoHTTPSURL = (
   }
   return '';
 };
+
+export const getFormattedCostEstimate = (
+  costEstimate: CostEstimate | undefined,
+): string => {
+  const costFormatter = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  });
+  if (costEstimate) {
+    const { currency, range } = costEstimate;
+    const estimate = `${costFormatter.format(
+      range?.low || 0,
+    )} - ${costFormatter.format(range?.high || 0)} ${currency}`;
+    return estimate;
+  } else return 'N/A';
+};