Edit Escalation Queue

Name

Also known as (comma separated)

Brief definition Items requiring escalation.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "queueName", "type": "text", "label": "Queue name", "default": "Support escalations" }, { "id": "filter", "type": "select", "label": "Minimum severity shown", "default": "all", "options": [ "all", "high", "critical" ] }, { "id": "accent", "type": "color", "label": "Critical accent", "default": "#E8A020", "presets": [ "#E8A020", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#241430" ] }, { "id": "showAge", "type": "toggle", "label": "Show time waiting", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"esc esc--{{filter}}\">\n <p class=\"esc__title\">{{queueName}}</p>\n <div class=\"esc__row esc__row--medium\">#4471 payment retry<span class=\"esc__tag\">medium</span>{{#if showAge}}<small>2h</small>{{/if}}</div>\n <div class=\"esc__row esc__row--high\">#4472 data mismatch<span class=\"esc__tag esc__tag--high\">high</span>{{#if showAge}}<small>6h</small>{{/if}}</div>\n <div class=\"esc__row esc__row--critical\" style=\"border-left-color:{{accent}};\">#4473 outage report<span class=\"esc__tag esc__tag--critical\" style=\"background:{{accent}};\">critical</span>{{#if showAge}}<small>19h</small>{{/if}}</div>\n</div>\n<style>\n.esc { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.esc__title { margin: 0 0 10px; font-weight: 700; }\n.esc__row { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 6px; background: #ffffff; border: 1px solid #24143014; border-left: 3px solid transparent; margin-bottom: 6px; }\n.esc__row small { margin-left: auto; color: #24143080; font-size: 10px; }\n.esc__tag { font-size: 10px; padding: 2px 7px; border-radius: 999px; background: #24143014; }\n.esc__tag--high { background: #24143024; }\n.esc__tag--critical { color: #241430; font-weight: 700; }\n.esc--high .esc__row--medium { display: none; }\n.esc--critical .esc__row--medium, .esc--critical .esc__row--high { display: none; }\n</style>", "tailwind": "<div class=\"esctw esctw--{{filter}} font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border\">\n <p class=\"m-0 mb-2.5 font-bold\">{{queueName}}</p>\n <div class=\"esctw__row esctw__row--medium flex items-center gap-2 p-2 rounded-md bg-white border border-[#24143014] border-l-[3px] mb-1.5\">#4471 payment retry<span class=\"text-[10px] py-0.5 px-1.5 rounded-full bg-[#24143014]\">medium</span>{{#if showAge}}<small class=\"ml-auto text-[#24143080] text-[10px]\">2h</small>{{/if}}</div>\n <div class=\"esctw__row esctw__row--high flex items-center gap-2 p-2 rounded-md bg-white border border-[#24143014] border-l-[3px] mb-1.5\">#4472 data mismatch<span class=\"text-[10px] py-0.5 px-1.5 rounded-full bg-[#24143024]\">high</span>{{#if showAge}}<small class=\"ml-auto text-[#24143080] text-[10px]\">6h</small>{{/if}}</div>\n <div class=\"esctw__row esctw__row--critical flex items-center gap-2 p-2 rounded-md bg-white border border-[#24143014] border-l-[3px] mb-1.5\" style=\"border-left-color:{{accent}};\">#4473 outage report<span class=\"text-[10px] py-0.5 px-1.5 rounded-full font-bold\" style=\"background:{{accent}};\">critical</span>{{#if showAge}}<small class=\"ml-auto text-[#24143080] text-[10px]\">19h</small>{{/if}}</div>\n</div>\n<style>\n.esctw--high .esctw__row--medium { display: none; }\n.esctw--critical .esctw__row--medium, .esctw--critical .esctw__row--high { display: none; }\n</style>", "react": "export function EscalationQueue({\n queueName = \"{{queueName}}\",\n filter = \"{{filter}}\",\n accent = \"{{accent}}\",\n showAge = {{showAge}},\n}) {\n const rows = [\n { id: \"#4471 payment retry\", sev: \"medium\", age: \"2h\", tag: { background: \"#24143014\" } },\n { id: \"#4472 data mismatch\", sev: \"high\", age: \"6h\", tag: { background: \"#24143024\" } },\n { id: \"#4473 outage report\", sev: \"critical\", age: \"19h\", tag: { background: accent, fontWeight: 700 }, border: accent },\n ];\n const order = { medium: 0, high: 1, critical: 2 };\n const min = { all: 0, high: 1, critical: 2 }[filter];\n return (\n <div style={{ font: \"12px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 16, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 10px\", fontWeight: 700 }}>{queueName}</p>\n {rows.filter((r) => order[r.sev] >= min).map((r) => (\n <div key={r.id} style={{ display: \"flex\", alignItems: \"center\", gap: 8, padding: 8, borderRadius: 6, background: \"#ffffff\", border: \"1px solid #24143014\", borderLeft: `3px solid ${r.border ?? \"transparent\"}`, marginBottom: 6 }}>\n {r.id}\n <span style={{ fontSize: 10, padding: \"2px 7px\", borderRadius: 999, ...r.tag }}>{r.sev}</span>\n {showAge && <small style={{ marginLeft: \"auto\", color: \"#24143080\", fontSize: 10 }}>{r.age}</small>}\n </div>\n ))}\n </div>\n );\n}" }