@backstage-community/plugin-ilert 0.3.0 → 0.3.1

package/dist/index.esm.js

@@ -1,3347 +1,8 @@
-import { createApiRef, createRouteRef, createPlugin, createApiFactory, discoveryApiRef, configApiRef, fetchApiRef, createRoutableExtension, createComponentExtension, useApi, errorApiRef, alertApiRef, identityApiRef } 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, "fetchApi");
-    __publicField(this, "proxyPath");
-    __publicField(this, "baseUrl");
-    this.discoveryApi = opts.discoveryApi;
-    this.fetchApi = opts.fetchApi;
-    this.baseUrl = opts.baseUrl;
-    this.proxyPath = opts.proxyPath;
-  }
-  static fromConfig(configApi, discoveryApi, fetchApi) {
-    var _a, _b;
-    const baseUrl = (_a = configApi.getOptionalString("ilert.baseUrl")) != null ? _a : "https://app.ilert.com";
-    return new ILertClient({
-      discoveryApi,
-      fetchApi,
-      baseUrl,
-      proxyPath: (_b = configApi.getOptionalString("ilert.proxyPath")) != null ? _b : DEFAULT_PROXY_PATH
-    });
-  }
-  async fetch(input, init) {
-    const apiUrl = await this.apiUrl();
-    const response = await this.fetchApi.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,
-        configApi: configApiRef,
-        fetchApi: fetchApiRef
-      },
-      factory: ({ discoveryApi, configApi, fetchApi }) => ILertClient.fromConfig(configApi, discoveryApi, fetchApi)
-    })
-  ],
-  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 };
+export { EntityILertCard, ILertPage, ilertPlugin, ilertPlugin as plugin } from './plugin.esm.js';
+export { ILertPage as Router } from './components/ILertPage/ILertPage.esm.js';
+export { ILertCard, isPluginApplicableToEntity as isILertAvailable, isPluginApplicableToEntity } from './components/ILertCard/ILertCard.esm.js';
+export { ILertIcon } from './ILertIcon.esm.js';
+export { ILertClient, ilertApiRef } from './api/client.esm.js';
+export { iLertRouteRef } from './route-refs.esm.js';
+export { ACCEPTED, DEGRADED, MAJOR_OUTAGE, OPERATIONAL, PARTIAL_OUTAGE, PENDING, PRIVATE, PUBLIC, RESOLVED, UNDER_MAINTENANCE } from './types.esm.js';
 //# sourceMappingURL=index.esm.js.map