Aggregating Alerts Feature

amundsen-io · Feb 12, 2024 · ed3a3b7 · ed3a3b7
1 parent b2a07c4
commit ed3a3b7
Show file tree

Hide file tree

Showing 6 changed files with 206 additions and 31 deletions.
diff --git a/frontend/amundsen_application/static/js/components/Alert/AlertList.tsx b/frontend/amundsen_application/static/js/components/Alert/AlertList.tsx
@@ -10,19 +10,46 @@ export interface AlertListProps {
   notices: NoticeType[];
 }
 
+export interface AggregatedAlertListProps {
+  notices: {
+    [key: string]: NoticeType;
+  };
+}
+
+const aggregateNotices = (notices) =>
+  notices.reduce((accum, notice: any) => {
+    if (notice) {
+      const { messageHtml, severity, payload } = notice;
+
+      if (payload) {
+        accum[messageHtml] ??= {
+          severity,
+          payload: { descriptions: [] },
+        };
+        accum[messageHtml].payload.descriptions.push(payload);
+      } else {
+        accum[messageHtml] = { ...notice };
+      }
+    }
+
+    return accum;
+  }, {});
+
 export const AlertList: React.FC<AlertListProps> = ({ notices }) => {
   if (!notices.length) {
     return null;
   }
 
+  const aggregated = aggregateNotices(notices);
+
   return (
     <div className="alert-list">
-      {notices.map((notice, idx) => (
+      {Object.keys(aggregated).map((notice, idx) => (
         <Alert
           key={idx}
-          message={notice.messageHtml}
-          severity={notice.severity}
-          payload={notice.payload}
+          message={notice}
+          severity={aggregated[notice].severity}
+          payload={aggregated[notice].payload}
         />
       ))}
     </div>

diff --git a/frontend/amundsen_application/static/js/components/Alert/alert.story.tsx b/frontend/amundsen_application/static/js/components/Alert/alert.story.tsx
@@ -138,6 +138,22 @@ const list = [
     messageHtml: 'Second alert of the stack',
   },
   { severity: NoticeSeverity.ALERT, messageHtml: 'Third alert of the stack' },
+  {
+    severity: NoticeSeverity.ALERT,
+    messageHtml: 'Aggregated alert of the stack',
+    payload: {
+      term: 'Test term 1',
+      description: 'Test description 1',
+    },
+  },
+  {
+    severity: NoticeSeverity.ALERT,
+    messageHtml: 'Aggregated alert of the stack',
+    payload: {
+      term: 'Test term 2',
+      description: 'Test description 2',
+    },
+  },
 ];
 
 export const AlertListStory = (): React.ReactNode => (

diff --git a/frontend/amundsen_application/static/js/components/DefinitionList/definitionList.story.tsx b/frontend/amundsen_application/static/js/components/DefinitionList/definitionList.story.tsx
@@ -34,12 +34,12 @@ export const DefinitionListStory = (): React.ReactNode => (
           {
             term: 'Verity checks',
             description:
-              '1 out of 4 checks failed (<a href="http://lyft.com">Link</a> | <a href="http://lyft.com">Ownser</a>)',
+              '1 out of 4 checks failed (<a href="http://lyft.com">Link</a> | <a href="http://lyft.com">Owner</a>)',
           },
           {
             term: 'Failed DAGs',
             description:
-              '1 out of 4 DAGs failed (<a href="http://lyft.com">Link</a> | <a href="http://lyft.com">Ownser</a>)',
+              '1 out of 4 DAGs failed (<a href="http://lyft.com">Link</a> | <a href="http://lyft.com">Owner</a>)',
           },
         ]}
       />
@@ -55,7 +55,46 @@ export const DefinitionListStory = (): React.ReactNode => (
           {
             term: 'Failed DAGs',
             description:
-              '1 out of 4 DAGs failed (<a href="http://lyft.com">Link</a> | <a href="http://lyft.com">Ownser</a>)',
+              '1 out of 4 DAGs failed (<a href="http://lyft.com">Link</a> | <a href="http://lyft.com">Owner</a>)',
+          },
+        ]}
+      />
+    </StorySection>
+    <StorySection title="DefinitionList with aggregated descriptions">
+      <DefinitionList
+        definitions={[
+          {
+            term: 'Table name',
+            description: [
+              {
+                'Failed Check': 'coco.fact_rides',
+                Owner: '<a href="http://lyft.com">Owner</a>',
+              },
+              {
+                'Failed Check 2': 'coco.fact_rides',
+                Owner: 'Just a normal string',
+              },
+            ],
+          },
+        ]}
+      />
+    </StorySection>
+    <StorySection title="DefinitionList with aggregated descriptions and fixed term width">
+      <DefinitionList
+        termWidth={200}
+        definitions={[
+          {
+            term: 'Table name',
+            description: [
+              {
+                'Failed Check': 'coco.fact_rides',
+                Owner: '<a href="http://lyft.com">Owner</a>',
+              },
+              {
+                'Failed Check 2': 'coco.fact_rides',
+                Owner: 'Just a normal string',
+              },
+            ],
           },
         ]}
       />

diff --git a/frontend/amundsen_application/static/js/components/DefinitionList/index.spec.tsx b/frontend/amundsen_application/static/js/components/DefinitionList/index.spec.tsx
@@ -149,5 +149,32 @@ describe('DefinitionList', () => {
         expect(actual).toEqual(expected);
       });
     });
+
+    describe('when passing aggregated descriptions', () => {
+      it('should render them', () => {
+        const { wrapper } = setup({
+          definitions: [
+            {
+              term: 'Table name',
+              description: [
+                {
+                  'Failed Check': 'coco.fact_rides',
+                  Owner: '<a href="http://lyft.com">Owner</a>',
+                },
+                {
+                  'Failed Check 2': 'coco.fact_rides',
+                  Owner: 'Just a normal string',
+                },
+              ],
+            },
+          ],
+        });
+
+        const itemGroup = wrapper.find('.definition-list-items-group');
+
+        expect(itemGroup.length).toEqual(2);
+        expect(itemGroup.find('.definition-list-term').length).toEqual(4);
+      });
+    });
   });
 });
