result showing improving (#2214)

result showing improving

grafana-plugin/src/containers/TemplatePreview/TemplatePreview.tsx

@@ -26,13 +26,16 @@ interface TemplatePreviewProps {
   active?: boolean;
   onResult?: (result) => void;
 }
+interface ConditionalResult {
+  isResult?: boolean;
+  value?: string;
+}
 
 const TemplatePreview = observer((props: TemplatePreviewProps) => {
   const { templateName, templateBody, payload, alertReceiveChannelId, alertGroupId } = props;
 
   const [result, setResult] = useState<{ preview: string | null } | undefined>(undefined);
-  const [isCondition, setIsCondition] = useState(false);
-  // const [conditionalResult, setConditionalResult] = useState()
+  const [conditionalResult, setConditionalResult] = useState<ConditionalResult>({});
 
   const store = useStore();
   const { alertReceiveChannelStore, alertGroupStore } = store;
@@ -45,9 +48,11 @@ const TemplatePreview = observer((props: TemplatePreviewProps) => {
       .then((data) => {
         setResult(data);
         if (data?.preview === 'True') {
-          setIsCondition(true);
+          setConditionalResult({ isResult: true, value: 'True' });
+        } else if (data?.preview === 'False') {
+          setConditionalResult({ isResult: true, value: 'False' });
         } else {
-          setIsCondition(false);
+          setConditionalResult({ isResult: false, value: undefined });
         }
       })
       .catch((err) => {
@@ -61,18 +66,34 @@ const TemplatePreview = observer((props: TemplatePreviewProps) => {
 
   useEffect(handleTemplateBodyChange, [templateBody, payload]);
 
+  const conditionalMessage = (success: boolean) => {
+    if (templateName.includes('route')) {
+      return (
+        <Text type="secondary">
+          Selected alert will {!success && <Text type="secondary">not</Text>} be matched with this route
+        </Text>
+      );
+    } else {
+      return (
+        <Text type="secondary">
+          Selected alert will {!success && <Text type="secondary">not</Text>}{' '}
+          {`${templateName.substring(0, templateName.indexOf('_'))} alert group`}
+        </Text>
+      );
+    }
+  };
+
   return result ? (
     <>
-      {templateName.includes('condition_template') ? (
-        <Text type={isCondition ? 'success' : 'danger'}>
-          {isCondition ? (
-            <>
-              <Icon name="check" size="lg" /> True
-              <Text type="secondary">{`Selected alert will ${templateName.substring(
-                0,
-                templateName.indexOf('_')
-              )} alert group`}</Text>
-            </>
+      {conditionalResult?.isResult ? (
+        <Text type={conditionalResult.value === 'True' ? 'success' : 'danger'}>
+          {conditionalResult.isResult ? (
+            <VerticalGroup>
+              <HorizontalGroup>
+                <Icon name="check" size="lg" /> {conditionalResult.value}
+              </HorizontalGroup>
+              {conditionalMessage(conditionalResult.value === 'True')}
+            </VerticalGroup>
           ) : (
             <VerticalGroup>
               <HorizontalGroup>
@@ -84,10 +105,7 @@ const TemplatePreview = observer((props: TemplatePreviewProps) => {
                   }}
                 />
               </HorizontalGroup>
-              <Text type="secondary">{`Selected alert will not ${templateName.substring(
-                0,
-                templateName.indexOf('_')
-              )} alert group`}</Text>
+              {conditionalMessage(conditionalResult.value === 'True')}
             </VerticalGroup>
           )}
         </Text>
@@ -101,7 +119,7 @@ const TemplatePreview = observer((props: TemplatePreviewProps) => {
             <div
               className={cx('message')}
               dangerouslySetInnerHTML={{
-                __html: sanitize(result.preview.replace(/\n/g, '<br />') || ''),
+                __html: sanitize(result.preview?.replace(/\n/g, '<br />') || ''),
               }}
             />
           )}

grafana-plugin/src/pages/integrations_2/Integrations2.tsx

@@ -276,8 +276,8 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
           <Emoji
             className={cx('title')}
             text={
-              item.verbal_name.length > MAX_LINE_LENGTH
-                ? item.verbal_name.substring(0, MAX_LINE_LENGTH) + '...'
+              item.verbal_name?.length > MAX_LINE_LENGTH
+                ? item.verbal_name?.substring(0, MAX_LINE_LENGTH) + '...'
                 : item.verbal_name
             }
           />