@backstage-community/plugin-ilert 0.2.24

package/dist/index.esm.js

@@ -0,0 +1,3344 @@
+import { createApiRef, createRouteRef, createPlugin, createApiFactory, discoveryApiRef, identityApiRef, configApiRef, createRoutableExtension, createComponentExtension, useApi, errorApiRef, alertApiRef } from '@backstage/core-plugin-api';
+import { AuthenticationError, ResponseError } from '@backstage/errors';
+import { DateTime, Interval } from 'luxon';
+import { EmptyState, Progress, Link, Table, Content, ResponseErrorPanel, ContentHeader, SupportButton, ItemCardGrid, Page, Header, HeaderLabel, HeaderTabs, HeaderIconLinkRow, CodeSnippet } from '@backstage/core-components';
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import AddIcon from '@material-ui/icons/Add';
+import useAsyncRetry from 'react-use/esm/useAsyncRetry';
+import { parseEntityRef, DEFAULT_NAMESPACE } from '@backstage/catalog-model';
+import Typography from '@material-ui/core/Typography';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import Alert from '@material-ui/lab/Alert';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import humanizeDuration from 'humanize-duration';
+import IconButton from '@material-ui/core/IconButton';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import Grid from '@material-ui/core/Grid';
+import Chip from '@material-ui/core/Chip';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormControl from '@material-ui/core/FormControl';
+import ListItemText from '@material-ui/core/ListItemText';
+import Select from '@material-ui/core/Select';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import CardHeader from '@material-ui/core/CardHeader';
+import RepeatIcon from '@material-ui/icons/Repeat';
+import { DateTimePicker } from '@material-ui/pickers/DateTimePicker';
+import MuiPickersUtilsProvider from '@material-ui/pickers/MuiPickersUtilsProvider';
+import LuxonUtils from '@date-io/luxon';
+import Divider from '@material-ui/core/Divider';
+import { useEntity } from '@backstage/plugin-catalog-react';
+import AlarmAddIcon from '@material-ui/icons/AlarmAdd';
+import BuildIcon from '@material-ui/icons/Build';
+import PauseIcon from '@material-ui/icons/Pause';
+import PlayArrowIcon from '@material-ui/icons/PlayArrow';
+import WebIcon from '@material-ui/icons/Web';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import ReplayIcon from '@material-ui/icons/Replay';
+import Avatar from '@material-ui/core/Avatar';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import Tooltip from '@material-ui/core/Tooltip';
+import EmailIcon from '@material-ui/icons/Email';
+import PhoneIcon from '@material-ui/icons/Phone';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+const ilertApiRef = createApiRef({
+  id: "plugin.ilert.service"
+});
+const DEFAULT_PROXY_PATH = "/ilert";
+const JSON_HEADERS = {
+  "Content-Type": "application/json",
+  Accept: "application/json"
+};
+class ILertClient {
+  constructor(opts) {
+    __publicField(this, "discoveryApi");
+    __publicField(this, "proxyPath");
+    __publicField(this, "baseUrl");
+    this.discoveryApi = opts.discoveryApi;
+    this.baseUrl = opts.baseUrl;
+    this.proxyPath = opts.proxyPath;
+  }
+  static fromConfig(configApi, discoveryApi) {
+    var _a, _b;
+    const baseUrl = (_a = configApi.getOptionalString("ilert.baseUrl")) != null ? _a : "https://app.ilert.com";
+    return new ILertClient({
+      discoveryApi,
+      baseUrl,
+      proxyPath: (_b = configApi.getOptionalString("ilert.proxyPath")) != null ? _b : DEFAULT_PROXY_PATH
+    });
+  }
+  async fetch(input, init) {
+    const apiUrl = await this.apiUrl();
+    const response = await fetch(`${apiUrl}${input}`, init);
+    if (response.status === 401) {
+      throw new AuthenticationError(
+        "This request requires HTTP authentication."
+      );
+    }
+    if (!response.ok || response.status >= 400) {
+      throw await ResponseError.fromResponse(response);
+    }
+    return await response.json();
+  }
+  async fetchAlerts(opts) {
+    const init = {
+      headers: JSON_HEADERS
+    };
+    const query = new URLSearchParams();
+    if ((opts == null ? void 0 : opts.maxResults) !== void 0) {
+      query.append("max-results", String(opts.maxResults));
+    }
+    if ((opts == null ? void 0 : opts.startIndex) !== void 0) {
+      query.append("start-index", String(opts.startIndex));
+    }
+    if ((opts == null ? void 0 : opts.alertSources) !== void 0 && Array.isArray(opts.alertSources)) {
+      opts.alertSources.forEach((a) => {
+        if (a) {
+          query.append("alert-source", String(a));
+        }
+      });
+    }
+    if ((opts == null ? void 0 : opts.states) !== void 0 && Array.isArray(opts.states)) {
+      opts.states.forEach((state) => {
+        query.append("state", state);
+      });
+    }
+    const response = await this.fetch(`/api/alerts?${query.toString()}`, init);
+    return response;
+  }
+  async fetchAlertsCount(opts) {
+    const init = {
+      headers: JSON_HEADERS
+    };
+    const query = new URLSearchParams();
+    if (opts && opts.states && Array.isArray(opts.states)) {
+      opts.states.forEach((state) => {
+        query.append("state", state);
+      });
+    }
+    const response = await this.fetch(
+      `/api/alerts/count?${query.toString()}`,
+      init
+    );
+    return response && response.count ? response.count : 0;
+  }
+  async fetchAlert(id) {
+    const init = {
+      headers: JSON_HEADERS
+    };
+    const response = await this.fetch(
+      `/api/alerts/${encodeURIComponent(id)}`,
+      init
+    );
+    return response;
+  }
+  async fetchAlertResponders(alert) {
+    const init = {
+      headers: JSON_HEADERS
+    };
+    const response = await this.fetch(
+      `/api/alerts/${encodeURIComponent(alert.id)}/responders`,
+      init
+    );
+    return response;
+  }
+  async fetchAlertActions(alert) {
+    const init = {
+      headers: JSON_HEADERS
+    };
+    const response = await this.fetch(
+      `/api/alerts/${encodeURIComponent(alert.id)}/actions`,
+      init
+    );
+    return response;
+  }
+  async acceptAlert(alert, userName) {
+    var _a;
+    const init = {
+      method: "POST",
+      headers: JSON_HEADERS,
+      body: JSON.stringify({
+        apiKey: ((_a = alert.alertSource) == null ? void 0 : _a.integrationKey) || "",
+        alertKey: alert.alertKey,
+        summary: `from ${userName} via Backstage plugin`,
+        eventType: "ACCEPT"
+      })
+    };
+    await this.fetch("/api/events", init);
+    return this.fetchAlert(alert.id);
+  }
+  async resolveAlert(alert, userName) {
+    var _a;
+    const init = {
+      method: "POST",
+      headers: JSON_HEADERS,
+      body: JSON.stringify({
+        apiKey: ((_a = alert.alertSource) == null ? void 0 : _a.integrationKey) || "",
+        alertKey: alert.alertKey,
+        summary: `from ${userName} via Backstage plugin`,
+        eventType: "RESOLVE"
+      })
+    };
+    await this.fetch("/api/events", init);
+    return this.fetchAlert(alert.id);
+  }
+  async assignAlert(alert, responder) {
+    const init = {
+      method: "PUT",
+      headers: JSON_HEADERS
+    };
+    const query = new URLSearchParams();
+    switch (responder.group) {
+      case "ESCALATION_POLICY":
+        query.append("policy-id", String(responder.id));
+        break;
+      case "ON_CALL_SCHEDULE":
+        query.append("schedule-id", String(responder.id));
+        break;
+      default:
+        query.append("user-id", String(responder.id));
+        break;
+    }
+    const response = await this.fetch(
+      `/api/alerts/${encodeURIComponent(alert.id)}/assign?${query.toString()}`,
+      init
+    );
+    return response;
+  }
+  async triggerAlertAction(alert, action) {
+    const init = {
+      method: "POST",
+      headers: JSON_HEADERS,
+      body: JSON.stringify({
+        webhookId: action.webhookId,
+        extensionId: action.extensionId,
+        type: action.type,
+        name: action.name
+      })
+    };
+    await this.fetch(
+      `/api/alerts/${encodeURIComponent(alert.id)}/actions`,
+      init
+    );
+  }
+  async createAlert(eventRequest) {
+    const init = {
+      method: "POST",
+      headers: JSON_HEADERS,
+      body: JSON.stringify({
+        apiKey: eventRequest.integrationKey,
+        summary: eventRequest.summary,
+        details: eventRequest.details,
+        eventType: "ALERT",
+        links: [
+          {
+            href: eventRequest.source,
+            text: "Backstage Url"
+          }
+        ],
+        customDetails: {
+          userName: eventRequest.userName
+        }
+      })
+    };
+    const response = await this.fetch("/api/events", init);
+    return response;
+  }
+  async fetchAlertSources() {
+    const init = {
+      headers: JSON_HEADERS
+    };
+    const response = await this.fetch("/api/alert-sources", init);
+    return response;
+  }
+  async fetchAlertSource(idOrIntegrationKey) {
+    const init = {
+      headers: JSON_HEADERS
+    };
+    const response = await this.fetch(
+      `/api/alert-sources/${encodeURIComponent(idOrIntegrationKey)}`,
+      init
+    );
+    return response;
+  }
+  async fetchAlertSourceOnCalls(alertSource) {
+    const init = {
+      headers: JSON_HEADERS
+    };
+    const response = await this.fetch(
+      `/api/on-calls?policies=${encodeURIComponent(
+        alertSource.escalationPolicy.id
+      )}&expand=user&expand=escalationPolicy&timezone=${DateTime.local().zoneName}`,
+      init
+    );
+    return response;
+  }
+  async enableAlertSource(alertSource) {
+    const init = {
+      method: "PUT",
+      headers: JSON_HEADERS,
+      body: JSON.stringify({ ...alertSource, active: true })
+    };
+    const response = await this.fetch(
+      `/api/alert-sources/${encodeURIComponent(alertSource.id)}`,
+      init
+    );
+    return response;
+  }
+  async disableAlertSource(alertSource) {
+    const init = {
+      method: "PUT",
+      headers: JSON_HEADERS,
+      body: JSON.stringify({ ...alertSource, active: false })
+    };
+    const response = await this.fetch(
+      `/api/alert-sources/${encodeURIComponent(alertSource.id)}`,
+      init
+    );
+    return response;
+  }
+  async addImmediateMaintenance(alertSourceId, minutes) {
+    const init = {
+      method: "POST",
+      headers: JSON_HEADERS,
+      body: JSON.stringify({
+        start: DateTime.utc().toISO(),
+        end: DateTime.utc().plus({ minutes }).toISO(),
+        description: `Immediate maintenance window for ${minutes} minutes. Backstage \u2014 iLert plugin.`,
+        createdBy: "Backstage",
+        timezone: DateTime.local().zoneName,
+        alertSources: [{ id: alertSourceId }]
+      })
+    };
+    const response = await this.fetch("/api/maintenance-windows", init);
+    return response;
+  }
+  async fetchOnCallSchedules() {
+    const init = {
+      headers: JSON_HEADERS
+    };
+    const response = await this.fetch(
+      "/api/schedules?include=currentShift&include=nextShift",
+      init
+    );
+    return response;
+  }
+  async fetchUsers() {
+    const init = {
+      headers: JSON_HEADERS
+    };
+    const response = await this.fetch("/api/users", init);
+    return response;
+  }
+  async overrideShift(scheduleId, userId, start, end) {
+    const init = {
+      method: "PUT",
+      headers: JSON_HEADERS,
+      body: JSON.stringify({ user: { id: userId }, start, end })
+    };
+    const response = await this.fetch(
+      `/api/schedules/${encodeURIComponent(scheduleId)}/overrides`,
+      init
+    );
+    return response;
+  }
+  async fetchServices(opts) {
+    const init = {
+      headers: JSON_HEADERS
+    };
+    const query = new URLSearchParams();
+    if ((opts == null ? void 0 : opts.maxResults) !== void 0) {
+      query.append("max-results", String(opts.maxResults));
+    }
+    if ((opts == null ? void 0 : opts.startIndex) !== void 0) {
+      query.append("start-index", String(opts.startIndex));
+    }
+    query.append("include", "uptime");
+    const response = await this.fetch(
+      `/api/services?${query.toString()}`,
+      init
+    );
+    return response;
+  }
+  async fetchStatusPages(opts) {
+    const init = {
+      headers: JSON_HEADERS
+    };
+    const query = new URLSearchParams();
+    if ((opts == null ? void 0 : opts.maxResults) !== void 0) {
+      query.append("max-results", String(opts.maxResults));
+    }
+    if ((opts == null ? void 0 : opts.startIndex) !== void 0) {
+      query.append("start-index", String(opts.startIndex));
+    }
+    query.append("include", "subscribed");
+    const response = await this.fetch(
+      `/api/status-pages?${query.toString()}`,
+      init
+    );
+    return response;
+  }
+  getAlertDetailsURL(alert) {
+    return `${this.baseUrl}/alert/view.jsf?id=${encodeURIComponent(alert.id)}`;
+  }
+  getAlertSourceDetailsURL(alertSource) {
+    if (!alertSource) {
+      return "";
+    }
+    return `${this.baseUrl}/source/view.jsf?id=${encodeURIComponent(
+      alertSource.id
+    )}`;
+  }
+  getEscalationPolicyDetailsURL(escalationPolicy) {
+    return `${this.baseUrl}/policy/view.jsf?id=${encodeURIComponent(
+      escalationPolicy.id
+    )}`;
+  }
+  getScheduleDetailsURL(schedule) {
+    return `${this.baseUrl}/schedule/view.jsf?id=${encodeURIComponent(
+      schedule.id
+    )}`;
+  }
+  getServiceDetailsURL(service) {
+    return `${this.baseUrl}/service/view.jsf?id=${encodeURIComponent(
+      service.id
+    )}`;
+  }
+  getStatusPageDetailsURL(statusPage) {
+    return `${this.baseUrl}/status-page/view.jsf?id=${encodeURIComponent(
+      statusPage.id
+    )}`;
+  }
+  getStatusPageURL(statusPage) {
+    return statusPage.domain ? statusPage.domain : statusPage.subdomain;
+  }
+  getUserPhoneNumber(user) {
+    var _a, _b;
+    return ((_a = user == null ? void 0 : user.mobile) == null ? void 0 : _a.number) || ((_b = user == null ? void 0 : user.landline) == null ? void 0 : _b.number) || "";
+  }
+  getUserInitials(user) {
+    if (!user) {
+      return "";
+    }
+    if (!user.firstName && !user.lastName) {
+      return user.username;
+    }
+    return `${user.firstName} ${user.lastName}`;
+  }
+  async apiUrl() {
+    const proxyUrl = await this.discoveryApi.getBaseUrl("proxy");
+    return proxyUrl + this.proxyPath;
+  }
+}
+
+const iLertRouteRef = createRouteRef({
+  id: "ilert"
+});
+
+const ilertPlugin = createPlugin({
+  id: "ilert",
+  apis: [
+    createApiFactory({
+      api: ilertApiRef,
+      deps: {
+        discoveryApi: discoveryApiRef,
+        identityApi: identityApiRef,
+        configApi: configApiRef
+      },
+      factory: ({ discoveryApi, configApi }) => ILertClient.fromConfig(configApi, discoveryApi)
+    })
+  ],
+  routes: {
+    root: iLertRouteRef
+  }
+});
+const ILertPage$1 = ilertPlugin.provide(
+  createRoutableExtension({
+    name: "ILertPage",
+    component: () => import('./esm/index-D2_Gjvjx.esm.js').then((m) => m.ILertPage),
+    mountPoint: iLertRouteRef
+  })
+);
+const EntityILertCard = ilertPlugin.provide(
+  createComponentExtension({
+    name: "EntityILertCard",
+    component: {
+      lazy: () => import('./esm/index-aory7UQN.esm.js').then((m) => m.ILertCard)
+    }
+  })
+);
+
+const PENDING = "PENDING";
+const ACCEPTED = "ACCEPTED";
+const RESOLVED = "RESOLVED";
+const OPERATIONAL = "OPERATIONAL";
+const UNDER_MAINTENANCE = "UNDER_MAINTENANCE";
+const DEGRADED = "DEGRADED";
+const PARTIAL_OUTAGE = "PARTIAL_OUTAGE";
+const MAJOR_OUTAGE = "MAJOR_OUTAGE";
+const PRIVATE = "PRIVATE";
+const PUBLIC = "PUBLIC";
+
+const useAlerts = (paging, singleSource, alertSource) => {
+  const ilertApi = useApi(ilertApiRef);
+  const errorApi = useApi(errorApiRef);
+  const [tableState, setTableState] = React.useState({
+    page: 0,
+    pageSize: 10
+  });
+  const [states, setStates] = React.useState([
+    ACCEPTED,
+    PENDING
+  ]);
+  const [alertsList, setAlertsList] = React.useState([]);
+  const [alertsCount, setAlertsCount] = React.useState(0);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const fetchAlertsCall = async () => {
+    try {
+      if (singleSource && !alertSource) {
+        return;
+      }
+      setIsLoading(true);
+      const opts = {
+        states,
+        alertSources: alertSource ? [alertSource.id] : []
+      };
+      if (paging) {
+        opts.maxResults = tableState.pageSize;
+        opts.startIndex = tableState.page * tableState.pageSize;
+      }
+      const data = await ilertApi.fetchAlerts(opts);
+      setAlertsList(data || []);
+      setIsLoading(false);
+    } catch (e) {
+      if (!(e instanceof AuthenticationError)) {
+        errorApi.post(e);
+      }
+      setIsLoading(false);
+      throw e;
+    }
+  };
+  const fetchAlertsCountCall = async () => {
+    try {
+      const count = await ilertApi.fetchAlertsCount({ states });
+      setAlertsCount(count || 0);
+    } catch (e) {
+      if (!(e instanceof AuthenticationError)) {
+        errorApi.post(e);
+      }
+      throw e;
+    }
+  };
+  const fetchAlerts = useAsyncRetry(fetchAlertsCall, [
+    tableState,
+    states,
+    singleSource,
+    alertSource
+  ]);
+  const refetchAlerts = () => {
+    setTableState({ ...tableState, page: 0 });
+    Promise.all([fetchAlertsCall(), fetchAlertsCountCall()]);
+  };
+  const fetchAlertsCount = useAsyncRetry(fetchAlertsCountCall, [states]);
+  const error = fetchAlerts.error || fetchAlertsCount.error;
+  const retry = () => {
+    fetchAlerts.retry();
+    fetchAlertsCount.retry();
+  };
+  const onAlertChanged = (newAlert) => {
+    let shouldRefetchAlerts = false;
+    setAlertsList(
+      alertsList.reduce((acc, alert) => {
+        if (newAlert.id === alert.id) {
+          if (states.includes(newAlert.status)) {
+            acc.push(newAlert);
+          } else {
+            shouldRefetchAlerts = true;
+          }
+          return acc;
+        }
+        acc.push(alert);
+        return acc;
+      }, [])
+    );
+    if (shouldRefetchAlerts) {
+      refetchAlerts();
+    }
+  };
+  const onChangePage = (page) => {
+    setTableState({ ...tableState, page });
+  };
+  const onChangeRowsPerPage = (p) => {
+    setTableState({ ...tableState, pageSize: p });
+  };
+  const onAlertStatesChange = (s) => {
+    setStates(s);
+  };
+  return [
+    {
+      tableState,
+      states,
+      alerts: alertsList,
+      alertsCount,
+      error,
+      isLoading
+    },
+    {
+      setTableState,
+      setStates,
+      setAlertsList,
+      setIsLoading,
+      retry,
+      onAlertChanged,
+      refetchAlerts,
+      onChangePage,
+      onChangeRowsPerPage,
+      onAlertStatesChange
+    }
+  ];
+};
+
+const useNewAlert = (open, initialAlertSource) => {
+  const ilertApi = useApi(ilertApiRef);
+  const errorApi = useApi(errorApiRef);
+  const [alertSourcesList, setAlertSourcesList] = React.useState(
+    []
+  );
+  const [alertSource, setAlertSource] = React.useState(
+    null
+  );
+  const [summary, setSummary] = React.useState("");
+  const [details, setDetails] = React.useState("");
+  const [isLoading, setIsLoading] = React.useState(false);
+  const fetchAlertSources = useAsyncRetry(async () => {
+    try {
+      if (!open || initialAlertSource) {
+        return;
+      }
+      const count = await ilertApi.fetchAlertSources();
+      setAlertSourcesList(count || 0);
+    } catch (e) {
+      if (!(e instanceof AuthenticationError)) {
+        errorApi.post(e);
+      }
+      throw e;
+    }
+  }, [open]);
+  const error = fetchAlertSources.error;
+  const retry = () => {
+    fetchAlertSources.retry();
+  };
+  return [
+    {
+      alertSources: alertSourcesList,
+      alertSource: initialAlertSource ? initialAlertSource : alertSource,
+      summary,
+      details,
+      error,
+      isLoading
+    },
+    {
+      setAlertSourcesList,
+      setAlertSource,
+      setSummary,
+      setDetails,
+      setIsLoading,
+      retry
+    }
+  ];
+};
+
+const useStyles$e = makeStyles(() => ({
+  container: {
+    display: "flex",
+    flexWrap: "wrap"
+  },
+  formControl: {
+    minWidth: 120,
+    width: "100%"
+  },
+  option: {
+    fontSize: 15,
+    "& > span": {
+      marginRight: 10,
+      fontSize: 18
+    }
+  },
+  optionWrapper: {
+    display: "flex",
+    width: "100%"
+  },
+  sourceImage: {
+    height: 22,
+    paddingRight: 4
+  }
+}));
+const AlertNewModal = ({
+  isModalOpened,
+  setIsModalOpened,
+  refetchAlerts,
+  initialAlertSource,
+  entityName
+}) => {
+  const [
+    { alertSources, alertSource, summary, details, isLoading },
+    { setAlertSource, setSummary, setDetails, setIsLoading }
+  ] = useNewAlert(isModalOpened, initialAlertSource);
+  const ilertApi = useApi(ilertApiRef);
+  const alertApi = useApi(alertApiRef);
+  const identityApi = useApi(identityApiRef);
+  const source = window.location.toString();
+  const classes = useStyles$e();
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const handleClose = () => {
+    setIsModalOpened(false);
+  };
+  let integrationKey = "";
+  if (initialAlertSource && initialAlertSource.integrationKey) {
+    integrationKey = initialAlertSource.integrationKey;
+  } else if (alertSource && alertSource.integrationKey) {
+    integrationKey = alertSource.integrationKey;
+  }
+  const handleCreate = () => {
+    if (!integrationKey) {
+      return;
+    }
+    setIsLoading(true);
+    setTimeout(async () => {
+      try {
+        const { userEntityRef } = await identityApi.getBackstageIdentity();
+        const { name: userName } = parseEntityRef(userEntityRef, {
+          defaultKind: "User",
+          defaultNamespace: DEFAULT_NAMESPACE
+        });
+        await ilertApi.createAlert({
+          integrationKey,
+          summary,
+          details,
+          userName,
+          source
+        });
+        alertApi.post({ message: "Alert created." });
+        refetchAlerts();
+      } catch (err) {
+        alertApi.post({ message: err, severity: "error" });
+      }
+      setIsModalOpened(false);
+    }, 250);
+  };
+  const canCreate = !!integrationKey && !!summary;
+  return /* @__PURE__ */ React.createElement(
+    Dialog,
+    {
+      open: isModalOpened,
+      onClose: handleClose,
+      "aria-labelledby": "create-alert-form-title"
+    },
+    /* @__PURE__ */ React.createElement(DialogTitle, { id: "create-alert-form-title" }, entityName ? /* @__PURE__ */ React.createElement("div", null, "This action will trigger an alert for", " ", /* @__PURE__ */ React.createElement("strong", null, '"', entityName, '"'), ".") : "New alert"),
+    /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(Alert, { severity: "info" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", gutterBottom: true, align: "justify" }, "Please describe the problem you want to report. Be as descriptive as possible. Your signed in user and a reference to the current page will automatically be amended to the alarm so that the receiver can reach out to you if necessary.")), !initialAlertSource ? /* @__PURE__ */ React.createElement(
+      Autocomplete,
+      {
+        disabled: isLoading,
+        options: alertSources,
+        value: alertSource,
+        classes: {
+          root: classes.formControl,
+          option: classes.option
+        },
+        onChange: (_event, newValue) => {
+          setAlertSource(newValue);
+        },
+        autoHighlight: true,
+        getOptionLabel: (a) => a.name,
+        renderOption: (a) => /* @__PURE__ */ React.createElement("div", { className: classes.optionWrapper }, /* @__PURE__ */ React.createElement(
+          "img",
+          {
+            src: prefersDarkMode ? a.lightIconUrl : a.iconUrl,
+            alt: a.name,
+            className: classes.sourceImage
+          }
+        ), /* @__PURE__ */ React.createElement(Typography, { noWrap: true }, a.name)),
+        renderInput: (params) => /* @__PURE__ */ React.createElement(
+          TextField,
+          {
+            ...params,
+            label: "Alert Source",
+            variant: "outlined",
+            margin: "normal",
+            inputProps: {
+              ...params.inputProps,
+              autoComplete: "new-password"
+              // disable autocomplete and autofill
+            }
+          }
+        )
+      }
+    ) : null, /* @__PURE__ */ React.createElement(
+      TextField,
+      {
+        disabled: isLoading,
+        label: "Summary",
+        fullWidth: true,
+        margin: "normal",
+        variant: "outlined",
+        classes: {
+          root: classes.formControl
+        },
+        value: summary,
+        onChange: (event) => {
+          setSummary(event.target.value);
+        }
+      }
+    ), /* @__PURE__ */ React.createElement(
+      TextField,
+      {
+        disabled: isLoading,
+        label: "Details",
+        fullWidth: true,
+        multiline: true,
+        rows: 4,
+        margin: "normal",
+        variant: "outlined",
+        classes: {
+          root: classes.formControl
+        },
+        value: details,
+        onChange: (event) => {
+          setDetails(event.target.value);
+        }
+      }
+    )),
+    /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        disabled: !canCreate,
+        onClick: handleCreate,
+        color: "secondary",
+        variant: "contained"
+      },
+      "Create"
+    ), /* @__PURE__ */ React.createElement(Button, { onClick: handleClose, color: "primary" }, "Cancel"))
+  );
+};
+
+const MissingAuthorizationHeaderError = () => /* @__PURE__ */ React.createElement(
+  EmptyState,
+  {
+    missing: "info",
+    title: "Missing or invalid iLert authorization header",
+    description: "The request to fetch data needs a valid authorization header. See README for more details.",
+    action: /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        color: "primary",
+        variant: "contained",
+        href: "https://github.com/backstage/backstage/blob/master/plugins/ilert/README.md"
+      },
+      "Read More"
+    )
+  }
+);
+
+const useAlertActions = (alert, open) => {
+  const ilertApi = useApi(ilertApiRef);
+  const errorApi = useApi(errorApiRef);
+  const [alertActionsList, setAlertActionsList] = React.useState(
+    []
+  );
+  const [isLoading, setIsLoading] = React.useState(false);
+  const { error, retry } = useAsyncRetry(async () => {
+    try {
+      if (!alert || !open) {
+        return;
+      }
+      const data = await ilertApi.fetchAlertActions(alert);
+      setAlertActionsList(data);
+    } catch (e) {
+      if (!(e instanceof AuthenticationError)) {
+        errorApi.post(e);
+      }
+      throw e;
+    }
+  }, [alert, open]);
+  return [
+    {
+      alertActions: alertActionsList,
+      error,
+      isLoading
+    },
+    {
+      setAlertActionsList,
+      setIsLoading,
+      retry
+    }
+  ];
+};
+
+const useAssignAlert = (alert, open) => {
+  const ilertApi = useApi(ilertApiRef);
+  const errorApi = useApi(errorApiRef);
+  const [alertRespondersList, setAlertRespondersList] = React.useState([]);
+  const [alertResponder, setAlertResponder] = React.useState(null);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const { error, retry } = useAsyncRetry(async () => {
+    try {
+      if (!alert || !open) {
+        return;
+      }
+      const data = await ilertApi.fetchAlertResponders(alert);
+      if (data && Array.isArray(data)) {
+        const groups = [
+          "SUGGESTED",
+          "USER",
+          "ESCALATION_POLICY",
+          "ON_CALL_SCHEDULE"
+        ];
+        data.sort((a, b) => groups.indexOf(a.group) - groups.indexOf(b.group));
+        setAlertRespondersList(data);
+      }
+    } catch (e) {
+      if (!(e instanceof AuthenticationError)) {
+        errorApi.post(e);
+      }
+      throw e;
+    }
+  }, [alert, open]);
+  return [
+    {
+      alertRespondersList,
+      alertResponder,
+      error,
+      isLoading
+    },
+    {
+      setAlertRespondersList,
+      setAlertResponder,
+      setIsLoading,
+      retry
+    }
+  ];
+};
+
+const useStyles$d = makeStyles(() => ({
+  container: {
+    display: "flex",
+    flexWrap: "wrap"
+  },
+  formControl: {
+    minWidth: 120,
+    width: "100%"
+  },
+  option: {
+    fontSize: 15,
+    "& > span": {
+      marginRight: 10,
+      fontSize: 18
+    }
+  },
+  optionWrapper: {
+    display: "flex",
+    width: "100%"
+  },
+  sourceImage: {
+    height: 22,
+    paddingRight: 4
+  }
+}));
+const AlertAssignModal = ({
+  alert,
+  isModalOpened,
+  setIsModalOpened,
+  onAlertChanged
+}) => {
+  const [
+    { alertRespondersList, alertResponder, isLoading },
+    { setIsLoading, setAlertResponder, setAlertRespondersList }
+  ] = useAssignAlert(alert, isModalOpened);
+  const callback = onAlertChanged || ((_) => {
+  });
+  const ilertApi = useApi(ilertApiRef);
+  const alertApi = useApi(alertApiRef);
+  const classes = useStyles$d();
+  const handleClose = () => {
+    setAlertRespondersList([]);
+    setIsModalOpened(false);
+  };
+  const handleAssign = () => {
+    if (!alert || !alertResponder) {
+      return;
+    }
+    setIsLoading(true);
+    setAlertRespondersList([]);
+    setTimeout(async () => {
+      try {
+        const newAlert = await ilertApi.assignAlert(alert, alertResponder);
+        callback(newAlert);
+        alertApi.post({ message: "Alert assigned." });
+      } catch (err) {
+        alertApi.post({ message: err, severity: "error" });
+      }
+      setIsLoading(false);
+      setIsModalOpened(false);
+    }, 250);
+  };
+  const canAssign = !!alertResponder;
+  return /* @__PURE__ */ React.createElement(
+    Dialog,
+    {
+      open: isModalOpened,
+      onClose: handleClose,
+      "aria-labelledby": "assign-alert-form-title"
+    },
+    /* @__PURE__ */ React.createElement(DialogTitle, { id: "assign-alert-form-title" }, "Select responder to assign"),
+    /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(Alert, { severity: "info" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", gutterBottom: true, align: "justify" }, "This action will assign the alert to the selected responder.")), /* @__PURE__ */ React.createElement(
+      Autocomplete,
+      {
+        disabled: isLoading,
+        options: alertRespondersList,
+        value: alertResponder,
+        classes: {
+          root: classes.formControl,
+          option: classes.option
+        },
+        onChange: (_event, newValue) => {
+          setAlertResponder(newValue);
+        },
+        autoHighlight: true,
+        groupBy: (option) => {
+          switch (option.group) {
+            case "SUGGESTED":
+              return "Suggested responders";
+            case "USER":
+              return "Users";
+            case "ESCALATION_POLICY":
+              return "Escalation policies";
+            case "ON_CALL_SCHEDULE":
+              return "Schedules";
+            default:
+              return "";
+          }
+        },
+        getOptionLabel: (a) => a.name,
+        renderOption: (a) => /* @__PURE__ */ React.createElement("div", { className: classes.optionWrapper }, /* @__PURE__ */ React.createElement(Typography, { noWrap: true }, a.name)),
+        renderInput: (params) => /* @__PURE__ */ React.createElement(
+          TextField,
+          {
+            ...params,
+            label: "Responder",
+            variant: "outlined",
+            margin: "normal",
+            inputProps: {
+              ...params.inputProps,
+              autoComplete: "new-password"
+              // disable autocomplete and autofill
+            }
+          }
+        )
+      }
+    )),
+    /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        disabled: !canAssign,
+        onClick: handleAssign,
+        color: "primary",
+        variant: "contained"
+      },
+      "Assign"
+    ), /* @__PURE__ */ React.createElement(Button, { onClick: handleClose, color: "primary" }, "Cancel"))
+  );
+};
+
+const AlertActionsMenu = ({
+  alert,
+  onAlertChanged,
+  setIsLoading
+}) => {
+  const ilertApi = useApi(ilertApiRef);
+  const alertApi = useApi(alertApiRef);
+  const identityApi = useApi(identityApiRef);
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const callback = onAlertChanged || ((_) => {
+  });
+  const setProcessing = setIsLoading || ((_) => {
+  });
+  const [isAssignAlertModalOpened, setIsAssignAlertModalOpened] = React.useState(false);
+  const [{ alertActions, isLoading }] = useAlertActions(
+    alert,
+    Boolean(anchorEl)
+  );
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleCloseMenu = () => {
+    setAnchorEl(null);
+  };
+  const handleAccept = async () => {
+    try {
+      handleCloseMenu();
+      setProcessing(true);
+      const { userEntityRef } = await identityApi.getBackstageIdentity();
+      const { name: userName } = parseEntityRef(userEntityRef, {
+        defaultKind: "User",
+        defaultNamespace: DEFAULT_NAMESPACE
+      });
+      const newAlert = await ilertApi.acceptAlert(alert, userName);
+      alertApi.post({ message: "Alert accepted." });
+      callback(newAlert);
+      setProcessing(false);
+    } catch (err) {
+      setProcessing(false);
+      alertApi.post({ message: err, severity: "error" });
+    }
+  };
+  const handleResolve = async () => {
+    try {
+      handleCloseMenu();
+      setProcessing(true);
+      const { userEntityRef } = await identityApi.getBackstageIdentity();
+      const { name: userName } = parseEntityRef(userEntityRef, {
+        defaultKind: "User",
+        defaultNamespace: DEFAULT_NAMESPACE
+      });
+      const newAlert = await ilertApi.resolveAlert(alert, userName);
+      alertApi.post({ message: "Alert resolved." });
+      callback(newAlert);
+      setProcessing(false);
+    } catch (err) {
+      setProcessing(false);
+      alertApi.post({ message: err, severity: "error" });
+    }
+  };
+  const handleAssign = () => {
+    handleCloseMenu();
+    setIsAssignAlertModalOpened(true);
+  };
+  const handleTriggerAction = (action) => async () => {
+    try {
+      handleCloseMenu();
+      setProcessing(true);
+      await ilertApi.triggerAlertAction(alert, action);
+      alertApi.post({ message: "Alert action triggered." });
+      setProcessing(false);
+    } catch (err) {
+      setProcessing(false);
+      alertApi.post({ message: err, severity: "error" });
+    }
+  };
+  const actions = alertActions.map((a) => {
+    const successTrigger = a.history ? a.history.find((h) => h.success) : void 0;
+    const triggeredBy = successTrigger && successTrigger.actor ? `${successTrigger.actor.firstName} ${successTrigger.actor.lastName}` : "";
+    return /* @__PURE__ */ React.createElement(
+      MenuItem,
+      {
+        key: a.webhookId,
+        onClick: handleTriggerAction(a),
+        disabled: !!successTrigger
+      },
+      /* @__PURE__ */ React.createElement(Typography, { variant: "inherit", noWrap: true }, triggeredBy ? `${a.name} (by ${triggeredBy})` : a.name)
+    );
+  });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      "aria-label": "more",
+      "aria-controls": "long-menu",
+      "aria-haspopup": "true",
+      onClick: handleClick,
+      size: "small"
+    },
+    /* @__PURE__ */ React.createElement(MoreVertIcon, null)
+  ), /* @__PURE__ */ React.createElement(
+    Menu,
+    {
+      id: `alert-actions-menu-${alert.id}`,
+      anchorEl,
+      keepMounted: true,
+      open: Boolean(anchorEl),
+      onClose: handleCloseMenu,
+      PaperProps: {
+        style: { maxHeight: 48 * 5.5 }
+      }
+    },
+    alert.status === "PENDING" ? /* @__PURE__ */ React.createElement(MenuItem, { key: "ack", onClick: handleAccept }, /* @__PURE__ */ React.createElement(Typography, { variant: "inherit", noWrap: true }, "Accept")) : null,
+    alert.status !== "RESOLVED" ? /* @__PURE__ */ React.createElement(MenuItem, { key: "close", onClick: handleResolve }, /* @__PURE__ */ React.createElement(Typography, { variant: "inherit", noWrap: true }, "Resolve")) : null,
+    alert.status !== "RESOLVED" ? /* @__PURE__ */ React.createElement(MenuItem, { key: "assign", onClick: handleAssign }, /* @__PURE__ */ React.createElement(Typography, { variant: "inherit", noWrap: true }, "Assign")) : null,
+    isLoading ? /* @__PURE__ */ React.createElement(MenuItem, { key: "loading" }, /* @__PURE__ */ React.createElement(Progress, { style: { width: "100%" } })) : actions,
+    /* @__PURE__ */ React.createElement(MenuItem, { key: "details", onClick: handleCloseMenu }, /* @__PURE__ */ React.createElement(Typography, { variant: "inherit", noWrap: true }, /* @__PURE__ */ React.createElement(Link, { to: ilertApi.getAlertDetailsURL(alert) }, "View in iLert")))
+  ), /* @__PURE__ */ React.createElement(
+    AlertAssignModal,
+    {
+      alert,
+      setIsModalOpened: setIsAssignAlertModalOpened,
+      isModalOpened: isAssignAlertModalOpened,
+      onAlertChanged
+    }
+  ));
+};
+
+const AlertLink = ({ alert }) => {
+  const ilertApi = useApi(ilertApiRef);
+  if (!alert) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Link, { to: ilertApi.getAlertDetailsURL(alert) }, "#", alert.id);
+};
+
+const useStyles$c = makeStyles({
+  root: {
+    display: "flex",
+    maxWidth: "100%"
+  },
+  image: {
+    height: 22,
+    paddingRight: 4
+  },
+  link: {
+    lineHeight: "22px"
+  }
+});
+const AlertSourceLink = ({
+  alertSource
+}) => {
+  const ilertApi = useApi(ilertApiRef);
+  const classes = useStyles$c();
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  if (!alertSource) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 0 }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 2 }, /* @__PURE__ */ React.createElement(
+    "img",
+    {
+      src: prefersDarkMode ? alertSource.lightIconUrl : alertSource.iconUrl,
+      alt: alertSource.name,
+      className: classes.image
+    }
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 10 }, /* @__PURE__ */ React.createElement(
+    Link,
+    {
+      className: classes.link,
+      to: ilertApi.getAlertSourceDetailsURL(alertSource)
+    },
+    alertSource.name
+  )));
+};
+
+const ResolvedChip = withStyles((theme) => ({
+  root: {
+    backgroundColor: "#4caf50",
+    color: theme.palette.common.white,
+    margin: 0
+  }
+}))(Chip);
+const AcceptedChip = withStyles((theme) => ({
+  root: {
+    backgroundColor: "#ffb74d",
+    color: theme.palette.common.white,
+    margin: 0
+  }
+}))(Chip);
+const PendingChip = withStyles((theme) => ({
+  root: {
+    backgroundColor: "#d32f2f",
+    color: theme.palette.common.white,
+    margin: 0
+  }
+}))(Chip);
+const alertStatusLabels = {
+  [RESOLVED]: "Resolved",
+  [ACCEPTED]: "Accepted",
+  [PENDING]: "Pending"
+};
+const StatusChip$2 = ({ alert }) => {
+  const label = `${alertStatusLabels[alert.status]}`;
+  switch (alert.status) {
+    case RESOLVED:
+      return /* @__PURE__ */ React.createElement(ResolvedChip, { label, size: "small" });
+    case ACCEPTED:
+      return /* @__PURE__ */ React.createElement(AcceptedChip, { label, size: "small" });
+    case PENDING:
+      return /* @__PURE__ */ React.createElement(PendingChip, { label, size: "small" });
+    default:
+      return /* @__PURE__ */ React.createElement(Chip, { label, size: "small" });
+  }
+};
+
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+      width: 250
+    }
+  }
+};
+const useStyles$b = makeStyles({
+  root: {
+    display: "flex"
+  },
+  label: {
+    marginTop: 8,
+    marginRight: 4
+  },
+  formControl: {
+    minWidth: 120,
+    maxWidth: 300
+  },
+  grow: {
+    flexGrow: 1
+  }
+});
+const TableTitle = ({
+  alertStates,
+  onAlertStatesChange
+}) => {
+  const classes = useStyles$b();
+  const handleAlertStatusSelectChange = (event) => {
+    onAlertStatesChange(event.target.value);
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Typography, { noWrap: true, className: classes.label }, "Status:"), /* @__PURE__ */ React.createElement(
+    FormControl,
+    {
+      className: classes.formControl,
+      variant: "outlined",
+      size: "small"
+    },
+    /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        id: "alerts-status-select",
+        multiple: true,
+        value: alertStates,
+        onChange: handleAlertStatusSelectChange,
+        renderValue: (selected) => selected.join(", "),
+        MenuProps
+      },
+      [PENDING, ACCEPTED, RESOLVED].map((state) => /* @__PURE__ */ React.createElement(MenuItem, { key: state, value: state }, /* @__PURE__ */ React.createElement(
+        Checkbox,
+        {
+          checked: alertStates.indexOf(state) > -1
+        }
+      ), /* @__PURE__ */ React.createElement(ListItemText, { primary: alertStatusLabels[state] })))
+    )
+  ));
+};
+
+const useStyles$a = makeStyles((theme) => ({
+  empty: {
+    padding: theme.spacing(2),
+    display: "flex",
+    justifyContent: "center"
+  }
+}));
+const AlertsTable = ({
+  alerts,
+  alertsCount,
+  tableState,
+  states,
+  isLoading,
+  onAlertChanged,
+  setIsLoading,
+  onAlertStatesChange,
+  onChangePage,
+  onChangeRowsPerPage,
+  compact
+}) => {
+  const ilertApi = useApi(ilertApiRef);
+  const classes = useStyles$a();
+  const xsColumnStyle = {
+    width: "5%",
+    maxWidth: "5%"
+  };
+  const smColumnStyle = {
+    width: "10%",
+    maxWidth: "10%"
+  };
+  const mdColumnStyle = {
+    width: "15%",
+    maxWidth: "15%"
+  };
+  const lgColumnStyle = {
+    width: "20%",
+    maxWidth: "20%"
+  };
+  const xlColumnStyle = {
+    width: "30%",
+    maxWidth: "30%"
+  };
+  const idColumn = {
+    title: "ID",
+    field: "id",
+    highlight: true,
+    cellStyle: smColumnStyle,
+    headerStyle: smColumnStyle,
+    render: (rowData) => /* @__PURE__ */ React.createElement(AlertLink, { alert: rowData })
+  };
+  const summaryColumn = {
+    title: "Summary",
+    field: "summary",
+    cellStyle: !compact ? xlColumnStyle : void 0,
+    headerStyle: !compact ? xlColumnStyle : void 0,
+    render: (rowData) => /* @__PURE__ */ React.createElement(Typography, null, rowData.summary)
+  };
+  const sourceColumn = {
+    title: "Source",
+    field: "source",
+    cellStyle: mdColumnStyle,
+    headerStyle: mdColumnStyle,
+    render: (rowData) => /* @__PURE__ */ React.createElement(AlertSourceLink, { alertSource: rowData.alertSource })
+  };
+  const durationColumn = {
+    title: "Duration",
+    field: "reportTime",
+    type: "datetime",
+    cellStyle: smColumnStyle,
+    headerStyle: smColumnStyle,
+    render: (rowData) => /* @__PURE__ */ React.createElement(Typography, { noWrap: true }, rowData.status !== "RESOLVED" ? humanizeDuration(
+      Interval.fromDateTimes(DateTime.fromISO(rowData.reportTime), DateTime.now()).toDuration().valueOf(),
+      { units: ["h", "m", "s"], largest: 2, round: true }
+    ) : humanizeDuration(
+      Interval.fromDateTimes(
+        DateTime.fromISO(rowData.reportTime),
+        DateTime.fromISO(rowData.resolvedOn)
+      ).toDuration().valueOf(),
+      { units: ["h", "m", "s"], largest: 2, round: true }
+    ))
+  };
+  const respondersColumn = {
+    title: "Responders",
+    field: "responders",
+    cellStyle: !compact ? mdColumnStyle : lgColumnStyle,
+    headerStyle: !compact ? mdColumnStyle : lgColumnStyle,
+    render: (rowData) => /* @__PURE__ */ React.createElement(Typography, null, rowData.responders.map((value, i, arr) => {
+      return ilertApi.getUserInitials(value.user) + (arr.length - 1 !== i ? ", " : "");
+    }))
+  };
+  const priorityColumn = {
+    title: "Priority",
+    field: "priority",
+    cellStyle: smColumnStyle,
+    headerStyle: smColumnStyle,
+    render: (rowData) => /* @__PURE__ */ React.createElement(Typography, { noWrap: true }, rowData.priority === "HIGH" ? "High" : "Low")
+  };
+  const statusColumn = {
+    title: "Status",
+    field: "status",
+    cellStyle: xsColumnStyle,
+    headerStyle: xsColumnStyle,
+    render: (rowData) => /* @__PURE__ */ React.createElement(StatusChip$2, { alert: rowData })
+  };
+  const actionsColumn = {
+    title: "",
+    field: "",
+    cellStyle: xsColumnStyle,
+    headerStyle: xsColumnStyle,
+    render: (rowData) => /* @__PURE__ */ React.createElement(
+      AlertActionsMenu,
+      {
+        alert: rowData,
+        onAlertChanged,
+        setIsLoading
+      }
+    )
+  };
+  const columns = compact ? [
+    summaryColumn,
+    durationColumn,
+    respondersColumn,
+    statusColumn,
+    actionsColumn
+  ] : [
+    idColumn,
+    summaryColumn,
+    sourceColumn,
+    durationColumn,
+    respondersColumn,
+    priorityColumn,
+    statusColumn,
+    actionsColumn
+  ];
+  return /* @__PURE__ */ React.createElement(
+    Table,
+    {
+      options: {
+        sorting: false,
+        search: !compact,
+        paging: !compact,
+        actionsColumnIndex: -1,
+        pageSize: tableState.pageSize,
+        pageSizeOptions: !compact ? [10, 20, 50, 100] : [3, 10, 20, 50, 100],
+        padding: "dense",
+        loadingType: "overlay",
+        showEmptyDataSourceMessage: !isLoading,
+        showTitle: true,
+        toolbar: true
+      },
+      emptyContent: /* @__PURE__ */ React.createElement(Typography, { color: "textSecondary", className: classes.empty }, "No alerts right now"),
+      title: !compact ? /* @__PURE__ */ React.createElement(
+        TableTitle,
+        {
+          alertStates: states,
+          onAlertStatesChange
+        }
+      ) : /* @__PURE__ */ React.createElement(Typography, { variant: "button", color: "textSecondary" }, "ALERTS"),
+      page: tableState.page,
+      totalCount: alertsCount,
+      onPageChange: onChangePage,
+      onRowsPerPageChange: onChangeRowsPerPage,
+      columns,
+      data: alerts,
+      isLoading
+    }
+  );
+};
+
+const AlertsPage = () => {
+  const [
+    { tableState, states, alerts, alertsCount, isLoading, error },
+    {
+      onAlertStatesChange,
+      onChangePage,
+      onChangeRowsPerPage,
+      onAlertChanged,
+      refetchAlerts,
+      setIsLoading
+    }
+  ] = useAlerts(true);
+  const [isModalOpened, setIsModalOpened] = React.useState(false);
+  const handleCreateNewAlertClick = () => {
+    setIsModalOpened(true);
+  };
+  if (error) {
+    if (error.name === "AuthenticationError") {
+      return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(MissingAuthorizationHeaderError, null));
+    }
+    return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ResponseErrorPanel, { error }));
+  }
+  return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: "Alerts" }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "contained",
+      color: "primary",
+      size: "small",
+      startIcon: /* @__PURE__ */ React.createElement(AddIcon, null),
+      onClick: handleCreateNewAlertClick
+    },
+    "Create Alert"
+  ), /* @__PURE__ */ React.createElement(
+    AlertNewModal,
+    {
+      isModalOpened,
+      setIsModalOpened,
+      refetchAlerts
+    }
+  ), /* @__PURE__ */ React.createElement(SupportButton, null, "This helps you to bring iLert into your developer portal.")), /* @__PURE__ */ React.createElement(
+    AlertsTable,
+    {
+      alerts,
+      alertsCount,
+      tableState,
+      states,
+      onAlertChanged,
+      onAlertStatesChange,
+      onChangePage,
+      onChangeRowsPerPage,
+      isLoading,
+      setIsLoading
+    }
+  ));
+};
+
+const useShiftOverride = (s, isModalOpened) => {
+  const ilertApi = useApi(ilertApiRef);
+  const errorApi = useApi(errorApiRef);
+  const [shift, setShift] = React.useState(s);
+  const [usersList, setUsersList] = React.useState([]);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const { error, retry } = useAsyncRetry(async () => {
+    try {
+      if (!isModalOpened) {
+        return;
+      }
+      setIsLoading(true);
+      const data = await ilertApi.fetchUsers();
+      setUsersList(data || []);
+      setIsLoading(false);
+    } catch (e) {
+      setIsLoading(false);
+      if (!(e instanceof AuthenticationError)) {
+        errorApi.post(e);
+      }
+      throw e;
+    }
+  }, [isModalOpened]);
+  const setUser = (user) => {
+    setShift({ ...shift, user });
+  };
+  const setStart = (start) => {
+    setShift({ ...shift, start });
+  };
+  const setEnd = (end) => {
+    setShift({ ...shift, end });
+  };
+  return [
+    {
+      shift,
+      users: usersList,
+      user: shift.user,
+      start: shift.start,
+      end: shift.end,
+      error,
+      isLoading
+    },
+    {
+      retry,
+      setIsLoading,
+      setUser,
+      setStart,
+      setEnd
+    }
+  ];
+};
+
+const useStyles$9 = makeStyles(() => ({
+  container: {
+    display: "flex",
+    flexWrap: "wrap"
+  },
+  formControl: {
+    minWidth: 120,
+    width: "100%"
+  },
+  option: {
+    fontSize: 15,
+    "& > span": {
+      marginRight: 10,
+      fontSize: 18
+    }
+  },
+  optionWrapper: {
+    display: "flex",
+    width: "100%"
+  },
+  sourceImage: {
+    height: 22,
+    paddingRight: 4
+  },
+  grow: {
+    flexGrow: 1
+  }
+}));
+const ShiftOverrideModal = ({
+  scheduleId,
+  shift,
+  refetchOnCallSchedules,
+  isModalOpened,
+  setIsModalOpened
+}) => {
+  const [
+    { isLoading, users, user, start, end },
+    { setUser, setStart, setEnd, setIsLoading }
+  ] = useShiftOverride(shift, isModalOpened);
+  const ilertApi = useApi(ilertApiRef);
+  const alertApi = useApi(alertApiRef);
+  const classes = useStyles$9();
+  const handleClose = () => {
+    setIsModalOpened(false);
+  };
+  const handleOverride = () => {
+    if (!shift || !shift.user) {
+      return;
+    }
+    setIsLoading(true);
+    setTimeout(async () => {
+      try {
+        const success = await ilertApi.overrideShift(
+          scheduleId,
+          user.id,
+          start,
+          end
+        );
+        if (success) {
+          alertApi.post({ message: "Shift overridden." });
+          refetchOnCallSchedules();
+        }
+      } catch (err) {
+        alertApi.post({ message: err, severity: "error" });
+      }
+      setIsModalOpened(false);
+    }, 250);
+  };
+  if (!shift) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(
+    Dialog,
+    {
+      open: isModalOpened,
+      onClose: handleClose,
+      "aria-labelledby": "override-shift-form-title"
+    },
+    /* @__PURE__ */ React.createElement(DialogTitle, { id: "override-shift-form-title" }, "Shift override"),
+    /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(MuiPickersUtilsProvider, { utils: LuxonUtils }, /* @__PURE__ */ React.createElement(
+      Autocomplete,
+      {
+        disabled: isLoading,
+        options: users,
+        value: user,
+        classes: {
+          root: classes.formControl,
+          option: classes.option
+        },
+        onChange: (_event, newValue) => {
+          setUser(newValue);
+        },
+        autoHighlight: true,
+        getOptionLabel: (a) => ilertApi.getUserInitials(a),
+        renderOption: (a) => /* @__PURE__ */ React.createElement("div", { className: classes.optionWrapper }, /* @__PURE__ */ React.createElement(Typography, { noWrap: true }, ilertApi.getUserInitials(a))),
+        renderInput: (params) => /* @__PURE__ */ React.createElement(
+          TextField,
+          {
+            ...params,
+            label: "User",
+            variant: "outlined",
+            fullWidth: true,
+            inputProps: {
+              ...params.inputProps,
+              autoComplete: "new-password"
+              // disable autocomplete and autofill
+            }
+          }
+        )
+      }
+    ), /* @__PURE__ */ React.createElement(
+      DateTimePicker,
+      {
+        label: "Start",
+        inputVariant: "outlined",
+        fullWidth: true,
+        margin: "normal",
+        ampm: false,
+        value: start,
+        className: classes.formControl,
+        onChange: (date) => {
+          var _a;
+          setStart((_a = date == null ? void 0 : date.toISO()) != null ? _a : "");
+        }
+      }
+    ), /* @__PURE__ */ React.createElement(
+      DateTimePicker,
+      {
+        label: "End",
+        inputVariant: "outlined",
+        fullWidth: true,
+        margin: "normal",
+        ampm: false,
+        value: end,
+        className: classes.formControl,
+        onChange: (date) => {
+          var _a;
+          setEnd((_a = date == null ? void 0 : date.toISO()) != null ? _a : "");
+        }
+      }
+    ))),
+    /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        disabled: isLoading,
+        onClick: handleOverride,
+        color: "primary",
+        variant: "contained"
+      },
+      "Override"
+    ), /* @__PURE__ */ React.createElement(Button, { disabled: isLoading, onClick: handleClose, color: "primary" }, "Cancel"))
+  );
+};
+
+const useStyles$8 = makeStyles({
+  button: {
+    marginTop: 4,
+    padding: 0,
+    lineHeight: 1.8,
+    "& span": {
+      lineHeight: 1.8,
+      fontSize: "0.65rem"
+    },
+    "& svg": {
+      fontSize: "0.85rem !important"
+    }
+  }
+});
+const OnCallShiftItem = ({
+  scheduleId,
+  shift,
+  refetchOnCallSchedules
+}) => {
+  const classes = useStyles$8();
+  const ilertApi = useApi(ilertApiRef);
+  const [isModalOpened, setIsModalOpened] = React.useState(false);
+  const handleOverride = () => {
+    setIsModalOpened(true);
+  };
+  if (!shift || !shift.start) {
+    return /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 0 }, /* @__PURE__ */ React.createElement(Grid, { item: true, sm: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle1", color: "textSecondary" }, "Nobody")));
+  }
+  return /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 0 }, shift && shift.user ? /* @__PURE__ */ React.createElement(Grid, { item: true, sm: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle1", noWrap: true }, ilertApi.getUserInitials(shift.user))) : null, /* @__PURE__ */ React.createElement(Grid, { item: true, sm: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2", color: "textSecondary" }, `${DateTime.fromISO(shift.start).toFormat("D MMM, HH:mm")} - ${DateTime.fromISO(shift.end).toFormat("D MMM, HH:mm")}`)), /* @__PURE__ */ React.createElement(Grid, { item: true, sm: 12 }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      color: "primary",
+      size: "small",
+      className: classes.button,
+      startIcon: /* @__PURE__ */ React.createElement(RepeatIcon, null),
+      onClick: handleOverride
+    },
+    /* @__PURE__ */ React.createElement(Typography, { variant: "overline" }, "Override shift")
+  ), /* @__PURE__ */ React.createElement(
+    ShiftOverrideModal,
+    {
+      scheduleId,
+      shift,
+      refetchOnCallSchedules,
+      isModalOpened,
+      setIsModalOpened
+    }
+  )));
+};
+
+const useStyles$7 = makeStyles(() => ({
+  card: {
+    margin: 16,
+    width: "calc(100% - 32px)"
+  },
+  cardHeader: {
+    maxWidth: "100%"
+  },
+  cardContent: {
+    marginLeft: 80,
+    borderLeft: "1px #808289 solid",
+    position: "relative"
+  },
+  indicatorNext: {
+    position: "absolute",
+    top: "calc(40% - 10px)",
+    left: -6,
+    width: 12,
+    height: 12,
+    background: "#92949c !important",
+    borderRadius: "50%"
+  },
+  indicatorCurrent: {
+    position: "absolute",
+    top: "calc(40% - 10px)",
+    left: -6,
+    width: 12,
+    height: 12,
+    background: "#ffb74d !important",
+    color: "#ffb74d !important",
+    borderRadius: "50%",
+    "&::after": {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      borderRadius: "50%",
+      animation: "$ripple 1.2s infinite ease-in-out",
+      border: "1px solid currentColor",
+      content: '""'
+    }
+  },
+  "@keyframes ripple": {
+    "0%": {
+      transform: "scale(.8)",
+      opacity: 1
+    },
+    "100%": {
+      transform: "scale(2.4)",
+      opacity: 0
+    }
+  },
+  beforeText: {
+    position: "absolute",
+    top: "calc(31% - 10px)",
+    left: -78,
+    width: 65,
+    height: 20,
+    textAlign: "center",
+    color: "#808289"
+  },
+  marginBottom: {
+    marginBottom: 16
+  },
+  link: {
+    fontSize: "1.5rem",
+    fontWeight: 700,
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    display: "block"
+  }
+}));
+const OnCallSchedulesGrid = ({
+  onCallSchedules,
+  isLoading,
+  refetchOnCallSchedules
+}) => {
+  const ilertApi = useApi(ilertApiRef);
+  const classes = useStyles$7();
+  if (isLoading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  return /* @__PURE__ */ React.createElement(ItemCardGrid, { "data-testid": "docs-explore" }, !(onCallSchedules == null ? void 0 : onCallSchedules.length) ? null : onCallSchedules.map((schedule, index) => /* @__PURE__ */ React.createElement(Card, { key: index }, /* @__PURE__ */ React.createElement(
+    CardHeader,
+    {
+      classes: { content: classes.cardHeader },
+      title: /* @__PURE__ */ React.createElement(
+        Link,
+        {
+          to: ilertApi.getScheduleDetailsURL(schedule),
+          className: classes.link
+        },
+        schedule.name
+      )
+    }
+  ), /* @__PURE__ */ React.createElement(CardContent, { className: classes.cardContent }, /* @__PURE__ */ React.createElement("div", { className: classes.indicatorCurrent }), /* @__PURE__ */ React.createElement(
+    OnCallShiftItem,
+    {
+      shift: schedule.currentShift,
+      scheduleId: schedule.id,
+      refetchOnCallSchedules
+    }
+  ), /* @__PURE__ */ React.createElement(Typography, { className: classes.beforeText, variant: "body2" }, "On call now")), /* @__PURE__ */ React.createElement(
+    CardContent,
+    {
+      className: `${classes.cardContent} ${classes.marginBottom}`
+    },
+    /* @__PURE__ */ React.createElement("div", { className: classes.indicatorNext }),
+    /* @__PURE__ */ React.createElement(
+      OnCallShiftItem,
+      {
+        shift: schedule.nextShift,
+        scheduleId: schedule.id,
+        refetchOnCallSchedules
+      }
+    ),
+    /* @__PURE__ */ React.createElement(Typography, { className: classes.beforeText, variant: "body2" }, "Next on call")
+  ))));
+};
+
+const useOnCallSchedules = () => {
+  const ilertApi = useApi(ilertApiRef);
+  const errorApi = useApi(errorApiRef);
+  const [onCallSchedulesList, setOnCallSchedulesList] = React.useState([]);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const fetchOnCallSchedulesCall = async () => {
+    try {
+      setIsLoading(true);
+      const data = await ilertApi.fetchOnCallSchedules();
+      setOnCallSchedulesList(data || []);
+      setIsLoading(false);
+    } catch (e) {
+      setIsLoading(false);
+      if (!(e instanceof AuthenticationError)) {
+        errorApi.post(e);
+      }
+      throw e;
+    }
+  };
+  const { error, retry } = useAsyncRetry(fetchOnCallSchedulesCall, []);
+  return [
+    {
+      onCallSchedules: onCallSchedulesList,
+      error,
+      isLoading
+    },
+    {
+      retry,
+      setIsLoading,
+      refetchOnCallSchedules: fetchOnCallSchedulesCall
+    }
+  ];
+};
+
+const OnCallSchedulesPage = () => {
+  const [{ onCallSchedules, isLoading, error }, { refetchOnCallSchedules }] = useOnCallSchedules();
+  if (error) {
+    if (error instanceof AuthenticationError) {
+      return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(MissingAuthorizationHeaderError, null));
+    }
+    return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ResponseErrorPanel, { error }));
+  }
+  return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: "Who is on call?" }, /* @__PURE__ */ React.createElement(SupportButton, null, "This helps you to bring iLert into your developer portal.")), /* @__PURE__ */ React.createElement(
+    OnCallSchedulesGrid,
+    {
+      onCallSchedules,
+      isLoading,
+      refetchOnCallSchedules
+    }
+  ));
+};
+
+const useServices = (paging) => {
+  const ilertApi = useApi(ilertApiRef);
+  const errorApi = useApi(errorApiRef);
+  const [tableState, setTableState] = React.useState({
+    page: 0,
+    pageSize: 10
+  });
+  const [servicesList, setServicesList] = React.useState([]);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const fetchServicesCall = async () => {
+    try {
+      setIsLoading(true);
+      const opts = {};
+      if (paging) {
+        opts.maxResults = tableState.pageSize;
+        opts.startIndex = tableState.page * tableState.pageSize;
+      }
+      const data = await ilertApi.fetchServices(opts);
+      setServicesList(data || []);
+      setIsLoading(false);
+    } catch (e) {
+      if (!(e instanceof AuthenticationError)) {
+        errorApi.post(e);
+      }
+      setIsLoading(false);
+      throw e;
+    }
+  };
+  const fetchServices = useAsyncRetry(fetchServicesCall, [tableState]);
+  const refetchServices = () => {
+    setTableState({ ...tableState, page: 0 });
+    Promise.all([fetchServicesCall()]);
+  };
+  const error = fetchServices.error;
+  const retry = () => {
+    fetchServices.retry();
+  };
+  const onChangePage = (page) => {
+    setTableState({ ...tableState, page });
+  };
+  const onChangeRowsPerPage = (p) => {
+    setTableState({ ...tableState, pageSize: p });
+  };
+  return [
+    {
+      tableState,
+      services: servicesList,
+      isLoading,
+      error
+    },
+    {
+      setTableState,
+      setServicesList,
+      setIsLoading,
+      retry,
+      refetchServices,
+      onChangePage,
+      onChangeRowsPerPage
+    }
+  ];
+};
+
+const OperationalChip$1 = withStyles((theme) => ({
+  root: {
+    backgroundColor: "#388E3D",
+    color: theme.palette.common.white,
+    margin: 0
+  }
+}))(Chip);
+const UnderMaintenanceChip$1 = withStyles((theme) => ({
+  root: {
+    backgroundColor: "#616161",
+    color: theme.palette.common.white,
+    margin: 0
+  }
+}))(Chip);
+const DegradedChip$1 = withStyles((theme) => ({
+  root: {
+    backgroundColor: "#FBC02D",
+    color: theme.palette.common.white,
+    margin: 0
+  }
+}))(Chip);
+const PartialOutageChip$1 = withStyles((theme) => ({
+  root: {
+    backgroundColor: "#F57C02",
+    color: theme.palette.common.white,
+    margin: 0
+  }
+}))(Chip);
+const MajorOutageChip$1 = withStyles((theme) => ({
+  root: {
+    backgroundColor: "#D22F2E",
+    color: theme.palette.common.white,
+    margin: 0
+  }
+}))(Chip);
+const serviceStatusLabels = {
+  [OPERATIONAL]: "Operational",
+  [UNDER_MAINTENANCE]: "Under maintenance",
+  [DEGRADED]: "Degraded",
+  [PARTIAL_OUTAGE]: "Partial outage",
+  [MAJOR_OUTAGE]: "Major outage"
+};
+const StatusChip$1 = ({ service }) => {
+  const label = `${serviceStatusLabels[service.status]}`;
+  switch (service.status) {
+    case OPERATIONAL:
+      return /* @__PURE__ */ React.createElement(OperationalChip$1, { label, size: "small" });
+    case UNDER_MAINTENANCE:
+      return /* @__PURE__ */ React.createElement(UnderMaintenanceChip$1, { label, size: "small" });
+    case DEGRADED:
+      return /* @__PURE__ */ React.createElement(DegradedChip$1, { label, size: "small" });
+    case PARTIAL_OUTAGE:
+      return /* @__PURE__ */ React.createElement(PartialOutageChip$1, { label, size: "small" });
+    case MAJOR_OUTAGE:
+      return /* @__PURE__ */ React.createElement(MajorOutageChip$1, { label, size: "small" });
+    default:
+      return /* @__PURE__ */ React.createElement(Chip, { label, size: "small" });
+  }
+};
+
+const ServiceActionsMenu = ({ service }) => {
+  const ilertApi = useApi(ilertApiRef);
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleCloseMenu = () => {
+    setAnchorEl(null);
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      "aria-label": "more",
+      "aria-controls": "long-menu",
+      "aria-haspopup": "true",
+      onClick: handleClick,
+      size: "small"
+    },
+    /* @__PURE__ */ React.createElement(MoreVertIcon, null)
+  ), /* @__PURE__ */ React.createElement(
+    Menu,
+    {
+      id: `service-actions-menu-${service.id}`,
+      anchorEl,
+      keepMounted: true,
+      open: Boolean(anchorEl),
+      onClose: handleCloseMenu,
+      PaperProps: {
+        style: { maxHeight: 48 * 5.5 }
+      }
+    },
+    /* @__PURE__ */ React.createElement(MenuItem, { key: "details", onClick: handleCloseMenu }, /* @__PURE__ */ React.createElement(Typography, { variant: "inherit", noWrap: true }, /* @__PURE__ */ React.createElement(Link, { to: ilertApi.getServiceDetailsURL(service) }, "View in iLert")))
+  ));
+};
+
+const ServiceLink = ({ service }) => {
+  const ilertApi = useApi(ilertApiRef);
+  if (!service) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Link, { to: ilertApi.getServiceDetailsURL(service) }, "#", service.id);
+};
+
+const useStyles$6 = makeStyles((theme) => ({
+  empty: {
+    padding: theme.spacing(2),
+    display: "flex",
+    justifyContent: "center"
+  }
+}));
+const ServicesTable = ({
+  services,
+  tableState,
+  isLoading,
+  onChangePage,
+  onChangeRowsPerPage,
+  compact
+}) => {
+  const classes = useStyles$6();
+  const smColumnStyle = {
+    width: "10%",
+    maxWidth: "10%"
+  };
+  const xlColumnStyle = {
+    width: "30%",
+    maxWidth: "30%"
+  };
+  const idColumn = {
+    title: "ID",
+    field: "id",
+    highlight: true,
+    cellStyle: smColumnStyle,
+    headerStyle: smColumnStyle,
+    render: (rowData) => /* @__PURE__ */ React.createElement(ServiceLink, { service: rowData })
+  };
+  const nameColumn = {
+    title: "Name",
+    field: "name",
+    cellStyle: !compact ? xlColumnStyle : void 0,
+    headerStyle: !compact ? xlColumnStyle : void 0,
+    render: (rowData) => /* @__PURE__ */ React.createElement(Typography, null, rowData.name)
+  };
+  const statusColumn = {
+    title: "Status",
+    field: "status",
+    cellStyle: smColumnStyle,
+    headerStyle: smColumnStyle,
+    render: (rowData) => /* @__PURE__ */ React.createElement(StatusChip$1, { service: rowData })
+  };
+  const uptimeColumn = {
+    title: "Uptime in the last 90 days",
+    field: "uptimePercentage",
+    cellStyle: smColumnStyle,
+    headerStyle: smColumnStyle,
+    render: (rowData) => {
+      var _a, _b;
+      return /* @__PURE__ */ React.createElement(Typography, null, ((_b = (_a = rowData.uptime) == null ? void 0 : _a.uptimePercentage) == null ? void 0 : _b.p90) || "");
+    }
+  };
+  const actionsColumn = {
+    title: "",
+    field: "",
+    cellStyle: smColumnStyle,
+    headerStyle: smColumnStyle,
+    render: (rowData) => /* @__PURE__ */ React.createElement(ServiceActionsMenu, { service: rowData })
+  };
+  const columns = compact ? [nameColumn, statusColumn, uptimeColumn, actionsColumn] : [idColumn, nameColumn, statusColumn, uptimeColumn, actionsColumn];
+  return /* @__PURE__ */ React.createElement(
+    Table,
+    {
+      options: {
+        sorting: false,
+        search: !compact,
+        paging: !compact,
+        actionsColumnIndex: -1,
+        pageSize: tableState.pageSize,
+        pageSizeOptions: !compact ? [10, 20, 50, 100] : [3, 10, 20, 50, 100],
+        padding: "dense",
+        loadingType: "overlay",
+        showEmptyDataSourceMessage: !isLoading,
+        showTitle: true,
+        toolbar: true
+      },
+      emptyContent: /* @__PURE__ */ React.createElement(Typography, { color: "textSecondary", className: classes.empty }, "No services"),
+      title: /* @__PURE__ */ React.createElement(Typography, { variant: "button", color: "textSecondary" }, "SERVICES"),
+      page: tableState.page,
+      onPageChange: onChangePage,
+      onRowsPerPageChange: onChangeRowsPerPage,
+      columns,
+      data: services,
+      isLoading
+    }
+  );
+};
+
+const ServicesPage = () => {
+  const [
+    { tableState, services, isLoading, error },
+    { onChangePage, onChangeRowsPerPage, setIsLoading }
+  ] = useServices(true);
+  if (error) {
+    if (error.name === "AuthenticationError") {
+      return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(MissingAuthorizationHeaderError, null));
+    }
+    return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ResponseErrorPanel, { error }));
+  }
+  return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: "Services" }, /* @__PURE__ */ React.createElement(SupportButton, null, "This helps you to bring iLert into your developer portal.")), /* @__PURE__ */ React.createElement(
+    ServicesTable,
+    {
+      services,
+      tableState,
+      onChangePage,
+      onChangeRowsPerPage,
+      isLoading,
+      setIsLoading
+    }
+  ));
+};
+
+const useStatusPages = (paging) => {
+  const ilertApi = useApi(ilertApiRef);
+  const errorApi = useApi(errorApiRef);
+  const [tableState, setTableState] = React.useState({
+    page: 0,
+    pageSize: 10
+  });
+  const [statusPagesList, setStatusPagesList] = React.useState(
+    []
+  );
+  const [isLoading, setIsLoading] = React.useState(false);
+  const fetchStatusPagesCall = async () => {
+    try {
+      setIsLoading(true);
+      const opts = {};
+      if (paging) {
+        opts.maxResults = tableState.pageSize;
+        opts.startIndex = tableState.page * tableState.pageSize;
+      }
+      const data = await ilertApi.fetchStatusPages(opts);
+      setStatusPagesList(data || []);
+      setIsLoading(false);
+    } catch (e) {
+      if (!(e instanceof AuthenticationError)) {
+        errorApi.post(e);
+      }
+      setIsLoading(false);
+      throw e;
+    }
+  };
+  const fetchStatusPages = useAsyncRetry(fetchStatusPagesCall, [tableState]);
+  const refetchStatusPages = () => {
+    setTableState({ ...tableState, page: 0 });
+    Promise.all([fetchStatusPagesCall()]);
+  };
+  const error = fetchStatusPages.error;
+  const retry = () => {
+    fetchStatusPages.retry();
+  };
+  const onChangePage = (page) => {
+    setTableState({ ...tableState, page });
+  };
+  const onChangeRowsPerPage = (p) => {
+    setTableState({ ...tableState, pageSize: p });
+  };
+  return [
+    {
+      tableState,
+      statusPages: statusPagesList,
+      isLoading,
+      error
+    },
+    {
+      setTableState,
+      setStatusPagesList,
+      setIsLoading,
+      retry,
+      refetchStatusPages,
+      onChangePage,
+      onChangeRowsPerPage
+    }
+  ];
+};
+
+const PrivateChip = withStyles((theme) => ({
+  root: {
+    backgroundColor: "#4caf50",
+    color: theme.palette.common.white,
+    margin: 0
+  }
+}))(Chip);
+const PublicChip = withStyles((theme) => ({
+  root: {
+    backgroundColor: "#ffb74d",
+    color: theme.palette.common.white,
+    margin: 0
+  }
+}))(Chip);
+const statusPageVisibilityLabels = {
+  [PUBLIC]: "Public",
+  [PRIVATE]: "Private"
+};
+const VisibilityChip = ({ statusPage }) => {
+  const label = `${statusPageVisibilityLabels[statusPage.visibility]}`;
+  switch (statusPage.visibility) {
+    case PRIVATE:
+      return /* @__PURE__ */ React.createElement(PrivateChip, { label, size: "small" });
+    case PUBLIC:
+      return /* @__PURE__ */ React.createElement(PublicChip, { label, size: "small" });
+    default:
+      return /* @__PURE__ */ React.createElement(Chip, { label, size: "small" });
+  }
+};
+
+const StatusPageActionsMenu = ({
+  statusPage
+}) => {
+  const ilertApi = useApi(ilertApiRef);
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleCloseMenu = () => {
+    setAnchorEl(null);
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      "aria-label": "more",
+      "aria-controls": "long-menu",
+      "aria-haspopup": "true",
+      onClick: handleClick,
+      size: "small"
+    },
+    /* @__PURE__ */ React.createElement(MoreVertIcon, null)
+  ), /* @__PURE__ */ React.createElement(
+    Menu,
+    {
+      id: `statusPage-actions-menu-${statusPage.id}`,
+      anchorEl,
+      keepMounted: true,
+      open: Boolean(anchorEl),
+      onClose: handleCloseMenu,
+      PaperProps: {
+        style: { maxHeight: 48 * 5.5 }
+      }
+    },
+    /* @__PURE__ */ React.createElement(MenuItem, { key: "details", onClick: handleCloseMenu }, /* @__PURE__ */ React.createElement(Typography, { variant: "inherit", noWrap: true }, /* @__PURE__ */ React.createElement(Link, { to: ilertApi.getStatusPageDetailsURL(statusPage) }, "View in iLert"))),
+    /* @__PURE__ */ React.createElement(MenuItem, null, /* @__PURE__ */ React.createElement(Typography, { variant: "inherit", noWrap: true }, /* @__PURE__ */ React.createElement(Link, { to: `https://${ilertApi.getStatusPageURL(statusPage)}` }, "View status page")))
+  ));
+};
+
+const StatusPageLink = ({
+  statusPage
+}) => {
+  const ilertApi = useApi(ilertApiRef);
+  if (!statusPage) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Link, { to: ilertApi.getStatusPageDetailsURL(statusPage) }, "#", statusPage.id);
+};
+
+const StatusPageURL = ({
+  statusPage
+}) => {
+  const ilertApi = useApi(ilertApiRef);
+  if (!statusPage) {
+    return null;
+  }
+  const url = ilertApi.getStatusPageURL(statusPage);
+  return /* @__PURE__ */ React.createElement(Link, { to: `https://${url}` }, url);
+};
+
+const OperationalChip = withStyles((theme) => ({
+  root: {
+    backgroundColor: "#388E3D",
+    color: theme.palette.common.white,
+    margin: 0
+  }
+}))(Chip);
+const UnderMaintenanceChip = withStyles((theme) => ({
+  root: {
+    backgroundColor: "#616161",
+    color: theme.palette.common.white,
+    margin: 0
+  }
+}))(Chip);
+const DegradedChip = withStyles((theme) => ({
+  root: {
+    backgroundColor: "#FBC02D",
+    color: theme.palette.common.white,
+    margin: 0
+  }
+}))(Chip);
+const PartialOutageChip = withStyles((theme) => ({
+  root: {
+    backgroundColor: "#F57C02",
+    color: theme.palette.common.white,
+    margin: 0
+  }
+}))(Chip);
+const MajorOutageChip = withStyles((theme) => ({
+  root: {
+    backgroundColor: "#D22F2E",
+    color: theme.palette.common.white,
+    margin: 0
+  }
+}))(Chip);
+const statusPageStatusLabels = {
+  [OPERATIONAL]: "Operational",
+  [UNDER_MAINTENANCE]: "Under maintenance",
+  [DEGRADED]: "Degraded",
+  [PARTIAL_OUTAGE]: "Partial outage",
+  [MAJOR_OUTAGE]: "Major outage"
+};
+const StatusChip = ({ statusPage }) => {
+  const label = `${statusPageStatusLabels[statusPage.status]}`;
+  switch (statusPage.status) {
+    case OPERATIONAL:
+      return /* @__PURE__ */ React.createElement(OperationalChip, { label, size: "small" });
+    case UNDER_MAINTENANCE:
+      return /* @__PURE__ */ React.createElement(UnderMaintenanceChip, { label, size: "small" });
+    case DEGRADED:
+      return /* @__PURE__ */ React.createElement(DegradedChip, { label, size: "small" });
+    case PARTIAL_OUTAGE:
+      return /* @__PURE__ */ React.createElement(PartialOutageChip, { label, size: "small" });
+    case MAJOR_OUTAGE:
+      return /* @__PURE__ */ React.createElement(MajorOutageChip, { label, size: "small" });
+    default:
+      return /* @__PURE__ */ React.createElement(Chip, { label, size: "small" });
+  }
+};
+
+const useStyles$5 = makeStyles((theme) => ({
+  empty: {
+    padding: theme.spacing(2),
+    display: "flex",
+    justifyContent: "center"
+  }
+}));
+const StatusPagesTable = ({
+  statusPages,
+  tableState,
+  isLoading,
+  onChangePage,
+  onChangeRowsPerPage,
+  compact
+}) => {
+  const classes = useStyles$5();
+  const smColumnStyle = {
+    width: "10%",
+    maxWidth: "10%"
+  };
+  const xlColumnStyle = {
+    width: "30%",
+    maxWidth: "30%"
+  };
+  const idColumn = {
+    title: "ID",
+    field: "id",
+    highlight: true,
+    cellStyle: smColumnStyle,
+    headerStyle: smColumnStyle,
+    render: (rowData) => /* @__PURE__ */ React.createElement(StatusPageLink, { statusPage: rowData })
+  };
+  const nameColumn = {
+    title: "Name",
+    field: "name",
+    cellStyle: !compact ? xlColumnStyle : void 0,
+    headerStyle: !compact ? xlColumnStyle : void 0,
+    render: (rowData) => /* @__PURE__ */ React.createElement(Typography, null, rowData.name)
+  };
+  const urlColumn = {
+    title: "URL",
+    field: "url",
+    cellStyle: smColumnStyle,
+    headerStyle: smColumnStyle,
+    render: (rowData) => /* @__PURE__ */ React.createElement(StatusPageURL, { statusPage: rowData })
+  };
+  const visibilityColumn = {
+    title: "Visibility",
+    field: "visibility",
+    cellStyle: smColumnStyle,
+    headerStyle: smColumnStyle,
+    render: (rowData) => /* @__PURE__ */ React.createElement(VisibilityChip, { statusPage: rowData })
+  };
+  const statusColumn = {
+    title: "Status",
+    field: "status",
+    cellStyle: smColumnStyle,
+    headerStyle: smColumnStyle,
+    render: (rowData) => /* @__PURE__ */ React.createElement(StatusChip, { statusPage: rowData })
+  };
+  const actionsColumn = {
+    title: "",
+    field: "",
+    cellStyle: smColumnStyle,
+    headerStyle: smColumnStyle,
+    render: (rowData) => /* @__PURE__ */ React.createElement(StatusPageActionsMenu, { statusPage: rowData })
+  };
+  const columns = compact ? [nameColumn, statusColumn, urlColumn, actionsColumn] : [
+    idColumn,
+    nameColumn,
+    statusColumn,
+    urlColumn,
+    visibilityColumn,
+    actionsColumn
+  ];
+  return /* @__PURE__ */ React.createElement(
+    Table,
+    {
+      options: {
+        sorting: false,
+        search: !compact,
+        paging: !compact,
+        actionsColumnIndex: -1,
+        pageSize: tableState.pageSize,
+        pageSizeOptions: !compact ? [10, 20, 50, 100] : [3, 10, 20, 50, 100],
+        padding: "dense",
+        loadingType: "overlay",
+        showEmptyDataSourceMessage: !isLoading,
+        showTitle: true,
+        toolbar: true
+      },
+      emptyContent: /* @__PURE__ */ React.createElement(Typography, { color: "textSecondary", className: classes.empty }, "No status pages"),
+      title: /* @__PURE__ */ React.createElement(Typography, { variant: "button", color: "textSecondary" }, "STATUS PAGES"),
+      page: tableState.page,
+      onPageChange: onChangePage,
+      onRowsPerPageChange: onChangeRowsPerPage,
+      columns,
+      data: statusPages,
+      isLoading
+    }
+  );
+};
+
+const StatusPagesPage = () => {
+  const [
+    { tableState, statusPages, isLoading, error },
+    { onChangePage, onChangeRowsPerPage, setIsLoading }
+  ] = useStatusPages(true);
+  if (error) {
+    if (error.name === "AuthenticationError") {
+      return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(MissingAuthorizationHeaderError, null));
+    }
+    return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ResponseErrorPanel, { error }));
+  }
+  return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: "Status pages" }, /* @__PURE__ */ React.createElement(SupportButton, null, "This helps you to bring iLert into your developer portal.")), /* @__PURE__ */ React.createElement(
+    StatusPagesTable,
+    {
+      statusPages,
+      tableState,
+      onChangePage,
+      onChangeRowsPerPage,
+      isLoading,
+      setIsLoading
+    }
+  ));
+};
+
+const ILertPage = () => {
+  const [selectedTab, setSelectedTab] = React.useState(0);
+  const tabs = [
+    { label: "Who is on call?" },
+    { label: "Alerts" },
+    { label: "Services" },
+    { label: "Status pages" }
+  ];
+  const renderTab = () => {
+    switch (selectedTab) {
+      case 0:
+        return /* @__PURE__ */ React.createElement(OnCallSchedulesPage, null);
+      case 1:
+        return /* @__PURE__ */ React.createElement(AlertsPage, null);
+      case 2:
+        return /* @__PURE__ */ React.createElement(ServicesPage, null);
+      case 3:
+        return /* @__PURE__ */ React.createElement(StatusPagesPage, null);
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "website" }, /* @__PURE__ */ React.createElement(Header, { title: "iLert", type: "tool" }, /* @__PURE__ */ React.createElement(HeaderLabel, { label: "Owner", value: "iLert" }), /* @__PURE__ */ React.createElement(HeaderLabel, { label: "Lifecycle", value: "Alpha" })), /* @__PURE__ */ React.createElement(
+    HeaderTabs,
+    {
+      selectedIndex: selectedTab,
+      onChange: (index) => setSelectedTab(index),
+      tabs: tabs.map(({ label }, index) => ({
+        id: index.toString(),
+        label
+      }))
+    }
+  ), /* @__PURE__ */ React.createElement(Content, { noPadding: true }, renderTab()));
+};
+
+const ILERT_INTEGRATION_KEY_ANNOTATION = "ilert.com/integration-key";
+
+function useILertEntity() {
+  var _a;
+  const { entity } = useEntity();
+  const integrationKey = ((_a = entity.metadata.annotations) == null ? void 0 : _a[ILERT_INTEGRATION_KEY_ANNOTATION]) || "";
+  const name = entity.metadata.name;
+  const identifier = `${entity.kind}:${entity.metadata.namespace || "default"}/${entity.metadata.name}`;
+  return { integrationKey, name, identifier };
+}
+
+const useAlertSource = (integrationKey) => {
+  const ilertApi = useApi(ilertApiRef);
+  const errorApi = useApi(errorApiRef);
+  const [alertSource, setAlertSource] = React.useState(
+    null
+  );
+  const [isAlertSourceLoading, setIsAlertSourceLoading] = React.useState(false);
+  const fetchAlertSourceCall = async () => {
+    try {
+      if (!integrationKey) {
+        return;
+      }
+      setIsAlertSourceLoading(true);
+      const data = await ilertApi.fetchAlertSource(integrationKey);
+      setAlertSource(data || null);
+      setIsAlertSourceLoading(false);
+    } catch (e) {
+      setIsAlertSourceLoading(false);
+      if (!(e instanceof AuthenticationError)) {
+        errorApi.post(e);
+      }
+      throw e;
+    }
+  };
+  const { error: alertSourceError, retry: alertSourceRetry } = useAsyncRetry(
+    fetchAlertSourceCall,
+    [integrationKey]
+  );
+  const retry = () => alertSourceRetry();
+  return [
+    {
+      alertSource,
+      error: alertSourceError,
+      isLoading: isAlertSourceLoading
+    },
+    {
+      retry,
+      setIsLoading: setIsAlertSourceLoading,
+      refetchAlertSource: fetchAlertSourceCall,
+      setAlertSource
+    }
+  ];
+};
+
+const ILertCardActionsHeader = ({
+  alertSource,
+  setAlertSource,
+  setIsNewAlertModalOpened,
+  setIsMaintenanceModalOpened
+}) => {
+  const ilertApi = useApi(ilertApiRef);
+  const alertApi = useApi(alertApiRef);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isDisableModalOpened, setIsDisableModalOpened] = React.useState(false);
+  const handleCreateNewAlert = () => {
+    setIsNewAlertModalOpened(true);
+  };
+  const handleEnableAlertSource = async () => {
+    try {
+      if (!alertSource) {
+        return;
+      }
+      setIsLoading(true);
+      const newAlertSource = await ilertApi.enableAlertSource(alertSource);
+      alertApi.post({ message: "Alert source enabled." });
+      setIsLoading(false);
+      setAlertSource(newAlertSource);
+    } catch (err) {
+      setIsLoading(false);
+      alertApi.post({ message: err, severity: "error" });
+    }
+  };
+  const handleDisableAlertSource = async () => {
+    try {
+      if (!alertSource) {
+        return;
+      }
+      setIsDisableModalOpened(false);
+      setIsLoading(true);
+      const newAlertSource = await ilertApi.disableAlertSource(alertSource);
+      alertApi.post({ message: "Alert source disabled." });
+      setIsLoading(false);
+      setAlertSource(newAlertSource);
+    } catch (err) {
+      setIsLoading(false);
+      alertApi.post({ message: err, severity: "error" });
+    }
+  };
+  const handleDisableAlertSourceWarningOpen = () => {
+    setIsDisableModalOpened(true);
+  };
+  const handleDisableAlertSourceWarningClose = () => {
+    setIsDisableModalOpened(false);
+  };
+  const handleMaintenanceAlertSource = () => {
+    setIsMaintenanceModalOpened(true);
+  };
+  const alertSourceLink = {
+    label: "Alert Source",
+    href: ilertApi.getAlertSourceDetailsURL(alertSource),
+    icon: /* @__PURE__ */ React.createElement(WebIcon, null)
+  };
+  const createAlertLink = {
+    label: "Create Alert",
+    onClick: handleCreateNewAlert,
+    icon: /* @__PURE__ */ React.createElement(AlarmAddIcon, null),
+    color: "secondary",
+    disabled: !alertSource || alertSource.status === "DISABLED" || alertSource.status === "IN_MAINTENANCE"
+  };
+  const enableAlertSourceLink = {
+    label: "Enable",
+    onClick: handleEnableAlertSource,
+    icon: /* @__PURE__ */ React.createElement(PlayArrowIcon, null),
+    disabled: !alertSource || isLoading
+  };
+  const disableAlertSourceLink = {
+    label: "Disable",
+    onClick: handleDisableAlertSourceWarningOpen,
+    icon: /* @__PURE__ */ React.createElement(PauseIcon, null),
+    disabled: !alertSource || isLoading
+  };
+  const maintenanceAlertSourceLink = {
+    label: "Immediate maintenance",
+    onClick: handleMaintenanceAlertSource,
+    icon: /* @__PURE__ */ React.createElement(BuildIcon, null),
+    disabled: !alertSource || isLoading
+  };
+  const links = [
+    alertSourceLink,
+    createAlertLink,
+    alertSource && alertSource.active ? disableAlertSourceLink : enableAlertSourceLink
+  ];
+  if (alertSource && alertSource.status !== "IN_MAINTENANCE") {
+    links.push(maintenanceAlertSourceLink);
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(HeaderIconLinkRow, { links }), /* @__PURE__ */ React.createElement(
+    Dialog,
+    {
+      open: isDisableModalOpened,
+      onClose: handleDisableAlertSourceWarningClose,
+      "aria-labelledby": "alert-source-disable-form-title"
+    },
+    /* @__PURE__ */ React.createElement(DialogTitle, { id: "alert-source-disable-form-title" }, "Disable alert source"),
+    /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(Alert, { severity: "info" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", align: "justify" }, "Do you really want to disable this alert source? A disabled alert source cannot create new alerts."))),
+    /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        onClick: handleDisableAlertSource,
+        color: "secondary",
+        variant: "contained"
+      },
+      "Disable"
+    ), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        onClick: handleDisableAlertSourceWarningClose,
+        color: "primary"
+      },
+      "Cancel"
+    ))
+  ));
+};
+
+const ENTITY_YAML = `apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: example
+  description: example.com
+  annotations:
+    ilert.com/integration-key: [INTEGRATION_KEY]
+spec:
+  type: website
+  lifecycle: production
+  owner: guest`;
+const useStyles$4 = makeStyles((theme) => ({
+  code: {
+    borderRadius: 6,
+    margin: theme.spacing(2, 0),
+    background: theme.palette.type === "dark" ? "#444" : theme.palette.common.white
+  },
+  header: {
+    display: "inline-block",
+    padding: theme.spacing(2, 2, 2, 2.5)
+  }
+}));
+const ILertCardEmptyState = () => {
+  const classes = useStyles$4();
+  return /* @__PURE__ */ React.createElement(Card, { "data-testid": "ilert-empty-card" }, /* @__PURE__ */ React.createElement(CardHeader, { title: "iLert", className: classes.header }), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, "No integration key defined for this entity. You can add integration key to your entity YAML as shown in the highlighted example below:"), /* @__PURE__ */ React.createElement("div", { className: classes.code }, /* @__PURE__ */ React.createElement(
+    CodeSnippet,
+    {
+      text: ENTITY_YAML,
+      language: "yaml",
+      showLineNumbers: true,
+      highlightedNumbers: [6, 7],
+      customStyle: { background: "inherit", fontSize: "115%" }
+    }
+  )), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "contained",
+      color: "primary",
+      target: "_blank",
+      href: "https://github.com/backstage/backstage/blob/master/plugins/ilert/README.md"
+    },
+    "Read more"
+  )));
+};
+
+const MaintenanceChip = withStyles((theme) => ({
+  root: {
+    backgroundColor: "#92949c",
+    color: theme.palette.common.white,
+    marginTop: 8
+  }
+}))(Chip);
+const ILertCardHeaderStatus = ({
+  alertSource
+}) => {
+  if (!alertSource) {
+    return null;
+  }
+  switch (alertSource.status) {
+    case "IN_MAINTENANCE":
+      return /* @__PURE__ */ React.createElement(MaintenanceChip, { label: "MAINTENANCE", size: "small" });
+    case "DISABLED":
+      return /* @__PURE__ */ React.createElement(MaintenanceChip, { label: "INACTIVE", size: "small" });
+    default:
+      return null;
+  }
+};
+
+const ILertCardMaintenanceModal = ({
+  alertSource,
+  refetchAlertSource,
+  isModalOpened,
+  setIsModalOpened
+}) => {
+  const ilertApi = useApi(ilertApiRef);
+  const alertApi = useApi(alertApiRef);
+  const [minutes, setMinutes] = React.useState(5);
+  const handleClose = () => {
+    setIsModalOpened(false);
+  };
+  const handleImmediateMaintenance = () => {
+    if (!alertSource) {
+      return;
+    }
+    setIsModalOpened(false);
+    setTimeout(async () => {
+      try {
+        await ilertApi.addImmediateMaintenance(alertSource.id, minutes);
+        alertApi.post({ message: "Maintenance started." });
+        refetchAlertSource();
+      } catch (err) {
+        alertApi.post({ message: err, severity: "error" });
+      }
+    }, 250);
+  };
+  const handleMinutesChange = (event) => {
+    setMinutes(event.target.value);
+  };
+  const minuteOptions = [
+    {
+      value: 5,
+      label: "5 minutes"
+    },
+    {
+      value: 10,
+      label: "10 minutes"
+    },
+    {
+      value: 15,
+      label: "15 minutes"
+    },
+    {
+      value: 30,
+      label: "30 minutes"
+    },
+    {
+      value: 60,
+      label: "60 minutes"
+    }
+  ];
+  if (!alertSource) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(
+    Dialog,
+    {
+      open: isModalOpened,
+      onClose: handleClose,
+      "aria-labelledby": "maintenance-form-title"
+    },
+    /* @__PURE__ */ React.createElement(DialogTitle, { id: "maintenance-form-title" }, "New maintenance window"),
+    /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(DialogContentText, null, "Keep your alert sources quiet, when your systems are under maintenance."), /* @__PURE__ */ React.createElement(
+      TextField,
+      {
+        select: true,
+        label: "Duration",
+        value: minutes,
+        onChange: handleMinutesChange,
+        variant: "outlined",
+        fullWidth: true
+      },
+      minuteOptions.map((option) => /* @__PURE__ */ React.createElement(MenuItem, { key: option.value, value: option.value }, option.label))
+    )),
+    /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        onClick: handleImmediateMaintenance,
+        color: "primary",
+        variant: "contained"
+      },
+      "Create"
+    ), /* @__PURE__ */ React.createElement(Button, { onClick: handleClose, color: "primary" }, "Cancel"))
+  );
+};
+
+const useAlertSourceOnCalls = (alertSource) => {
+  const ilertApi = useApi(ilertApiRef);
+  const errorApi = useApi(errorApiRef);
+  const [onCallsList, setOnCallsList] = React.useState([]);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const fetchAlertSourceOnCallsCall = async () => {
+    try {
+      if (!alertSource) {
+        return;
+      }
+      setIsLoading(true);
+      const data = await ilertApi.fetchAlertSourceOnCalls(alertSource);
+      setOnCallsList(data || []);
+      setIsLoading(false);
+    } catch (e) {
+      setIsLoading(false);
+      if (!(e instanceof AuthenticationError)) {
+        errorApi.post(e);
+      }
+      throw e;
+    }
+  };
+  const { error, retry } = useAsyncRetry(fetchAlertSourceOnCallsCall, [
+    alertSource
+  ]);
+  return [
+    {
+      onCalls: onCallsList,
+      error,
+      isLoading
+    },
+    {
+      retry,
+      setIsLoading,
+      refetchAlertSourceOnCalls: fetchAlertSourceOnCallsCall
+    }
+  ];
+};
+
+const useStyles$3 = makeStyles({
+  text: {
+    fontStyle: "italic"
+  }
+});
+const ILertCardOnCallEmptyState = () => {
+  const classes = useStyles$3();
+  return /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(ListItemText, null, /* @__PURE__ */ React.createElement(
+    Typography,
+    {
+      variant: "subtitle1",
+      color: "textSecondary",
+      className: classes.text
+    },
+    "Nobody"
+  )));
+};
+
+const useStyles$2 = makeStyles({
+  listItemPrimary: {
+    fontWeight: "bold"
+  },
+  fistItemLine: {
+    position: "absolute",
+    bottom: 0,
+    height: "50%",
+    left: 36
+  },
+  lastItemLine: {
+    position: "absolute",
+    top: 0,
+    height: "50%",
+    left: 36
+  },
+  itemLine: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    height: "100%",
+    left: 36
+  }
+});
+const ILertCardOnCallItem = ({
+  onCall,
+  fistItem = false,
+  lastItem = false
+}) => {
+  const ilertApi = useApi(ilertApiRef);
+  const classes = useStyles$2();
+  if (!onCall || !onCall.user) {
+    return null;
+  }
+  const phoneNumber = ilertApi.getUserPhoneNumber(onCall.user);
+  const escalationRepeating = onCall.escalationPolicy.repeating;
+  const escalationSeconds = onCall.escalationPolicy.escalationRules[onCall.escalationLevel - 1].escalationTimeout;
+  const escalationHoursOnly = Math.floor(escalationSeconds / 60);
+  const escalationMinutesOnly = escalationSeconds % 60;
+  let escalationText = "";
+  if (!lastItem || lastItem && escalationRepeating) {
+    escalationText = "escalate";
+    if (escalationSeconds === 0) {
+      escalationText += " immediately";
+    } else {
+      escalationText += " after";
+      if (escalationHoursOnly > 0) {
+        escalationText += ` ${escalationHoursOnly} ${escalationHoursOnly === 1 ? "hour" : "hours"}`;
+      }
+      if (escalationMinutesOnly > 0 || escalationSeconds === 0) {
+        escalationText += ` ${escalationMinutesOnly} ${escalationMinutesOnly === 1 ? "minute" : "minutes"}`;
+      }
+    }
+  }
+  return /* @__PURE__ */ React.createElement(ListItem, null, fistItem ? /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical", className: classes.fistItemLine }) : null, lastItem ? /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical", className: classes.lastItemLine }) : null, !fistItem && !lastItem ? /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical", className: classes.itemLine }) : null, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      title: `Escalation level #${onCall.escalationLevel}`,
+      placement: "top"
+    },
+    /* @__PURE__ */ React.createElement(Avatar, null, onCall.escalationLevel)
+  )), onCall.schedule ? /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      title: `On call shift ${DateTime.fromISO(onCall.start).toFormat("D MMM, HH:mm")} - ${DateTime.fromISO(onCall.end).toFormat("D MMM, HH:mm")}`,
+      placement: "top-start"
+    },
+    /* @__PURE__ */ React.createElement(
+      ListItemText,
+      {
+        primary: /* @__PURE__ */ React.createElement(Typography, { className: classes.listItemPrimary }, ilertApi.getUserInitials(onCall.user)),
+        secondary: escalationText
+      }
+    )
+  ) : /* @__PURE__ */ React.createElement(
+    ListItemText,
+    {
+      primary: /* @__PURE__ */ React.createElement(Typography, { className: classes.listItemPrimary }, ilertApi.getUserInitials(onCall.user)),
+      secondary: escalationText
+    }
+  ), /* @__PURE__ */ React.createElement(ListItemSecondaryAction, null, phoneNumber ? /* @__PURE__ */ React.createElement(Tooltip, { title: "Call to user", placement: "top" }, /* @__PURE__ */ React.createElement(IconButton, { href: `tel:${phoneNumber}` }, /* @__PURE__ */ React.createElement(PhoneIcon, { color: "secondary" }))) : null, /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      title: `Send e-mail to user ${onCall.user.email}`,
+      placement: "top"
+    },
+    /* @__PURE__ */ React.createElement(IconButton, { href: `mailto:${onCall.user.email}` }, /* @__PURE__ */ React.createElement(EmailIcon, { color: "primary" }))
+  )));
+};
+
+const useStyles$1 = makeStyles((theme) => ({
+  repeatText: {
+    fontStyle: "italic"
+  },
+  repeatIcon: {
+    marginLeft: theme.spacing(1)
+  }
+}));
+const ILertCardOnCall = ({
+  alertSource
+}) => {
+  const classes = useStyles$1();
+  const [{ onCalls, isLoading }, {}] = useAlertSourceOnCalls(alertSource);
+  if (isLoading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  if (!alertSource || !onCalls) {
+    return null;
+  }
+  const repeatInfo = () => {
+    if (!alertSource || !alertSource.escalationPolicy || !alertSource.escalationPolicy.repeating || !alertSource.escalationPolicy.frequency) {
+      return null;
+    }
+    return /* @__PURE__ */ React.createElement(ListItem, { key: "repeat" }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(ReplayIcon, { className: classes.repeatIcon, fontSize: "small" })), /* @__PURE__ */ React.createElement(
+      ListItemText,
+      {
+        primary: /* @__PURE__ */ React.createElement(
+          Typography,
+          {
+            variant: "body2",
+            color: "textSecondary",
+            className: classes.repeatText
+          },
+          `Repeat ${alertSource.escalationPolicy.frequency} times`
+        )
+      }
+    ));
+  };
+  if (!onCalls.length) {
+    return /* @__PURE__ */ React.createElement(List, { dense: true, subheader: /* @__PURE__ */ React.createElement(ListSubheader, null, "ON CALL") }, /* @__PURE__ */ React.createElement(ILertCardOnCallEmptyState, null));
+  }
+  if (onCalls.length === 1) {
+    /* @__PURE__ */ React.createElement(List, { dense: true, subheader: /* @__PURE__ */ React.createElement(ListSubheader, null, "ON CALL") }, /* @__PURE__ */ React.createElement(
+      ILertCardOnCallItem,
+      {
+        onCall: onCalls[0],
+        fistItem: false,
+        lastItem: false
+      }
+    ));
+  }
+  return /* @__PURE__ */ React.createElement(List, { dense: true, subheader: /* @__PURE__ */ React.createElement(ListSubheader, null, "ON CALL") }, onCalls.map((onCall, index) => /* @__PURE__ */ React.createElement(
+    ILertCardOnCallItem,
+    {
+      key: index,
+      onCall,
+      fistItem: index === 0,
+      lastItem: index === onCalls.length - 1
+    }
+  )), repeatInfo());
+};
+
+const isPluginApplicableToEntity = (entity) => {
+  var _a;
+  return Boolean((_a = entity.metadata.annotations) == null ? void 0 : _a[ILERT_INTEGRATION_KEY_ANNOTATION]);
+};
+const useStyles = makeStyles({
+  content: {
+    paddingLeft: "0 !important",
+    paddingRight: "0 !important",
+    paddingBottom: "0 !important",
+    paddingTop: "0 !important",
+    "& div div": {
+      boxShadow: "none !important"
+    }
+  }
+});
+const ILertCard = () => {
+  const classes = useStyles();
+  const { integrationKey, name } = useILertEntity();
+  const [{ alertSource }, { setAlertSource, refetchAlertSource }] = useAlertSource(integrationKey);
+  const [
+    { tableState, states, alerts, alertsCount, isLoading, error },
+    {
+      onAlertStatesChange,
+      onChangePage,
+      onChangeRowsPerPage,
+      onAlertChanged,
+      refetchAlerts,
+      setIsLoading
+    }
+  ] = useAlerts(false, true, alertSource);
+  const [isNewAlertModalOpened, setIsNewAlertModalOpened] = React.useState(false);
+  const [isMaintenanceModalOpened, setIsMaintenanceModalOpened] = React.useState(false);
+  if (error) {
+    if (error instanceof AuthenticationError) {
+      return /* @__PURE__ */ React.createElement(MissingAuthorizationHeaderError, null);
+    }
+    return /* @__PURE__ */ React.createElement(ResponseErrorPanel, { error });
+  }
+  if (!integrationKey) {
+    return /* @__PURE__ */ React.createElement(ILertCardEmptyState, null);
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Card, { "data-testid": "ilert-card" }, /* @__PURE__ */ React.createElement(
+    CardHeader,
+    {
+      title: "iLert",
+      subheader: /* @__PURE__ */ React.createElement(
+        ILertCardActionsHeader,
+        {
+          alertSource,
+          setAlertSource,
+          setIsNewAlertModalOpened,
+          setIsMaintenanceModalOpened
+        }
+      ),
+      action: /* @__PURE__ */ React.createElement(ILertCardHeaderStatus, { alertSource })
+    }
+  ), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(CardContent, { className: classes.content }, /* @__PURE__ */ React.createElement(ILertCardOnCall, { alertSource }), /* @__PURE__ */ React.createElement(
+    AlertsTable,
+    {
+      alerts,
+      alertsCount,
+      tableState,
+      states,
+      onAlertChanged,
+      onAlertStatesChange,
+      onChangePage,
+      onChangeRowsPerPage,
+      isLoading,
+      setIsLoading,
+      compact: true
+    }
+  ))), /* @__PURE__ */ React.createElement(
+    AlertNewModal,
+    {
+      isModalOpened: isNewAlertModalOpened,
+      setIsModalOpened: setIsNewAlertModalOpened,
+      refetchAlerts,
+      initialAlertSource: alertSource,
+      entityName: name
+    }
+  ), /* @__PURE__ */ React.createElement(
+    ILertCardMaintenanceModal,
+    {
+      alertSource,
+      refetchAlertSource,
+      isModalOpened: isMaintenanceModalOpened,
+      setIsModalOpened: setIsMaintenanceModalOpened
+    }
+  ));
+};
+
+const ILertIcon = () => /* @__PURE__ */ React.createElement(SvgIcon, null, /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    stroke: "none",
+    fillRule: "nonzero",
+    fill: "#fff",
+    fillOpacity: "1",
+    d: "M 0 9.277344 L 0 18.574219 C 0 20.832031 1.847656 22.679688 4.105469 22.679688 L 12.582031 22.679688 C 6.21875 21.007812 1.277344 15.792969 0 9.277344 Z M 0 9.277344"
+  }
+), /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    stroke: "none",
+    fillRule: "nonzero",
+    fill: "#fff",
+    fillOpacity: "1",
+    d: "M 19.527344 22.5625 C 21.328125 22.128906 22.679688 20.503906 22.679688 18.574219 L 22.679688 16.273438 C 21.691406 16.820312 20.632812 17.222656 19.527344 17.46875 Z M 19.527344 22.5625"
+  }
+), /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    stroke: "none",
+    fillRule: "nonzero",
+    fill: "#fff",
+    fillOpacity: "1",
+    d: "M 14.417969 17.46875 C 9.136719 16.296875 5.171875 11.578125 5.171875 5.945312 C 5.167969 3.855469 5.726562 1.804688 6.785156 0 L 4.105469 0 C 1.847656 0 0 1.847656 0 4.105469 L 0 6.882812 C 0.433594 14.816406 6.335938 21.316406 13.992188 22.679688 L 14.421875 22.679688 Z M 14.417969 17.46875"
+  }
+), /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    stroke: "none",
+    fillRule: "nonzero",
+    fill: "#fff",
+    fillOpacity: "1",
+    d: "M 19.527344 12.375 L 19.527344 17.160156 C 20.632812 16.910156 21.695312 16.496094 22.679688 15.929688 L 22.679688 9.855469 C 21.902344 10.988281 20.804688 11.863281 19.527344 12.375 Z M 19.527344 12.375"
+  }
+), /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    stroke: "none",
+    fillRule: "nonzero",
+    fill: "#fff",
+    fillOpacity: "1",
+    d: "M 14.417969 17.160156 L 14.417969 12.375 C 11.863281 11.355469 10.054688 8.859375 10.054688 5.945312 C 10.054688 3.503906 11.34375 1.246094 13.441406 0 L 7.128906 0 C 6.039062 1.792969 5.464844 3.847656 5.46875 5.945312 C 5.46875 11.410156 9.300781 15.996094 14.417969 17.160156 Z M 14.417969 17.160156"
+  }
+), /* @__PURE__ */ React.createElement(
+  "path",
+  {
+    stroke: "none",
+    fillRule: "nonzero",
+    fill: "#fff",
+    fillOpacity: "1",
+    d: "M 10.355469 5.945312 C 10.355469 8.613281 11.957031 11.019531 14.417969 12.050781 L 14.417969 9.917969 C 15.972656 10.925781 17.972656 10.925781 19.527344 9.917969 L 19.527344 12.050781 C 20.847656 11.496094 21.953125 10.53125 22.679688 9.300781 L 22.679688 4.105469 C 22.679688 1.847656 20.832031 0 18.574219 0 L 14.066406 0 C 11.796875 1.113281 10.355469 3.417969 10.355469 5.945312 Z M 16.972656 2.5625 C 18.84375 2.5625 20.355469 4.078125 20.355469 5.945312 C 20.355469 7.8125 18.84375 9.328125 16.972656 9.328125 C 15.105469 9.328125 13.589844 7.8125 13.589844 5.945312 C 13.59375 4.078125 15.105469 2.566406 16.972656 2.5625 Z M 16.972656 2.5625"
+  }
+)));
+
+export { ACCEPTED, DEGRADED, EntityILertCard, ILertCard, ILertClient, ILertIcon, ILertPage$1 as ILertPage, MAJOR_OUTAGE, OPERATIONAL, PARTIAL_OUTAGE, PENDING, PRIVATE, PUBLIC, RESOLVED, ILertPage as Router, UNDER_MAINTENANCE, iLertRouteRef, ilertApiRef, ilertPlugin, isPluginApplicableToEntity as isILertAvailable, isPluginApplicableToEntity, ilertPlugin as plugin };
+//# sourceMappingURL=index.esm.js.map