feat(deployment): enable deployment from git repositories

(#417)
akash-network · Nov 4, 2024 · dfbaeb7 · dfbaeb7
1 parent aca6077
commit dfbaeb7
Show file tree

Hide file tree

Showing 62 changed files with 3,509 additions and 375 deletions.
diff --git a/apps/deploy-web/env/.env b/apps/deploy-web/env/.env
@@ -4,3 +4,10 @@ AUTH0_SCOPE=openid profile email offline_access
 NEXT_PUBLIC_SENTRY_DSN="https://[email protected]/4504656428204032"
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID="2b2b3e1d953d33bd3b3e2c864edd2dea"
 NEXT_PUBLIC_SENTRY_APPLICATION_KEY="AKASH-CONSOLE-WEB"
+
+
+NEXT_PUBLIC_REDIRECT_URI='https://console.akash.network/new-deployment'
+NEXT_PUBLIC_GITHUB_APP_INSTALLATION_URL='https://github.com/apps/akash-console-build-and-deploy-app/installations/new'
+NEXT_PUBLIC_BITBUCKET_CLIENT_ID=tdH2xfRkTcdqVP6cwW
+NEXT_PUBLIC_GITHUB_CLIENT_ID=Iv23lidSwihrsSL7aGew
+NEXT_PUBLIC_GITLAB_CLIENT_ID=beb5370aad2fdb6147edb44248d20d30c3e189ddfb40c26f651c77bbe949d5a8
diff --git a/apps/deploy-web/env/.env.sample b/apps/deploy-web/env/.env.sample
@@ -26,4 +26,9 @@ NEXT_PUBLIC_GA_MEASUREMENT_ID=
 
 BASE_API_MAINNET_URL=
 BASE_API_TESTNET_URL=
-BASE_API_SANDBOX_URL=
+BASE_API_SANDBOX_URL=
+
+NEXT_PUBLIC_REDIRECT_URI=
+NEXT_PUBLIC_GITHUB_APP_INSTALLATION_URL=
+NEXT_PUBLIC_BITBUCKET_CLIENT_ID=
+NEXT_PUBLIC_GITLAB_CLIENT_ID=
diff --git a/apps/deploy-web/next.config.js b/apps/deploy-web/next.config.js
@@ -30,7 +30,7 @@ const moduleExports = {
     styledComponents: true
   },
   images: {
-    domains: ["raw.githubusercontent.com"]
+    domains: ["raw.githubusercontent.com", "avatars.githubusercontent.com"]
   },
   output: "standalone",
   typescript: {

diff --git a/apps/deploy-web/package.json b/apps/deploy-web/package.json
@@ -61,6 +61,7 @@
     "clsx": "^2.0.0",
     "cosmjs-types": "^0.9.0",
     "date-fns": "^2.29.3",
+    "dotenv": "^16.4.5",
     "file-saver": "^2.0.5",
     "geist": "^1.3.0",
     "http-proxy": "^1.18.1",
@@ -116,6 +117,7 @@
     "@akashnetwork/dev-config": "*",
     "@keplr-wallet/types": "^0.12.111",
     "@next/bundle-analyzer": "^14.0.1",
+    "@octokit/openapi-types": "^22.2.0",
     "@playwright/test": "^1.45.0",
     "@release-it/conventional-changelog": "github:akash-network/conventional-changelog#feature/pre-release",
     "@types/auth0": "^2.35.3",

diff --git a/apps/deploy-web/public/sw.js b/apps/deploy-web/public/sw.js
diff --git a/apps/deploy-web/public/sw.js.map b/apps/deploy-web/public/sw.js.map
diff --git a/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx b/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx
@@ -9,12 +9,15 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { NextSeo } from "next-seo";
 import { event } from "nextjs-google-analytics";
 
+import { CI_CD_TEMPLATE_ID } from "@src/config/remote-deploy.config";
 import { useCertificate } from "@src/context/CertificateProvider";
 import { useSettings } from "@src/context/SettingsProvider";
+import { useTemplates } from "@src/context/TemplatesProvider";
 import { useWallet } from "@src/context/WalletProvider";
 import { useDeploymentDetail } from "@src/queries/useDeploymentQuery";
 import { useDeploymentLeaseList } from "@src/queries/useLeaseQuery";
 import { useProviderList } from "@src/queries/useProvidersQuery";
+import { extractRepositoryUrl, isImageInYaml } from "@src/services/remote-deploy/remote-deployment-controller.service";
 import { RouteStep } from "@src/types/route-steps.type";
 import { AnalyticsEvents } from "@src/utils/analytics";
 import { getDeploymentLocalData } from "@src/utils/deploymentLocalDataUtils";
@@ -31,10 +34,16 @@ import { ManifestUpdate } from "./ManifestUpdate";
 export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: string }>) {
   const router = useRouter();
   const [activeTab, setActiveTab] = useState("LEASES");
+  const [editedManifest, setEditedManifest] = useState<string | null>(null);
   const { address, isWalletLoaded } = useWallet();
   const { isSettingsInit } = useSettings();
   const [leaseRefs, setLeaseRefs] = useState<Array<any>>([]);
   const [deploymentManifest, setDeploymentManifest] = useState<string | null>(null);
+  const { getTemplateById } = useTemplates();
+  const remoteDeployTemplate = getTemplateById(CI_CD_TEMPLATE_ID);
+  const isRemoteDeploy: boolean = !!editedManifest && !!isImageInYaml(editedManifest, remoteDeployTemplate?.deploy);
+  const repo: string | null = isRemoteDeploy ? extractRepositoryUrl(editedManifest) : null;
+
   const {
     data: deployment,
     isFetching: isLoadingDeployment,
@@ -45,7 +54,6 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin
       if (_deploymentDetail) {
         getLeases();
         getProviders();
-
         const deploymentData = getDeploymentLocalData(dseq);
         setDeploymentManifest(deploymentData?.manifest || "");
       }
@@ -84,6 +92,7 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin
   const { isLocalCertMatching, localCert, isCreatingCert, createCertificate } = useCertificate();
   const { data: providers, isFetching: isLoadingProviders, refetch: getProviders } = useProviderList();
   const isActive = deployment?.state === "active" && leases?.some(x => x.state === "active");
+
   const searchParams = useSearchParams();
   const tabQuery = searchParams?.get("tab");
   const logsModeQuery = searchParams?.get("logsMode");
@@ -189,6 +198,9 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin
 
             {activeTab === "EDIT" && deployment && leases && (
               <ManifestUpdate
+                editedManifest={editedManifest as string}
+                onManifestChange={setEditedManifest}
+                isRemoteDeploy={isRemoteDeploy}
                 deployment={deployment}
                 leases={leases}
                 closeManifestEditor={() => {
@@ -215,6 +227,7 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin
                 {leases &&
                   leases.map((lease, i) => (
                     <LeaseRow
+                      repo={repo}
                       key={lease.id}
                       index={i}
                       lease={lease}
@@ -224,6 +237,7 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin
                       dseq={dseq}
                       providers={providers || []}
                       loadDeploymentDetail={loadDeploymentDetail}
+                      isRemoteDeploy={isRemoteDeploy}
                     />
                   ))}
 

diff --git a/apps/deploy-web/src/components/deployments/LeaseRow.tsx b/apps/deploy-web/src/components/deployments/LeaseRow.tsx
@@ -42,14 +42,16 @@ type Props = {
   dseq: string;
   providers: ApiProviderList[];
   loadDeploymentDetail: () => void;
+  isRemoteDeploy?: boolean;
+  repo?: string | null;
 };
 
 export type AcceptRefType = {
   getLeaseStatus: () => void;
 };
 
 export const LeaseRow = React.forwardRef<AcceptRefType, Props>(
-  ({ index, lease, setActiveTab, deploymentManifest, dseq, providers, loadDeploymentDetail }, ref) => {
+  ({ index, lease, setActiveTab, deploymentManifest, dseq, providers, loadDeploymentDetail, isRemoteDeploy, repo }, ref) => {
     const provider = providers?.find(p => p.owner === lease?.provider);
     const { localCert } = useCertificate();
     const isLeaseActive = lease.state === "active";
@@ -212,7 +214,7 @@ export const LeaseRow = React.forwardRef<AcceptRefType, Props>(
             />
 
             <LabelValueOld
-              label="Provider:"
+              label="Price:"
               value={
                 <>
                   {isLeaseActive && isLoadingProviderStatus && <Spinner size="small" className="mr-2" />}
@@ -326,7 +328,7 @@ export const LeaseRow = React.forwardRef<AcceptRefType, Props>(
                     </div>
                   </div>
 
-                  {leaseStatus.forwarded_ports && leaseStatus.forwarded_ports[service.name]?.length > 0 && (
+                  {leaseStatus.forwarded_ports && leaseStatus.forwarded_ports[service.name]?.length > 0 && !isRemoteDeploy && (
                     <div className={cn({ ["mb-4"]: service.uris?.length > 0 })}>
                       <LabelValueOld
                         label="Forwarded Ports:"
@@ -356,6 +358,18 @@ export const LeaseRow = React.forwardRef<AcceptRefType, Props>(
                     </div>
                   )}
 
+                  {isRemoteDeploy && repo && (
+                    <div className="mt-2">
+                      <LabelValueOld label="Deployed Repo:" />
+                      <ul className="mt-2 space-y-2">
+                        <li className="flex items-center">
+                          <Link href={repo} target="_blank" className="inline-flex items-center space-x-2 truncate text-sm">
+                            <span>{repo?.replace("https://github.com/", "")?.replace("https://gitlab.com/", "")}</span> <OpenInWindow className="text-xs" />
+                          </Link>
+                        </li>
+                      </ul>
+                    </div>
+                  )}
                   {service.uris?.length > 0 && (
                     <>
                       <div className="mt-2">

diff --git a/apps/deploy-web/src/components/deployments/ManifestUpdate.tsx b/apps/deploy-web/src/components/deployments/ManifestUpdate.tsx
@@ -22,21 +22,31 @@ import { deploymentData } from "@src/utils/deploymentData";
 import { getDeploymentLocalData, saveDeploymentManifest } from "@src/utils/deploymentLocalDataUtils";
 import { sendManifestToProvider } from "@src/utils/deploymentUtils";
 import { TransactionMessageData } from "@src/utils/TransactionMessageData";
+import RemoteDeployUpdate from "../remote-deploy/update/RemoteDeployUpdate";
 import { ManifestErrorSnackbar } from "../shared/ManifestErrorSnackbar";
 import { Title } from "../shared/Title";
 
 type Props = {
   deployment: DeploymentDto;
   leases: LeaseDto[];
   closeManifestEditor: () => void;
+  isRemoteDeploy: boolean;
+  editedManifest: string;
+  onManifestChange: (value: string) => void;
 };
 
-export const ManifestUpdate: React.FunctionComponent<Props> = ({ deployment, leases, closeManifestEditor }) => {
+export const ManifestUpdate: React.FunctionComponent<Props> = ({
+  deployment,
+  leases,
+  closeManifestEditor,
+  isRemoteDeploy,
+  editedManifest,
+  onManifestChange
+}) => {
   const [parsingError, setParsingError] = useState<string | null>(null);
   const [deploymentVersion, setDeploymentVersion] = useState<string | null>(null);
-  const [editedManifest, setEditedManifest] = useState("");
-  const [isSendingManifest, setIsSendingManifest] = useState(false);
   const [showOutsideDeploymentMessage, setShowOutsideDeploymentMessage] = useState(false);
+  const [isSendingManifest, setIsSendingManifest] = useState(false);
   const { settings } = useSettings();
   const { address, signAndBroadcastTx, isManaged: isManagedWallet } = useWallet();
   const { data: providers } = useProviderList();
@@ -48,7 +58,7 @@ export const ManifestUpdate: React.FunctionComponent<Props> = ({ deployment, lea
       const localDeploymentData = getDeploymentLocalData(deployment.dseq);
 
       if (localDeploymentData?.manifest) {
-        setEditedManifest(localDeploymentData.manifest);
+        onManifestChange(localDeploymentData.manifest);
 
         try {
           const yamlVersion = yaml.load(localDeploymentData.manifest);
@@ -99,7 +109,7 @@ export const ManifestUpdate: React.FunctionComponent<Props> = ({ deployment, lea
   }, [editedManifest, deployment.dseq, settings.apiEndpoint, address]);
 
   function handleTextChange(value) {
-    setEditedManifest(value);
+    onManifestChange(value);
 
     if (deploymentVersion) {
       setDeploymentVersion(null);
@@ -244,6 +254,7 @@ export const ManifestUpdate: React.FunctionComponent<Props> = ({ deployment, lea
                     disabled={!!parsingError || !editedManifest || !providers || isSendingManifest || deployment.state !== "active"}
                     onClick={() => handleUpdateClick()}
                     size="sm"
+                    type="button"
                   >
                     Update Deployment
                   </Button>
@@ -255,8 +266,12 @@ export const ManifestUpdate: React.FunctionComponent<Props> = ({ deployment, lea
 
             <LinearLoadingSkeleton isLoading={isSendingManifest} />
 
-            <ViewPanel stickToBottom style={{ overflow: "hidden" }}>
-              <DynamicMonacoEditor value={editedManifest} onChange={handleTextChange} />
+            <ViewPanel stickToBottom style={{ overflow: isRemoteDeploy ? "unset" : "hidden" }}>
+              {isRemoteDeploy ? (
+                <RemoteDeployUpdate sdlString={editedManifest} onManifestChange={onManifestChange} />
+              ) : (
+                <DynamicMonacoEditor value={editedManifest} onChange={handleTextChange} />
+              )}
             </ViewPanel>
           </div>
         </>

diff --git a/apps/deploy-web/src/components/layout/CustomGoogleAnalytics.tsx b/apps/deploy-web/src/components/layout/CustomGoogleAnalytics.tsx
@@ -13,6 +13,5 @@ export default function GoogleAnalytics() {
       nonInteraction: true // avoids affecting bounce rate.
     });
   });
-
   return <>{browserEnvConfig.NEXT_PUBLIC_NODE_ENV === "production" && <GAnalytics trackPageViews />}</>;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,6 +13,5 @@ export default function GoogleAnalytics() { @@
           nonInteraction: true // avoids affecting bounce rate.
         });
       });
       return <>{browserEnvConfig.NEXT_PUBLIC_NODE_ENV === "production" && <GAnalytics trackPageViews />}</>;
     }