Improve Change Log (#3244)

* Improve Change Log

* Improve Change Log

dashboard/src/main/home/app-dashboard/expanded-app/ChangeLogComponent.tsx

@@ -1,6 +1,9 @@
 import React, { FC } from 'react';
 import * as Diff from "deep-diff";
 import styled from 'styled-components';
+import Text from 'components/porter/Text';
+import { flatMapDepth } from 'lodash';
+import Link from 'components/porter/Link';
 
 const createCompareLink = (repoId: string, oldTag: string, newTag: string) => {
   const baseUrl = 'https://github.com';
@@ -17,116 +20,145 @@ const getTagsFromChange = (changeString: string) => {
   return null;
 }
 
-const ChangeBoxComponent: FC<BoxProps> = ({ type, children }) => {
-
-  return (
-    <ChangeBox type={type}>
-      {children}
-    </ChangeBox>
-  );
-
-};
-
 type Props = {
   oldYaml: any;
   newYaml: any;
+  appData: any;
 };
 
-const ChangeLogComponent: FC<Props> = ({ oldYaml, newYaml }) => {
+const ChangeLogComponent: FC<Props> = ({ oldYaml, newYaml, appData }) => {
   const diff = Diff.diff(oldYaml, newYaml);
   const changes: JSX.Element[] = [];
+  // Define the regex pattern to match service creation
   const servicePattern = /^[a-zA-Z0-9\-]*-[a-zA-Z0-9]*[^\.]$/;
-
   diff?.forEach((difference: any) => {
-    let path = difference.path?.join(".");
-    // Extract the base path and check if it includes forbidden paths
-
-    const syncedPaths = ["synced"];
-    const isSyncedPath = syncedPaths.some(subPath => path?.includes(subPath));
-
-    // Restructure the path when synced is included
-    if (isSyncedPath) {
-      const parts = path?.split(".");
-      const syncedIndex = parts?.indexOf("synced");
-      path = `${parts[0]}.${parts[syncedIndex]}.${parts[parts?.length - 1]}`;
-    }
-
-    // Extract the base path and check if it includes forbidden paths
-    const basePath = path?.split('.').slice(0, -1).join('.');
-    const forbiddenPaths = ["container", "env", "keys", "name"];
-    const isForbiddenPath = forbiddenPaths.some(subPath => basePath?.includes(subPath));
-
-    if (difference.kind === "E" && isForbiddenPath && !isSyncedPath) {
-      return;  // Skip if it's a forbidden path
-    }
-
-    console.log("Filtered Difference: ", difference);
-    console.log("Filtered Path: ", path);
-
-    // rest of th
-
+    let path = difference.path?.join(" ");
     switch (difference.kind) {
-      case "E":
-        const tags = getTagsFromChange(path);
-        if (tags) {
-          const repoId = "your-repo-id-here"; // replace with your repoId
-          const link = createCompareLink(repoId, tags.oldTag, tags.newTag);
+      case "N":
+        // Check if the added item is a service by testing the path against the regex pattern
+        if (path?.includes('container env normal')) {
+          const appName = path.split(' ')[0];
+          const keyName = path.split(' ')[4];
           changes.push(
-            <ChangeBoxComponent type="E">
-              Image tag changed: {tags.oldTag} -{'>'} {tags.newTag}
-            </ChangeBoxComponent>
+            <ChangeBox type="N">{`${appName} added env var ${keyName} = ${difference.rhs}`}</ChangeBox>
           );
+        } else if (servicePattern.test(path)) {
+          changes.push(<ChangeBox type="N">{`${path} created`}</ChangeBox>);
         } else {
+          // If not, display the full message
           changes.push(
-            <ChangeBoxComponent type="E">
-              {`${path}: ${JSON.stringify(difference.lhs)} -> ${JSON.stringify(difference.rhs)}`}
-            </ChangeBoxComponent>
+            <ChangeBox type="N">{`${path} added: ${JSON.stringify(
+              difference.rhs
+            )}`}</ChangeBox>
           );
         }
         break;
-      case "N":
+      case "D":
         if (servicePattern.test(path)) {
-          changes.push(
-            <ChangeBoxComponent type="N">{`${path} created`}</ChangeBoxComponent>
-          );
+          // If so, display a simplified message
+          changes.push(<ChangeBox type="D">
+            {`${path} deleted`}
+          </ChangeBox>);
         } else {
-          changes.push(
-            <ChangeBoxComponent type="N">{`${path} added: ${JSON.stringify(difference.rhs)}`}</ChangeBoxComponent>
-          );
+
+          changes.push(<ChangeBox type="D">
+            {`${path} removed`}
+          </ChangeBox>);
         }
         break;
-      case "D":
-        if (servicePattern.test(path)) {
+      case "E":
+        if (path === "global image tag") {
+          const oldCommit = difference.lhs;
+          const newCommit = difference.rhs;
+          const commitDiffLink = `https://github.com/${appData.app.repo_name}/compare/${oldCommit}...${newCommit}`;
           changes.push(
-            <ChangeBoxComponent type="D">{`${path} deleted`}</ChangeBoxComponent>
+            <ChangeBox type="E">
+              {`Image tag: ${oldCommit} -> ${newCommit}. `}
+
+              <Link
+                target="_blank"
+                hasunderline
+                to={commitDiffLink}
+              >
+                View Commit Diff
+              </Link>
+            </ChangeBox>
           );
         } else {
           changes.push(
-            <ChangeBoxComponent type="D">{`${path} removed`}</ChangeBoxComponent>
+            <ChangeBox type="E">
+              {`${path}: ${JSON.stringify(difference.lhs)} -> ${JSON.stringify(difference.rhs)}`}
+            </ChangeBox>
           );
         }
         break;
       case "A":
-        path = `${path}[${difference.index}]`;
+        path = path + `[${difference.index}]`;
         if (difference.item.kind === "N") {
+          if (path.includes('container env synced')) {
+            const appName = path.split(' ')[0];
+            if (path.includes('keys')) {
+              // This is an addition of a key in an existing env group
+              const keyName = difference.item.rhs?.name;
+              changes.push(
+                <ChangeBox type="N">{`${appName} synced env-group key ${keyName} added`}</ChangeBox>
+              );
+            } else {
+              // This is an addition of a whole new env group
+              const groupName = difference.item.rhs?.name;
+              changes.push(
+                <ChangeBox type="N">{`${appName} synced env-group ${groupName} added`}</ChangeBox>
+              );
+            }
+          } else {
+            changes.push(
+              <ChangeBox type="N">{`${path} added: ${JSON.stringify(difference.item.rhs)}`}</ChangeBox>
+            );
+          }
+        }
+        if (difference.item.kind === "D") {
+          if (path.includes('container env synced')) {
+            const appName = path.split(' ')[0];
+            if (path.includes('keys')) {
+              // This is a deletion of a key in an existing env group
+              const keyName = difference.item.lhs?.name;
+              changes.push(
+                <ChangeBox type="D">{`${appName} synced env-group key ${keyName} removed`}</ChangeBox>
+              );
+            } else {
+              // This is a deletion of a whole env group
+              const groupName = difference.item.lhs?.name;
+              changes.push(
+                <ChangeBox type="D">{`${appName} synced env-group ${groupName} removed`}</ChangeBox>
+              );
+            }
+          } else {
+            changes.push(
+              <ChangeBox type="D">{`${path} removed: ${JSON.stringify(difference.item.lhs)}`}</ChangeBox>
+            );
+          }
+        }
+        if (difference.item.kind === "E")
           changes.push(
-            <ChangeBoxComponent type="N">{`${path} added`}</ChangeBoxComponent>
-          );
-        } else if (difference.item.kind === "D") {
-          changes.push(
-            <ChangeBoxComponent type="D">{`${path} deleted`}</ChangeBoxComponent>
+            <ChangeBox type="E">
+              {`${path} updated: ${JSON.stringify(
+                difference.item.lhs
+              )} -> ${JSON.stringify(difference.item.rhs)}`}
+            </ChangeBox>
           );
-        }
-        break;
-      default:
         break;
     }
-
-    if (changes.length === 0) {
-      changes.push(<ChangeBoxComponent type="E">No changes detected</ChangeBoxComponent>);
-    }
   });
-  return <ChangeLog>{changes}</ChangeLog>;
+  if (changes.length === 0) {
+    changes.push(
+      <ChangeBox type="E">
+        {`No changes detected`}
+      </ChangeBox>
+    )
+  }
+
+  return <ChangeLog>{changes}</ChangeLog>
+
 };
 
 export default ChangeLogComponent;

dashboard/src/main/home/app-dashboard/expanded-app/ChangeLogModal.tsx

@@ -183,11 +183,14 @@ const ChangeLogModal: React.FC<Props> = ({
                     <ChangeLogComponent
                       oldYaml={currentChart.config}
                       newYaml={chartEvent?.config}
+                      appData={appData}
                     />
                     : <ChangeLogComponent
                       oldYaml={prevChartEvent?.config}
                       newYaml={chartEvent?.config}
+                      appData={appData}
                     />
+
                   }
                 </div>
               )}