Grouping templating polishing10 (#2276)

# What this PR does - Description of Alert Manager info box was changed - Fix for filtering Escalation chains in Integration - Alt text for Image template - Conditional result for Template was fixed
grafana · Jun 20, 2023 · 9f7bdac · 9f7bdac
1 parent 6cdcf5f
commit 9f7bdac
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 17 deletions.
diff --git a/...IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay.tsx b/...IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay.tsx
@@ -9,7 +9,6 @@ import {
   Icon,
   Tooltip,
   ConfirmModal,
-  Select,
   LoadingPlaceholder,
 } from '@grafana/ui';
 import cn from 'classnames/bind';
@@ -26,13 +25,13 @@ import TooltipBadge from 'components/TooltipBadge/TooltipBadge';
 import { WithContextMenu } from 'components/WithContextMenu/WithContextMenu';
 import { ChatOpsConnectors } from 'containers/AlertRules/parts';
 import EscalationChainSteps from 'containers/EscalationChainSteps/EscalationChainSteps';
+import GSelect from 'containers/GSelect/GSelect';
 import styles from 'containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay.module.scss';
 import TeamName from 'containers/TeamName/TeamName';
 import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
 import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types';
 import { AlertTemplatesDTO } from 'models/alert_templates';
 import { ChannelFilter } from 'models/channel_filter/channel_filter.types';
-import { EscalationChain } from 'models/escalation_chain/escalation_chain.types';
 import CommonIntegrationHelper from 'pages/integration_2/CommonIntegration2.helper';
 import { MONACO_INPUT_HEIGHT_SMALL, MONACO_OPTIONS } from 'pages/integration_2/Integration2.config';
 import IntegrationHelper from 'pages/integration_2/Integration2.helper';
@@ -195,20 +194,15 @@ const ExpandedIntegrationRouteDisplay: React.FC<ExpandedIntegrationRouteDisplayP
                       Escalation chain
                     </InlineLabel>
                     <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
-                      <Select
-                        isSearchable
+                      <GSelect
+                        showSearch
                         width={'auto'}
-                        menuShouldPortal
+                        modelName="escalationChainStore"
                         className={cx('select', 'control')}
                         placeholder="Select escalation chain"
                         isLoading={isRefreshingEscalationChains}
+                        displayField="name"
                         onChange={onEscalationChainChange}
-                        options={Object.keys(escalationChainStore.items).map(
-                          (eschalationChainId: EscalationChain['id']) => ({
-                            value: escalationChainStore.items[eschalationChainId].id,
-                            label: escalationChainStore.items[eschalationChainId].name,
-                          })
-                        )}
                         value={channelFilter.escalation_chain}
                         getOptionLabel={(item: SelectableValue) => {
                           return (
@@ -221,7 +215,7 @@ const ExpandedIntegrationRouteDisplay: React.FC<ExpandedIntegrationRouteDisplayP
                             </>
                           );
                         }}
-                      ></Select>
+                      />
                     </WithPermissionControlTooltip>
 
                     <Tooltip placement={'top'} content={'Reload list'}>
@@ -279,7 +273,7 @@ const ExpandedIntegrationRouteDisplay: React.FC<ExpandedIntegrationRouteDisplayP
       openNotification('Route has been deleted');
     }
 
-    function onEscalationChainChange({ value }) {
+    function onEscalationChainChange(value) {
       alertReceiveChannelStore
         .saveChannelFilter(channelFilterId, {
           escalation_chain: value,

diff --git a/src/containers/TemplatePreview/TemplatePreview.tsx b/src/containers/TemplatePreview/TemplatePreview.tsx
@@ -49,7 +49,7 @@ const TemplatePreview = observer((props: TemplatePreviewProps) => {
         setResult(data);
         if (data?.preview === 'True') {
           setConditionalResult({ isResult: true, value: 'True' });
-        } else if (data?.preview === 'False') {
+        } else if (templateName.includes('route') || templateName.includes('condition')) {
           setConditionalResult({ isResult: true, value: 'False' });
         } else {
           setConditionalResult({ isResult: false, value: undefined });
@@ -87,7 +87,7 @@ const TemplatePreview = observer((props: TemplatePreviewProps) => {
     <>
       {conditionalResult?.isResult ? (
         <Text type={conditionalResult.value === 'True' ? 'success' : 'danger'}>
-          {conditionalResult.isResult ? (
+          {conditionalResult.value === 'True' ? (
             <VerticalGroup>
               <HorizontalGroup>
                 <Icon name="check" size="lg" /> {conditionalResult.value}
@@ -101,7 +101,7 @@ const TemplatePreview = observer((props: TemplatePreviewProps) => {
                 <div
                   className={cx('message')}
                   dangerouslySetInnerHTML={{
-                    __html: sanitize(result.preview || ''),
+                    __html: sanitize(result.preview),
                   }}
                 />
               </HorizontalGroup>
@@ -113,7 +113,13 @@ const TemplatePreview = observer((props: TemplatePreviewProps) => {
         <>
           {templateName.includes('image') ? (
             <div className={cx('image-result')}>
-              <img src={result.preview} />
+              <img
+                src={result.preview}
+                onError={(e) => {
+                  const target = e.target as HTMLImageElement;
+                  target.alt = result.preview || 'No image found';
+                }}
+              />
             </div>
           ) : (
             <div