Display deployment build logs (#8)

Part of [Service provider auctions for web deployments](https://www.notion.so/Service-provider-auctions-for-web-deployments-104a6b22d47280dbad51d28aa3a91d75)

Co-authored-by: Adw8 <adwaitgharpure@gmail.com>
Co-authored-by: Neeraj <neeraj.rtly@gmail.com>
Co-authored-by: IshaVenikar <ishavenikar7@gmail.com>
Reviewed-on: cerc-io/snowballtools-base#8

packages/frontend/src/components/projects/create/Configure.tsx

@@ -139,30 +139,8 @@ const Configure = () => {
 
       const projectId = await createProject(createFormData, environmentVariables);
 
-      const { environmentVariables: isEnvironmentVariablesAdded } =
-        await client.getEnvironmentVariables(projectId);
+      await client.getEnvironmentVariables(projectId);
 
-      if (isEnvironmentVariablesAdded.length > 0) {
-        toast({
-          id:
-            createFormData.variables.length > 1
-              ? 'env_variable_added'
-              : 'env_variables_added',
-          title:
-            createFormData.variables.length > 1
-              ? `${createFormData.variables.length} variables added`
-              : `Variable added`,
-          variant: 'success',
-          onDismiss: dismiss,
-        });
-      } else {
-        toast({
-          id: 'env_variables_not_added',
-          title: 'Environment variables not added',
-          variant: 'error',
-          onDismiss: dismiss,
-        });
-      }
       if (templateId) {
         createFormData.option === 'Auction'
           ? navigate(

packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import {
   Deployment,
   DeploymentStatus,
@@ -6,6 +6,14 @@ import {
   Environment,
   Project,
 } from 'gql-client';
+
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+} from '@mui/material';
+
 import { Avatar } from 'components/shared/Avatar';
 import {
   BranchStrokeIcon,
@@ -18,12 +26,23 @@ import {
 import { Heading } from 'components/shared/Heading';
 import { OverflownText } from 'components/shared/OverflownText';
 import { Tag, TagTheme } from 'components/shared/Tag';
+import { Button } from 'components/shared/Button';
 import { getInitials } from 'utils/geInitials';
 import { relativeTimeMs } from 'utils/time';
 import { SHORT_COMMIT_HASH_LENGTH } from '../../../../constants';
 import { formatAddress } from '../../../../utils/format';
 import { DeploymentMenu } from './DeploymentMenu';
 
+const DEPLOYMENT_LOGS_STYLE = {
+  backgroundColor: "rgba(0,0,0, .9)",
+  padding: "2em",
+  borderRadius: "0.5em",
+  marginLeft: "0.5em",
+  marginRight: "0.5em",
+  color: "gray",
+  fontSize: "small",
+};
+
 interface DeployDetailsCardProps {
   deployment: Deployment;
   currentDeployment: Deployment;
@@ -48,6 +67,12 @@ const DeploymentDetailsCard = ({
   project,
   prodBranchDomains,
 }: DeployDetailsCardProps) => {
+  const [openDialog, setOpenDialog] = useState<boolean>(false);
+  const [deploymentLogs, setDeploymentLogs] = useState<string>();
+
+  const handleOpenDialog = () => setOpenDialog(true);
+  const handleCloseDialog = () => setOpenDialog(false);
+
   const getIconByDeploymentStatus = (status: DeploymentStatus) => {
     if (
       status === DeploymentStatus.Building ||
@@ -64,6 +89,14 @@ const DeploymentDetailsCard = ({
     }
   };
 
+  const fetchDeploymentLogs = useCallback(async () => {
+    let url = `${deployment.deployer.deployerApiUrl}/log/${deployment.applicationDeploymentRequestId}`;
+    const res = await fetch(url, { cache: 'no-store' });
+    const logs = await res.text();
+    setDeploymentLogs(logs);
+    handleOpenDialog();
+  }, [deployment.deployer.deployerApiUrl, deployment.applicationDeploymentRequestId, handleOpenDialog]);
+
   const renderDeploymentStatus = useCallback(
     (className?: string) => {
       return (
@@ -72,6 +105,7 @@ const DeploymentDetailsCard = ({
             leftIcon={getIconByDeploymentStatus(deployment.status)}
             size="xs"
             type={STATUS_COLORS[deployment.status] ?? 'neutral'}
+            onClick={fetchDeploymentLogs}
           >
             {deployment.status}
           </Tag>
@@ -96,9 +130,9 @@ const DeploymentDetailsCard = ({
               </OverflownText>
             </Heading>
           )}
-          {deployment.deployerLrn && (
+          {deployment.deployer.deployerLrn && (
             <span className="text-sm text-elements-low-em tracking-tight block mt-2">
-              Deployer LRN: {deployment.deployerLrn}
+              Deployer LRN: {deployment.deployer.deployerLrn}
             </span>
           )}
           <span className="text-sm text-elements-low-em tracking-tight block">
@@ -167,6 +201,15 @@ const DeploymentDetailsCard = ({
           prodBranchDomains={prodBranchDomains}
         />
       </div>
+      <Dialog open={openDialog} onClose={handleCloseDialog} fullWidth maxWidth="md">
+        <DialogTitle>Deployment logs</DialogTitle>
+        <DialogContent style={DEPLOYMENT_LOGS_STYLE} >
+          {deploymentLogs && <pre >{deploymentLogs}</pre>}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleCloseDialog}>Close</Button>
+        </DialogActions>
+      </Dialog>
     </div>
   );
 };

packages/frontend/src/pages/components/modals.tsx

@@ -36,7 +36,11 @@ const deployment: Deployment = {
   url: 'https://deploy1.example.com',
   environment: Environment.Production,
   isCurrent: true,
-  deployerLrn: 'lrn://example/deployers/webapp-deployer-api.test.com',
+  deployer: {
+    deployerApiUrl: 'https://webapp-deployer-api.example.com',
+    deployerId: 'bafyreicrtgmkir4evvvysxdqxddf2ftdq2wrzuodgvwnxr4rmubi4obdfu',
+    deployerLrn:'lrn://example/deployers/webapp-deployer-api.example.com'
+  },
   status: DeploymentStatus.Ready,
   createdBy: {
     id: 'user1',
@@ -49,6 +53,7 @@ const deployment: Deployment = {
   },
   createdAt: '1677676800', // 2023-03-01T12:00:00Z
   updatedAt: '1677680400', // 2023-03-01T13:00:00Z
+  applicationDeploymentRequestId: 'bafyreiaycvq6imoppnpwdve4smj6t6ql5svt5zl3x6rimu4qwyzgjorize',
 };
 
 const domains: Domain[] = [

packages/frontend/src/stories/MockStoriesData.ts

@@ -102,7 +102,12 @@ export const deployment0: Deployment = {
   domain: domain0,
   commitMessage: 'Commit Message',
   createdBy: user,
-  deployerLrn: 'lrn://deployer.apps.snowballtools.com ',
+  deployer:  {
+    deployerApiUrl: 'https://webapp-deployer-api.example.com',
+    deployerId: 'bafyreicrtgmkir4evvvysxdqxddf2ftdq2wrzuodgvwnxr4rmubi4obdfu',
+    deployerLrn:'lrn://deployer.apps.snowballtools.com '
+  },
+  applicationDeploymentRequestId: 'bafyreiaycvq6imoppnpwdve4smj6t6ql5svt5zl3x6rimu4qwyzgjorize',
 };
 
 export const project: Project = {