Skip to content

Commit 4575423

Browse files
alick-limingalick-liming
committed
modify notify email default template
1 parent 92c6c90 commit 4575423

2 files changed

Lines changed: 620 additions & 140 deletions

File tree

‎flashduty/en/1. On-call/4. Configure On-call/4.7 Templates.md‎

Lines changed: 309 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1083,80 +1083,319 @@ If no custom content is set, the system default template will be used for notifi
10831083

10841084
<head data-id="__react-email-head">
10851085
<style>
1086-
.bg-Critical { background-color: #C80000; }
1087-
.bg-Warning { background-color: #FA7D00; }
1088-
.bg-Info { background-color: #FABE00; }
1089-
.bg-Ok { background-color: rgb(132 204 22); }
1090-
.text-Critical { color: #C80000; }
1091-
.text-Warning { color: #FA7D00; }
1092-
.text-Info { color: #FABE00; }
1093-
.text-Ok { color: rgb(132 204 22); }
1094-
.text-title {font-weight:500;width:6rem;flex-shrink:0}
1095-
.text-content {color:rgb(55,65,81)}
1086+
/* Light mode colors */
1087+
:root {
1088+
--bg-color: rgb(255, 255, 255);
1089+
--text-color: rgb(55, 65, 81);
1090+
--label-key-color: #000;
1091+
--section-bg: rgb(255, 255, 255);
1092+
--border-color: rgb(229, 231, 235);
1093+
}
1094+
1095+
/* Dark mode colors */
1096+
@media (prefers-color-scheme: dark) {
1097+
:root {
1098+
--bg-color: rgb(31, 41, 55);
1099+
--text-color: rgb(209, 213, 219);
1100+
--label-key-color: rgb(229, 231, 235);
1101+
--section-bg: rgb(17, 24, 39);
1102+
--border-color: rgb(75, 85, 99);
1103+
}
1104+
}
1105+
1106+
/* Severity background colors */
1107+
.severity-Critical {
1108+
background-color: #C80000;
1109+
color: #ffffff;
1110+
padding: 4px 12px;
1111+
border-radius: 12px;
1112+
display: inline-block;
1113+
font-weight: 600;
1114+
font-size: 13px;
1115+
}
1116+
.severity-Warning {
1117+
background-color: #fef3c7;
1118+
color: #92400e;
1119+
padding: 4px 12px;
1120+
border-radius: 12px;
1121+
display: inline-block;
1122+
font-weight: 600;
1123+
font-size: 13px;
1124+
}
1125+
.severity-Info {
1126+
background-color: rgb(108,83,177);
1127+
color: #ffffff;
1128+
padding: 0.25rem 0.75rem;
1129+
border-radius: 0.25rem;
1130+
display: inline-block;
1131+
font-weight: 500;
1132+
}
1133+
.severity-Ok {
1134+
background-color: rgb(132 204 22);
1135+
color:rgb(100, 239, 73);
1136+
padding: 0.25rem 0.75rem;
1137+
border-radius: 0.25rem;
1138+
display: inline-block;
1139+
font-weight: 500;
1140+
}
1141+
1142+
/* Progress status colors */
1143+
.progress-Triggered {
1144+
background-color: #dbeafe;
1145+
color: #1e40af;
1146+
padding: 4px 12px;
1147+
border-radius: 12px;
1148+
display: inline-block;
1149+
font-weight: 600;
1150+
font-size: 13px;
1151+
}
1152+
.progress-Acknowledged {
1153+
background-color: #ede9fe;
1154+
color: #6b21a8;
1155+
padding: 4px 12px;
1156+
border-radius: 12px;
1157+
display: inline-block;
1158+
font-weight: 600;
1159+
font-size: 13px;
1160+
}
1161+
.progress-Resolved {
1162+
background-color: #d1fae5;
1163+
color: #065f46;
1164+
padding: 4px 12px;
1165+
border-radius: 12px;
1166+
display: inline-block;
1167+
font-weight: 600;
1168+
font-size: 13px;
1169+
}
1170+
.progress-Closed {
1171+
background-color: #f3f4f6;
1172+
color: #374151;
1173+
padding: 4px 12px;
1174+
border-radius: 12px;
1175+
display: inline-block;
1176+
font-weight: 600;
1177+
font-size: 13px;
1178+
}
1179+
1180+
/* Field row styles */
1181+
.field-row {
1182+
padding: 1rem 0;
1183+
border-bottom: 1px solid var(--border-color);
1184+
}
1185+
.field-row:first-child {
1186+
padding-top: 0;
1187+
}
1188+
.field-row:last-child {
1189+
border-bottom: none;
1190+
}
1191+
.field-label {
1192+
color: #6b7280;
1193+
font-size: 0.875rem;
1194+
margin-bottom: 0.25rem;
1195+
}
1196+
.field-value {
1197+
color: var(--text-color);
1198+
word-break: break-word;
1199+
overflow-wrap: break-word;
1200+
}
1201+
1202+
body {
1203+
background-color: var(--bg-color);
1204+
color: var(--text-color);
1205+
}
1206+
1207+
.labels-section {
1208+
background-color: #f3f4f6;
1209+
padding: 1rem;
1210+
border-radius: 0.375rem;
1211+
margin-top: 0.5rem;
1212+
}
1213+
@media (prefers-color-scheme: dark) {
1214+
.labels-section {
1215+
background-color: rgb(55, 65, 81);
1216+
}
1217+
}
10961218
</style>
10971219
</head>
10981220

1099-
<body data-id="__react-email-body" style="background-color:rgb(255,255,255);border-radius:0.25rem;margin-top:2.5rem;margin-bottom:2.5rem;margin-left:auto;margin-right:auto;padding:1rem;min-width:400px;max-width:660px;font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji">
1100-
<div style="width:100%;height:0.375rem;margin-bottom:2rem" class="bg-{{.IncidentSeverity}}"></div>
1101-
<div style="display:flex;align-items:center;margin-bottom:1.5rem">
1102-
<div style="display:flex;align-items:flex-end;gap:1rem"><img witdh="120" data-id="react-email-img" src="https://console.flashcat.cloud/image/saas-logo.png" height="40" style="display:block;outline:none;border:none;text-decoration:none" /><span style="font-size:1.25rem;line-height:1.75rem;font-weight:600">You have a pending incident</span></div>
1103-
</div>
1104-
<div style="background-color:rgb(243,244,246);padding:2rem;margin-top:1rem;border-radius:0.5rem">
1105-
<div style="display:flex;flex-direction:column;gap:0.75rem">
1106-
<div style="display:flex">
1107-
<div class="text-title">Title</div>
1108-
<div class="text-content">{{.Title}}</div>
1109-
</div>
1110-
<div style="display:flex">
1111-
<div class="text-title">Severity</div>
1112-
<div class="text-{{.IncidentSeverity}}">{{.IncidentSeverity}}</div>
1113-
</div>
1114-
<div style="display:flex">
1115-
<div class="text-title">Channel</div>
1116-
<div class="text-content">{{if .ChannelName}}{{.ChannelName}}{{else}}None{{end}}</div>
1117-
</div>
1118-
<div style="display:flex">
1119-
<div class="text-title">Triggered at</div>
1120-
<div class="text-content">{{date "2006-01-02 15:04:05" .StartTime}}</div>
1121-
</div>
1122-
{{if .CreatorID}}
1123-
<div style="display:flex">
1124-
<div class="text-title">Creator</div>
1125-
<div class="text-content">{{.Creator.PersonName}}</div>
1126-
</div>
1127-
{{end}}
1128-
{{if gt (len .Responders) 0}}
1129-
<div style="display:flex">
1130-
<div class="text-title">Responders</div>
1131-
<div class="text-content">{{range .Responders}}@{{.PersonName}} {{end}}</div>
1132-
</div>
1133-
{{end}}
1134-
<div style="display:flex">
1135-
<div class="text-title">Progress</div>
1136-
<div class="text-content">{{.Progress}}</div>
1137-
</div>
1138-
<div style="display:flex">
1139-
<div class="text-title">Description</div>
1140-
<div style="color:rgb(55,65,81);margin-top:0.125rem">
1141-
<div data-id="react-email-markdown">{{toHtml .Description}}</div>
1142-
</div>
1143-
</div>
1144-
{{if .Labels.resource}}
1145-
<div style="display:flex;margin-bottom:0.5rem;">
1146-
<div style="color:#000;font-weight:500;width:6rem;margin-right:1rem;">Alert targets</div>
1147-
<div style="color:rgb(55,65,81);margin-top:0.125rem">
1148-
<div data-id="react-email-markdown">{{toHtml (joinAlertLabels . "resource" ", ")}}</div>
1149-
</div>
1150-
</div>
1151-
{{end}}
1152-
</div>
1153-
<div style="display:flex;gap:1rem;margin-top:2rem"><a href="{{.DetailUrl}}?ack=1" data-id="react-email-button" target="_blank" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;padding:0px 0px"><span></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:0"><div style="padding-left:2rem;padding-right:2rem;padding-top:0.5rem;padding-bottom:0.5rem;background-color:rgb(108,83,177);border-radius:0.25rem;font-size:1rem;line-height:1.5rem;color:rgb(255,255,255);font-weight:600;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms">Acknowledge</div></span><span></span></a><a href="{{.DetailUrl}}" data-id="react-email-button" target="_blank" style="color:#61dafb;line-height:100%;text-decoration:none;display:inline-block;max-width:100%;padding:0px 0px"><span></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:0"><div style="padding-left:2rem;padding-right:2rem;padding-top:0.5rem;padding-bottom:0.5rem;background-color:rgb(255,255,255);border-width: 1px;border-style:solid;border-color:rgb(229,231,235);border-radius:0.25rem;font-size:1rem;line-height:1.5rem;color:rgb(0,0,0);font-weight:600">View Details</div></span><span></span></a></div>
1154-
</div>
1155-
<div style="display:flex;justify-content:flex-end;align-items:flex-end;margin-top:2rem">
1156-
<div style="font-size:0.875rem;line-height:1.25rem;font-weight:500">ALL RIGHTS RESERVED © Beijing Flashcat Cloud Technology Co.,Ltd.</div>
1157-
</div>
1221+
<body data-id="__react-email-body" style="margin:0;padding:0;background-color:#f3f4f6;font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji">
1222+
<!-- Outer wrapper table for centering -->
1223+
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f3f4f6">
1224+
<tr>
1225+
<td align="center" style="padding:40px 20px">
1226+
<!-- Main container table with fixed width -->
1227+
<table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color:#ffffff;max-width:600px">
1228+
<!-- Purple header bar with logo -->
1229+
<tr>
1230+
<td style="padding:32px 0 32px 32px;text-align:left">
1231+
<img data-id="react-email-img" src="https://flashduty-public.oss-cn-beijing.aliyuncs.com/icons/flashduty-20251216.png" height="70" style="display:block;outline:none;border:none;text-decoration:none;height:70px;width:auto" alt="Flashduty" />
1232+
</td>
1233+
</tr>
1234+
1235+
<!-- Divider after logo -->
1236+
<tr>
1237+
<td style="padding:0 32px">
1238+
<div style="border-top:1px solid #e5e7eb"></div>
1239+
</td>
1240+
</tr>
1241+
1242+
<!-- Main content -->
1243+
<tr>
1244+
<td style="padding:16px 32px 32px 32px">
1245+
<!-- Title and Description -->
1246+
<table width="100%" cellpadding="0" cellspacing="0" border="0">
1247+
<tr>
1248+
<td>
1249+
<h1 style="margin:0;font-size:24px;font-weight:600;color:#111827;line-height:1.5">{{.Title}}</h1>
1250+
{{if .Description}}
1251+
<p style="margin:8px 0 0 0;font-size:16px;color:#6b7280;line-height:1.5">{{toHtml .Description}}</p>
1252+
{{end}}
1253+
</td>
1254+
</tr>
1255+
</table>
1256+
1257+
<!-- Divider after title -->
1258+
<div style="border-top:1px solid #e5e7eb;margin:32px 0"></div>
1259+
1260+
<!-- Fields section -->
1261+
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom:30px">
1262+
<tr>
1263+
<td style="padding:16px 0;border-bottom:1px solid #e5e7eb;background-color:#ffffff">
1264+
<table width="100%" cellpadding="0" cellspacing="0" border="0">
1265+
<tr>
1266+
<td width="120" style="font-weight:600;color:#374151;font-size:14px;vertical-align:top;padding-left:16px">Severity</td>
1267+
<td style="color:#6b7280;font-size:14px;word-break:break-word;padding-right:16px"><span class="severity-{{.IncidentSeverity}}">{{.IncidentSeverity}}</span></td>
1268+
</tr>
1269+
</table>
1270+
</td>
1271+
</tr>
1272+
1273+
<tr>
1274+
<td style="padding:16px 0;border-bottom:1px solid #e5e7eb;background-color:#ffffff">
1275+
<table width="100%" cellpadding="0" cellspacing="0" border="0">
1276+
<tr>
1277+
<td width="120" style="font-weight:600;color:#374151;font-size:14px;vertical-align:top;padding-left:16px">Channel</td>
1278+
<td style="color:#6b7280;font-size:14px;word-break:break-word;padding-right:16px">{{if .ChannelName}}{{.ChannelName}}{{else}}None{{end}}</td>
1279+
</tr>
1280+
</table>
1281+
</td>
1282+
</tr>
1283+
1284+
<tr>
1285+
<td style="padding:16px 0;border-bottom:1px solid #e5e7eb;background-color:#ffffff">
1286+
<table width="100%" cellpadding="0" cellspacing="0" border="0">
1287+
<tr>
1288+
<td width="120" style="font-weight:600;color:#374151;font-size:14px;vertical-align:top;padding-left:16px">Triggered at</td>
1289+
<td style="color:#6b7280;font-size:14px;word-break:break-word;padding-right:16px">{{date "2006-01-02 15:04:05" .StartTime}}</td>
1290+
</tr>
1291+
</table>
1292+
</td>
1293+
</tr>
1294+
1295+
{{if .CreatorID}}
1296+
<tr>
1297+
<td style="padding:16px 0;border-bottom:1px solid #e5e7eb;background-color:#ffffff">
1298+
<table width="100%" cellpadding="0" cellspacing="0" border="0">
1299+
<tr>
1300+
<td width="120" style="font-weight:600;color:#374151;font-size:14px;vertical-align:top;padding-left:16px">Creator</td>
1301+
<td style="color:#6b7280;font-size:14px;word-break:break-word;padding-right:16px">{{.Creator.PersonName}}</td>
1302+
</tr>
1303+
</table>
1304+
</td>
1305+
</tr>
1306+
{{end}}
1307+
1308+
{{if gt (len .Responders) 0}}
1309+
<tr>
1310+
<td style="padding:16px 0;border-bottom:1px solid #e5e7eb;background-color:#ffffff">
1311+
<table width="100%" cellpadding="0" cellspacing="0" border="0">
1312+
<tr>
1313+
<td width="120" style="font-weight:600;color:#374151;font-size:14px;vertical-align:top;padding-left:16px">Responders</td>
1314+
<td style="color:#6b7280;font-size:14px;word-break:break-word;padding-right:16px">{{range .Responders}}@{{.PersonName}} {{end}}</td>
1315+
</tr>
1316+
</table>
1317+
</td>
1318+
</tr>
1319+
{{end}}
1320+
1321+
<tr>
1322+
<td style="padding:16px 0;border-bottom:1px solid #e5e7eb;background-color:#ffffff">
1323+
<table width="100%" cellpadding="0" cellspacing="0" border="0">
1324+
<tr>
1325+
<td width="120" style="font-weight:600;color:#374151;font-size:14px;vertical-align:top;padding-left:16px">Progress</td>
1326+
<td style="color:#6b7280;font-size:14px;word-break:break-word;padding-right:16px"><span class="progress-{{.Progress}}">{{.Progress}}</span></td>
1327+
</tr>
1328+
</table>
1329+
</td>
1330+
</tr>
1331+
1332+
{{if .Labels.resource}}
1333+
<tr>
1334+
<td style="padding:16px 0;border-bottom:1px solid #e5e7eb;background-color:#ffffff">
1335+
<table width="100%" cellpadding="0" cellspacing="0" border="0">
1336+
<tr>
1337+
<td width="120" style="font-weight:600;color:#374151;font-size:14px;vertical-align:top;padding-left:16px">Resource</td>
1338+
<td style="color:#6b7280;font-size:14px;word-break:break-word;padding-right:16px">{{(joinAlertLabels . "resource" ", ")}}</td>
1339+
</tr>
1340+
</table>
1341+
</td>
1342+
</tr>
1343+
{{end}}
1344+
1345+
{{if gt (len .Labels) 0}}
1346+
<tr>
1347+
<td style="padding:16px 0">
1348+
<table width="100%" cellpadding="0" cellspacing="0" border="0">
1349+
<tr>
1350+
<td width="120" style="font-weight:600;color:#374151;font-size:14px;vertical-align:top;padding-left:16px">Labels</td>
1351+
<td style="color:#6b7280;font-size:14px;word-break:break-word;padding-right:16px;background-color:#f9fafb;padding:16px">
1352+
<pre style="margin:0;font-family:'Courier New',monospace;font-size:13px;color:#374151;white-space:pre-wrap;word-break:break-word">{{mustToPrettyJson .Labels}}</pre>
1353+
</td>
1354+
</tr>
1355+
</table>
1356+
</td>
1357+
</tr>
1358+
{{end}}
1359+
</table>
1360+
1361+
<!-- Action buttons -->
1362+
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:32px">
1363+
<tr>
1364+
<td width="48%" align="center" style="padding:0">
1365+
<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
1366+
<tr>
1367+
<td align="center" style="background-color:rgb(108,83,177);border-radius:6px;padding:14px 32px">
1368+
<a href="{{.DetailUrl}}?ack=1" data-id="react-email-button" target="_blank" style="color:#ffffff;font-size:16px;font-weight:600;text-decoration:none;display:block">Acknowledge Now</a>
1369+
</td>
1370+
</tr>
1371+
</table>
1372+
</td>
1373+
<td width="4%" style="padding:0"></td>
1374+
<td width="48%" align="center" style="padding:0">
1375+
<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
1376+
<tr>
1377+
<td align="center" style="background-color:#ffffff;border:2px solid rgb(108,83,177);border-radius:6px;padding:14px 32px">
1378+
<a href="{{.DetailUrl}}" data-id="react-email-button" target="_blank" style="color:rgb(108,83,177);font-size:16px;font-weight:600;text-decoration:none;display:block">View Details</a>
1379+
</td>
1380+
</tr>
1381+
</table>
1382+
</td>
1383+
</tr>
1384+
</table>
1385+
</td>
1386+
</tr>
1387+
1388+
<!-- Footer -->
1389+
<tr>
1390+
<td style="background-color:#f9fafb;padding:20px;text-align:center">
1391+
<p style="margin:0;font-size:12px;color:#9ca3af">ALL RIGHTS RESERVED © FLASHCAT.CLOUD</p>
1392+
</td>
1393+
</tr>
1394+
</table>
1395+
</td>
1396+
</tr>
1397+
</table>
11581398
</body>
1159-
11601399
</html>
11611400
```
11621401

0 commit comments

Comments
 (0)