feat: trial warnings

src/components/Deployment/index.js

@@ -50,6 +50,9 @@ const Deployment = ({ deployment, checkedParseState, changeState }) => (
           {!['complete', 'cancelled', 'failed'].includes(deployment.status) && deployment.buildStep && (
             <HoverTag text={deployment.buildStep} maxWidth="160px"/>
           )}
+          {['deployCompletedWithWarnings'].includes(deployment.buildStep) && deployment.buildStep && (
+            <HoverTag text={deployment.buildStep} maxWidth="160px" tagColor="#ffbe00" textColor="#000" />
+          )}
         </div>
       </FieldWrapper>
       <FieldWrapper className="duration">

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

src/components/HoverTag/index.tsx

@@ -11,12 +11,12 @@ interface Props {
   tagColor?: string;
   maxWidth?: string;
 }
-const HoverTag: FC<Props> = ({ tooltipPosition, tagColor, maxWidth, text }) => {
+const HoverTag: FC<Props> = ({ tooltipPosition, tagColor, maxWidth, text, textColor }) => {
   return (
     <Tag color={tagColor || '#108ee9'}>
       {
         <Tooltip placement={tooltipPosition || 'right'} title={text}>
-          <TooltipText maxWidth={maxWidth}>{text}</TooltipText>
+          <TooltipText maxWidth={maxWidth} textColor={textColor}>{text}</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

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { StyledLogAccordion } 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);
@@ -30,14 +30,14 @@ const LogAccordion = forwardRef(
     return (
       <StyledLogAccordion className={className}>
         <div
-          className={`accordion-heading`}
+          className={metadata[1] == true ? `accordion-heading accordion-heading-warning` : `accordion-heading`}
           onClick={e => {
             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' + (metadata[1] == true ? ' log-warning-state' : '') + (visibility ? ' visible' : '')}>
+            {metadata[1] == true ? (<label className='warning'></label>): ''}{header} {metadata[0].length > 0 ? '(' + metadata[0] + ')' : ''} 
           </div>
         </div>
         <div ref={logsTopRef} />

src/components/LogViewer/StyledLogViewer.tsx

@@ -126,4 +126,27 @@ export const StyledLogAccordion = styled.div`
       }
     }
   }
+  &.data-row {
+    .accordion-heading {
+      .log-warning-state {
+        ::before {
+          color: #000000;
+          background-color: #ffbe00;
+        }
+      }
+    }
+  }
+  &.data-row {
+    .accordion-heading-warning {
+      color: #000000;
+      background-color: #c59c26;
+      .warning {
+        background-image: url('/static/images/logs2microsoftteams/warning.png');
+        background-repeat: no-repeat;
+        background-size: 15px;
+        background-position: center;
+        padding: 15px;
+      }
+    }
+  }
 `;

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);
         }
       }
     }