[UI] Add ordering in metadata

ui/components/DataFormatter/index.js

@@ -143,6 +143,16 @@ const ArrayFormatter = ({ items }) => {
   );
 };
 
+export function reorderObjectProperties(obj, order) {
+  if (!_.isObject(obj) || obj == null) {
+    return obj;
+  }
+
+  const orderedProperties = _.pick(obj, order);
+  const remainingProperties = _.omit(obj, order);
+  return { ...orderedProperties, ...remainingProperties };
+}
+
 const DynamicFormatter = ({ data }) => {
   const { propertyFormatters } = useContext(FormatterContext);
   const level = useContext(LevelContext);
@@ -186,9 +196,9 @@ const DynamicFormatter = ({ data }) => {
 
 export const FormatStructuredData = ({ propertyFormatters = {}, data }) => {
   if (!data || isEmptyAtAllDepths(data)) {
-    console.log('data is empty', data);
     return null;
   }
+
   return (
     <>
       <FormatterContext.Provider

ui/components/NotificationCenter/metadata.js

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { Typography, Grid } from '@material-ui/core';
 import { Launch as LaunchIcon } from '@material-ui/icons';
-import { FormatStructuredData, LinkFormatters } from '../DataFormatter';
+import { FormatStructuredData, SectionBody, reorderObjectProperties } from '../DataFormatter';
 import { isEmptyAtAllDepths } from '../../utils/objects';
+import { canTruncateDescription } from './notification';
 
 const DryRunResponse = ({ response }) => {
   const cleanedResponse = {};
@@ -24,7 +25,36 @@ const DryRunResponse = ({ response }) => {
   return <FormatStructuredData data={cleanedResponse} />;
 };
 
-export const ErrorMetadataFormatter = ({ metadata, event, classes }) => {
+const TitleLink = ({ href, children, ...props }) => {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      style={{ color: 'inherit' }}
+      {...props}
+    >
+      <Typography
+        variant="h5"
+        style={{
+          textDecorationLine: 'underline',
+          cursor: 'pointer',
+          marginBottom: '0.5rem',
+          fontWeight: 'bolder !important',
+          textTransform: 'uppercase',
+          fontSize: '0.9rem',
+        }}
+      >
+        {children}
+        <sup>
+          <LaunchIcon style={{ width: '1rem', height: '1rem' }} />
+        </sup>
+      </Typography>
+    </a>
+  );
+};
+
+export const ErrorMetadataFormatter = ({ metadata, event }) => {
   const longDescription = metadata?.LongDescription || [];
   const probableCause = metadata?.ProbableCause || [];
   const suggestedRemediation = metadata?.SuggestedRemediation || [];
@@ -35,18 +65,7 @@ export const ErrorMetadataFormatter = ({ metadata, event, classes }) => {
   return (
     <Grid container>
       <div>
-        <a href={errorLink} target="_blank" rel="noopener noreferrer" style={{ color: 'inherit' }}>
-          <Typography
-            variant="h5"
-            className={classes.descriptionHeading}
-            style={{ textDecorationLine: 'underline', cursor: 'pointer', marginBottom: '0.5rem' }}
-          >
-            {formattedErrorCode}
-            <sup>
-              <LaunchIcon style={{ width: '1rem', height: '1rem' }} />
-            </sup>
-          </Typography>
-        </a>
+        <TitleLink href={errorLink}> {formattedErrorCode} </TitleLink>
         <FormatStructuredData data={event.description} />
         <div style={{ marginTop: '1rem' }}>
           <FormatStructuredData
@@ -80,15 +99,32 @@ const EmptyState = ({ event }) => {
   return <Typography variant="body1"> {event.description} </Typography>;
 };
 
-export const FormattedMetadata = ({ event, classes }) => {
+export const FormattedMetadata = ({ event }) => {
   const PropertyFormatters = {
-    Doc: (value) => LinkFormatters.DOC.formatter(value),
-    error: (value) => <ErrorMetadataFormatter metadata={value} event={event} classes={classes} />,
+    doc: (value) => <TitleLink href={value}>Doc</TitleLink>,
+    ShortDescription: (value) => <SectionBody body={value} style={{ marginBlock: '0.5rem' }} />,
+    error: (value) => <ErrorMetadataFormatter metadata={value} event={event} />,
     dryRunResponse: (value) => <DryRunResponse response={value} />,
   };
   if (!event || !event.metadata || isEmptyAtAllDepths(event.metadata)) {
     return <EmptyState event={event} />;
   }
+  const metadata = {
+    ...event.metadata,
+    ShortDescription:
+      event.metadata.error || !canTruncateDescription(event.description || '')
+        ? null
+        : event.description,
+  };
+
+  const order = ['doc', 'ShortDescription', 'LongDescription', 'Summary'];
 
-  return <FormatStructuredData propertyFormatters={PropertyFormatters} data={event.metadata} />;
+  const orderdMetadata = reorderObjectProperties(metadata, order);
+  return (
+    <FormatStructuredData
+      propertyFormatters={PropertyFormatters}
+      data={orderdMetadata}
+      order={order}
+    />
+  );
 };

ui/components/NotificationCenter/notification.js

@@ -46,6 +46,7 @@ import {
 } from '../General/ErrorBoundary';
 import { FormattedMetadata } from './metadata';
 import theme from '../../themes/app';
+import { truncate } from 'lodash';
 
 const useStyles = makeStyles(() => ({
   root: (props) => ({
@@ -106,6 +107,12 @@ export const eventstopPropagation = (e) => {
   e.stopPropagation();
 };
 
+export const MAX_NOTIFICATION_DESCRIPTION_LENGTH = 45;
+
+export const canTruncateDescription = (description) => {
+  return description.length > MAX_NOTIFICATION_DESCRIPTION_LENGTH;
+};
+
 const useMenuStyles = makeStyles((theme) => {
   return {
     paper: {
@@ -351,7 +358,9 @@ export const Notification = withErrorBoundary(({ event_id }) => {
           </Grid>
           <Grid item xs={8} sm={6} className={classes.gridItem}>
             <Typography variant="body1" className={classes.message}>
-              {event.description}
+              {truncate(event.description, {
+                length: MAX_NOTIFICATION_DESCRIPTION_LENGTH,
+              })}
             </Typography>
           </Grid>
           <Grid