diff --git a/plugins/splunk-on-call/src/components/Escalation/EscalationPolicy.tsx b/plugins/splunk-on-call/src/components/Escalation/EscalationPolicy.tsx
new file mode 100644
index 0000000000..2ebc95aa7c
--- /dev/null
+++ b/plugins/splunk-on-call/src/components/Escalation/EscalationPolicy.tsx
@@ -0,0 +1,75 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { List, ListSubheader } from '@material-ui/core';
+import { EscalationUsersEmptyState } from './EscalationUsersEmptyState';
+import { EscalationUser } from './EscalationUser';
+import { useAsync } from 'react-use';
+import { splunkOnCallApiRef } from '../../api';
+import { useApi, Progress } from '@backstage/core';
+import { Alert } from '@material-ui/lab';
+import { User } from '../types';
+
+type Props = {
+ users: { [key: string]: User };
+};
+
+export const EscalationPolicy = ({ users }: Props) => {
+ const api = useApi(splunkOnCallApiRef);
+
+ const { value: userNames, loading, error } = useAsync(async () => {
+ const oncalls = await api.getOnCallUsers();
+ const users = oncalls.flatMap(oncall => {
+ return oncall.oncallNow?.flatMap(oncallNow => {
+ return oncallNow.users?.flatMap(user => {
+ return user?.onCalluser?.username;
+ });
+ });
+ });
+
+ return users;
+ });
+
+ if (error) {
+ return (
+
+ Error encountered while fetching information. {error.message}
+
+ );
+ }
+
+ if (loading) {
+ return ;
+ }
+
+ if (!userNames?.length) {
+ return ;
+ }
+
+ return (
+ ON CALL}>
+ {userNames &&
+ userNames.map(
+ (userName, index) =>
+ userName &&
+ userName in users && (
+
+ ),
+ )}
+
+ );
+};
diff --git a/plugins/splunk-on-call/src/components/Escalation/EscalationUser.tsx b/plugins/splunk-on-call/src/components/Escalation/EscalationUser.tsx
new file mode 100644
index 0000000000..7bc3069e4e
--- /dev/null
+++ b/plugins/splunk-on-call/src/components/Escalation/EscalationUser.tsx
@@ -0,0 +1,80 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import {
+ ListItem,
+ ListItemIcon,
+ ListItemSecondaryAction,
+ Tooltip,
+ ListItemText,
+ makeStyles,
+ IconButton,
+ Typography,
+} from '@material-ui/core';
+import Avatar from '@material-ui/core/Avatar';
+import EmailIcon from '@material-ui/icons/Email';
+import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
+import { User } from '../types';
+
+const useStyles = makeStyles({
+ listItemPrimary: {
+ fontWeight: 'bold',
+ },
+});
+
+type Props = {
+ user: User;
+};
+
+export const EscalationUser = ({ user }: Props) => {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+
+ {user.firstName} {user.lastName}
+
+ }
+ secondary={user.email}
+ />
+
+
+
+
+
+
+ {/* {user._selfUrl && (
+
+
+
+
+
+ )} */}
+
+
+ );
+};
diff --git a/plugins/splunk-on-call/src/components/Escalation/EscalationUsersEmptyState.tsx b/plugins/splunk-on-call/src/components/Escalation/EscalationUsersEmptyState.tsx
new file mode 100644
index 0000000000..d587011601
--- /dev/null
+++ b/plugins/splunk-on-call/src/components/Escalation/EscalationUsersEmptyState.tsx
@@ -0,0 +1,48 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import {
+ ListItem,
+ ListItemIcon,
+ ListItemText,
+ makeStyles,
+} from '@material-ui/core';
+import { StatusWarning } from '@backstage/core';
+
+const useStyles = makeStyles({
+ denseListIcon: {
+ marginRight: 0,
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+});
+
+export const EscalationUsersEmptyState = () => {
+ const classes = useStyles();
+ return (
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/plugins/splunk-on-call/src/components/Escalation/index.ts b/plugins/splunk-on-call/src/components/Escalation/index.ts
new file mode 100644
index 0000000000..ac2db62cd9
--- /dev/null
+++ b/plugins/splunk-on-call/src/components/Escalation/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { EscalationPolicy } from './EscalationPolicy';