feat: support warnings

src/components/Deployment/index.js

@@ -48,7 +48,16 @@ const Deployment = ({ deployment, checkedParseState, changeState }) => (
           <label>Status</label>
           <div className="field">{deployment.status.charAt(0).toUpperCase() + deployment.status.slice(1)}</div>{' '}
           {!['complete', 'cancelled', 'failed'].includes(deployment.status) && deployment.buildStep && (
-            <HoverTag text={deployment.buildStep} maxWidth="160px"/>
+            <HoverTag text={deployment.buildStep} maxWidth="160px" />
+          )}
+          {deployment.buildStep && ['deployCompletedWithWarnings'].includes(deployment.buildStep) && (
+            <HoverTag
+              text={deployment.buildStep}
+              formatToReadableText
+              maxWidth="160px"
+              tagColor="#ffbe00"
+              textColor="#000"
+            />
           )}
         </div>
       </FieldWrapper>

src/components/Deployments/StyledDeployments.tsx

@@ -114,7 +114,9 @@ export const StyledDeployments = styled.div`
         border-bottom-left-radius: 3px;
         border-bottom-right-radius: 3px;
       }
-
+      .warning {
+        width: 15px;
+      }
       .status {
         @media ${bp.xs_smallOnly} {
           margin-left: 20px;

src/components/Deployments/index.tsx

@@ -60,6 +60,16 @@ const Deployments: FC<DeploymentsProps> = ({ deployments, environmentSlug, proje
                 {!['complete', 'cancelled', 'failed'].includes(deployment.status) && deployment.buildStep && (
                   <HoverTag text={deployment.buildStep} maxWidth="160px" tooltipPosition="top" />
                 )}
+                {deployment.buildStep && ['deployCompletedWithWarnings'].includes(deployment.buildStep) && (
+                  <HoverTag
+                    text={deployment.buildStep}
+                    formatToReadableText
+                    maxWidth="160px"
+                    tooltipPosition="top"
+                    tagColor="#ffbe00"
+                    textColor="#000"
+                  />
+                )}
               </div>
               <div className="duration">{getDeploymentDuration(deployment)} </div>
             </div>

src/components/HoverTag/index.tsx

@@ -7,16 +7,35 @@ import { TooltipText } from './styles';
 
 interface Props {
   text: string;
+  formatToReadableText?: boolean;
   tooltipPosition?: TooltipPlacement;
   tagColor?: string;
   maxWidth?: string;
+  textColor?: string;
 }
-const HoverTag: FC<Props> = ({ tooltipPosition, tagColor, maxWidth, text }) => {
+
+// human friendly strings
+const textPairs = {
+  deployCompletedWithWarnings: 'Completed with warnings',
+};
+
+const HoverTag: FC<Props> = ({ tooltipPosition, tagColor, maxWidth, text, textColor, formatToReadableText }) => {
+  const toolTipTextProps = {
+    ...(maxWidth ? { maxWidth } : {}),
+    ...(textColor ? { textColor } : {}),
+  };
+
+  const formatText = (textProp: Props['text']) => {
+    return (textPairs[textProp] as string | undefined) || text;
+  };
+
+  const textContent = formatToReadableText ? formatText(text) : text;
+
   return (
     <Tag color={tagColor || '#108ee9'}>
       {
-        <Tooltip placement={tooltipPosition || 'right'} title={text}>
-          <TooltipText maxWidth={maxWidth}>{text}</TooltipText>
+        <Tooltip placement={tooltipPosition || 'right'} title={textContent}>
+          <TooltipText {...toolTipTextProps}>{textContent}</TooltipText>
         </Tooltip>
       }
     </Tag>

src/components/HoverTag/styles.tsx

@@ -1,9 +1,10 @@
 import styled from 'styled-components';
 
-export const TooltipText = styled.p<{ maxWidth?: string }>`
+export const TooltipText = styled.p<{ maxWidth?: string, textColor?: string }>`
   margin:unset;
   max-width:${props => (props.maxWidth ? props.maxWidth : '150px')};
   margin: unset;
   overflow: hidden;
   text-overflow: ellipsis;
+  color:${props => (props.textColor ? props.textColor : '#fff')};
 `;

src/components/LogViewer/LogAccordion/index.js

@@ -2,10 +2,10 @@ import React, { forwardRef, useEffect, useRef, useState } from 'react';
 
 import PropTypes from 'prop-types';
 
-import { StyledLogAccordion } from '../StyledLogViewer';
+import { StyledLogAccordion, StyledWarningIcon } from '../StyledLogViewer';
 
 const LogAccordion = forwardRef(
-  ({ children, onToggle, header, className = '', defaultValue = false, metadata = '' }, ref) => {
+  ({ children, onToggle, header, className = '', defaultValue = false, metadata = ['', false] }, ref) => {
     const logsTopRef = useRef(null);
     const logsEndRef = useRef(null);
     const [visibility, setVisibility] = useState(defaultValue);
@@ -27,17 +27,23 @@ const LogAccordion = forwardRef(
       }
     }, [ref, visibility, scrollHidden]);
 
+    const hasWarning = metadata[1] === true;
+
     return (
       <StyledLogAccordion className={className}>
         <div
-          className={`accordion-heading`}
-          onClick={e => {
+          className={hasWarning ? `accordion-heading accordion-heading-warning` : `accordion-heading`}
+          onClick={() => {
             setVisibility(!visibility);
             if (onToggle) onToggle(!visibility);
           }}
         >
-          <div key="1" className={'log-header' + (visibility ? ' visible' : '')}>
-            {header} {metadata.length > 0 ? '(' + metadata + ')' : ''}
+          <div
+            key="1"
+            className={'log-header' + (hasWarning ? ' log-warning-state' : '') + (visibility ? ' visible' : '')}
+          >
+            {hasWarning ? <StyledWarningIcon /> : ''}
+            {header} {metadata[0].length > 0 ? '(' + metadata[0] + ')' : ''}
           </div>
         </div>
         <div ref={logsTopRef} />

src/components/LogViewer/StyledLogViewer.tsx

@@ -1,3 +1,4 @@
+import { WarningTwoTone } from '@ant-design/icons';
 import { color } from 'lib/variables';
 import styled from 'styled-components';
 
@@ -126,4 +127,38 @@ export const StyledLogAccordion = styled.div`
       }
     }
   }
+  &.data-row {
+    .accordion-heading {
+      .log-warning-state {
+        margin-top: 1rem;
+        ::before {
+          color: #000000;
+          background-color: #ffbe00;
+        }
+      }
+    }
+  }
+  &.data-row {
+    .accordion-heading-warning {
+      color: #000000;
+      background-color: #c59d26d4;
+    }
+  }
+`;
+
+export const StyledWarningIcon = styled(WarningTwoTone)`
+  margin-right: 0.5rem;
+  font-size: 1.25rem;
+  svg {
+    path {
+      &:nth-child(1),
+      &:nth-child(2) {
+        fill: #fece30;
+      }
+
+      &:nth-child(3) {
+        fill: black;
+      }
+    }
+  }
 `;

src/components/LogViewer/index.js

@@ -127,7 +127,7 @@ const logPreprocessorProcessParse = (tokens, sectionMetadata) => {
       case 'section-opener':
         let metadataForSection = sectionMetadata.get(tokens[i].details.trim());
         if (metadataForSection == undefined) {
-          metadataForSection = '';
+          metadataForSection = ['', false]
         }
 
         let node = {
@@ -167,11 +167,15 @@ const logPreprocessorExtractSectionEndDetails = logs => {
       let stepName = tokens[i].trim();
       i++;
       let stepDetails = tokens[i].trim();
-
       if (stepName != '' && stepDetails != '') {
         let durationArray = stepDetails.match(durationRegexp);
+        let hasWarnings = false
+        if (stepDetails.match(/.* WithWarnings$/)) {
+          hasWarnings = true
+        }
+        let payload = [`Duration: ${durationArray[1]}`, hasWarnings]
         if (durationArray.length == 2) {
-          ret.set(stepName, `Duration: ${durationArray[1]}`);
+          ret.set(stepName, payload);
         }
       }
     }