Customer uptime and SLA portal for account managers

Build me a customer uptime portal that my account managers open before renewal calls and monthly check-ins. Better Stack reports on monitors, but never on customers, so I need a view that reframes the same data per customer: one combined SLA percentage for that customer's systems over a date range I choose, every incident in that window, and a response time trend. The app must state plainly in the header whether we met or breached the uptime we contracted with that customer, and by how many minutes of downtime.

Main view. At the top, a customer picker backed by HubSpot Search Companies, so the account manager types a company name and selects it. Next to it, a date range control with quick presets for last 30 days, last quarter, and month to date, plus a custom range. Selecting a customer loads that customer's saved monitor mapping and contracted uptime target from app storage, then fetches everything for the chosen range. If the selected company has no mapping yet, show an empty state that links straight into the settings view rather than rendering a misleading zero.

SLA header and the verdict. For each mapped monitor, call Better Stack Get Monitor Availability (SLA) with the chosen from and to dates. Combine them time weighted: total up minutes across the monitors divided by total monitored minutes across the monitors, so a customer with six systems is not judged by an unweighted average of percentages. Compute allowed downtime for the window as (100 minus the contracted target percent) times the length of the window in minutes. Then state the verdict in plain language, for example: Target 99.9 percent, allowed 43 minutes of downtime, actual 12 minutes. Met, with 31 minutes to spare. Or: Target 99.9 percent, allowed 43 minutes, actual 68 minutes. Breached by 25 minutes. Show the combined percentage large, the verdict directly under it in a clearly positive or negative treatment, and a per monitor breakdown table underneath so the account manager can see which system caused the damage.

Exclude paused monitors from the SLA math. Use Better Stack List Monitors to read each mapped monitor's current status, drop paused ones from both the combined percentage and the allowed versus actual downtime comparison, and show a small note listing which monitors were excluded and why. A system we deliberately took offline must not drag down a customer's number, but it also must not vanish without explanation.

Incidents. Use Better Stack List Incidents filtered by the mapped monitors and the selected date range, and render a table with start time, end time, duration, which monitor was affected, and the incident cause or name. Each row has a planned maintenance toggle. When an account manager marks a row as planned maintenance, persist that flag against the incident id in app storage so it stays marked for everyone and for every future report, then subtract that incident's duration from the downtime counted against the contracted target. The header should show both figures when they differ: total downtime, and downtime counted against the target after planned maintenance is excluded. Never silently drop maintenance windows from the incident list, because the customer should still see we were transparent about the work.

Response time trend. Use Better Stack Get Monitor Response Times for the mapped monitors over the same window and render a line chart, with a selector to view one monitor at a time or an average across them. Underneath, call out the slowest day and the change from the start of the period to the end, so the account manager has something concrete to say about performance rather than just availability.

Settings view for mapping. A second view lists every mapped customer with its monitor count and contracted target, and lets the user add or edit a mapping. In the editor, search for the company with HubSpot Search Companies, then attach monitors from Better Stack List Monitors and monitor groups from Better Stack List Monitor Groups, and enter the contracted uptime target as a percentage. Store the HubSpot company id, the company name, the selected monitor ids and monitor group ids, and the target. When a customer is mapped to a group, expand it at report time with Better Stack List Monitors in Group rather than freezing the member list, so monitors added to that group later are picked up automatically. All of this is shared workspace wide so two account managers pulling the same customer and range get identical numbers.

Generate report button. On click, create the report with Google Docs Create Document, titled with the customer name and the date range, then fill it with Google Docs Batch Update Document. The document should contain a heading with the customer name and period, a short SLA summary paragraph stating the combined uptime, the contracted target, and the met or breached verdict in minutes of allowed versus actual downtime, a per monitor availability table, and an incident table with start, end, duration, affected system, and a planned maintenance column. Exclude paused monitors from the document's math exactly as the screen does. When the document is ready, show the link in the app so the account manager can open it, give it a final read, and send it to the customer.

General behaviour. Everything except the generated document and the stored mapping is read only, so nothing in Better Stack or HubSpot is modified. Show loading states per panel rather than blocking the whole page, since availability, incidents, and response times all load separately. If a monitor returns an error or has no data for the window, show that monitor as unavailable in the breakdown instead of failing the whole report.