diff --git a/frontend/amundsen_application/static/js/components/DefinitionList/index.tsx b/frontend/amundsen_application/static/js/components/DefinitionList/index.tsx
@@ -23,26 +23,69 @@ export interface DefinitionListProps {
 export const DefinitionList: React.FC<DefinitionListProps> = ({
   definitions,
   termWidth,
-}) => (
-  <dl className="definition-list">
-    {definitions.map(({ term, description }) => (
-      <div className="definition-list-container" key={term}>
-        <dt
-          className="definition-list-term"
-          style={{ minWidth: termWidth ? `${termWidth}px` : 'auto' }}
-        >
-          {term}
-        </dt>
-        <dd className="definition-list-definition">
-          {typeof description === 'string' ? (
-            <SanitizedHTML html={description} className="definition-text" />
+}) => {
+  const parseDescription = (description) => {
+    switch (typeof description) {
+      case 'object':
+        return (
+          <>
+            {Array.isArray(description)
+              ? description.map((item) => {
+                  const items = Object.keys(item).map((key) => (
+                    <div key={key}>
+                      <div
+                        className="definition-list-term"
+                        style={{
+                          minWidth: termWidth ? `${termWidth}px` : 'auto',
+                        }}
+                      >
+                        {key}:
+                      </div>
+                      <div className="definition-list-definition">
+                        {parseDescription(item[key])}
+                      </div>
+                    </div>
+                  ));
+
+                  return (
+                    <div className="definition-list-items-group">{items}</div>
+                  );
+                })
+              : description}
+          </>
+        );
+      case 'string':
+        return <SanitizedHTML html={description} className="definition-text" />;
+      default:
+        return description;
+    }
+  };
+
+  return (
+    <dl className="definition-list">
+      {definitions.map(({ term, description }) => (
+        <div className="definition-list-container" key={term}>
+          {Array.isArray(description) ? (
+            <div className="definition-list-inner-container">
+              {parseDescription(description)}
+            </div>
           ) : (
-            description
+            <>
+              <dt
+                className="definition-list-term"
+                style={{ minWidth: termWidth ? `${termWidth}px` : 'auto' }}
+              >
+                {term}
+              </dt>
+              <dd className="definition-list-definition">
+                {parseDescription(description)}
+              </dd>
+            </>
           )}
-        </dd>
-      </div>
-    ))}
-  </dl>
-);
+        </div>
+      ))}
+    </dl>
+  );
+};
 
 export default DefinitionList;
diff --git a/frontend/amundsen_application/static/js/components/DefinitionList/styles.scss b/frontend/amundsen_application/static/js/components/DefinitionList/styles.scss
@@ -10,6 +10,7 @@
 .definition-list-container {
   display: flex;
   padding-bottom: $spacer-2;
+  width: 100%;
 
   &:last-child {
     padding-bottom: 0;
@@ -30,11 +31,33 @@
 
   margin-left: 0;
   margin-bottom: 0;
-  overflow: hidden;
 }
 
-.definition-text {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.definition-list-inner-container {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+
+  > *:not(:last-child) {
+    border-bottom: 1px solid $gray20;
+  }
+}
+
+.definition-list-items-group {
+  padding: $spacer-1 0;
+
+  > * {
+    display: flex;
+
+    :not(:last-child) {
+      margin-bottom: $spacer-half;
+    }
+    > .definition-list-term {
+      flex: 0;
+      flex-basis: 25%;
+    }
+    > .definition-list-definition {
+      flex: 1;
+    }
+  }
 }