fix(pagerduty): requested changes

.github/styles/vocab.txt

@@ -46,7 +46,6 @@ configmaps
 configs
 const
 cookiecutter
-cors
 css
 dariddler
 dataflow

plugins/splunk-on-call/README.md

@@ -75,15 +75,7 @@ proxy:
         $env: SPLUNK_ON_CALL_API_KEY
 ```
 
-In addition, to make certain API calls (trigger-resolve-acknowledge an incident) you need to add the `PATCH` method to the backend cors methods list.
-
-```yaml
-# app-config.yaml
-backend:
-  # ...
-  cors:
-    methods: [GET, POST, PUT, DELETE, PATCH]
-```
+In addition, to make certain API calls (trigger-resolve-acknowledge an incident) you need to add the `PATCH` method to the backend `cors` methods list: `[GET, POST, PUT, DELETE, PATCH]`.
 
 ### Adding your team name to the entity annotation
 
@@ -92,7 +84,7 @@ If you want to use this plugin for an entity, you need to label it with the belo
 
 ```yaml
 annotations:
-  splunk-on-call.com/team: <SPLUNK_ON_CALL_TEAM_NAME>
+  splunk.com/on-call-team': <SPLUNK_ON_CALL_TEAM_NAME>
 ```
 
 ## Providing the API key and API id

plugins/splunk-on-call/dev/index.tsx

@@ -13,7 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
-import { plugin } from '../src/plugin';
+import { splunkOnCallPlugin, SplunkOnCallPage } from '../src/plugin';
 
-createDevApp().registerPlugin(plugin).render();
+createDevApp()
+  .registerPlugin(splunkOnCallPlugin)
+  .addPage({
+    title: 'Splunk On-Call',
+    element: <SplunkOnCallPage />,
+  })
+  .render();

plugins/splunk-on-call/src/components/SplunkOnCallCard.test.tsx

@@ -71,7 +71,7 @@ const entity: Entity = {
   metadata: {
     name: 'splunkoncall-test',
     annotations: {
-      'splunk-on-call.com/team': 'Example',
+      'splunk.com/on-call-team': 'Example',
     },
   },
 };

plugins/splunk-on-call/src/components/SplunkOnCallCard.tsx

@@ -58,7 +58,7 @@ const useStyles = makeStyles({
   },
 });
 
-export const SPLUNK_ON_CALL_TEAM = 'splunk-on-call.com/team';
+export const SPLUNK_ON_CALL_TEAM = 'splunk.com/on-call-team';
 
 export const MissingTeamAnnotation = () => (
   <MissingAnnotationEmptyState annotation={SPLUNK_ON_CALL_TEAM} />

plugins/splunk-on-call/src/components/SplunkOnCallPage.tsx

@@ -0,0 +1,72 @@
+/*
+ * 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 { Grid, makeStyles } from '@material-ui/core';
+import {
+  Content,
+  ContentHeader,
+  Page,
+  Header,
+  SupportButton,
+} from '@backstage/core';
+import { SplunkOnCallCard } from './SplunkOnCallCard';
+import { useEntity } from '@backstage/plugin-catalog-react';
+
+const useStyles = makeStyles(() => ({
+  overflowXScroll: {
+    overflowX: 'scroll',
+  },
+}));
+
+export type SplunkOnCallPageProps = {
+  title?: string;
+  subtitle?: string;
+  pageTitle?: string;
+};
+
+export const SplunkOnCallPage = ({
+  title,
+  subtitle,
+  pageTitle,
+}: SplunkOnCallPageProps): JSX.Element => {
+  const classes = useStyles();
+  const { entity } = useEntity();
+
+  return (
+    <Page themeId="tool">
+      <Header title={title} subtitle={subtitle} />
+      <Content className={classes.overflowXScroll}>
+        <ContentHeader title={pageTitle}>
+          <SupportButton>
+            This is used to help you automate incident management.
+          </SupportButton>
+        </ContentHeader>
+        <Grid container spacing={3} direction="row">
+          <Grid item xs={12} sm={6} md={4}>
+            <SplunkOnCallCard entity={entity} />
+          </Grid>
+        </Grid>
+      </Content>
+    </Page>
+  );
+};
+
+SplunkOnCallPage.defaultProps = {
+  title: 'Splunk On-Call',
+  subtitle: 'Automate incident management',
+  pageTitle: 'Dashboard',
+};

plugins/splunk-on-call/src/index.ts

@@ -13,7 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { plugin } from './plugin';
+export {
+  splunkOnCallPlugin,
+  splunkOnCallPlugin as plugin,
+  SplunkOnCallPage,
+} from './plugin';
 export {
   isPluginApplicableToEntity,
   SplunkOnCallCard,

plugins/splunk-on-call/src/plugin.test.ts

@@ -13,10 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { plugin } from './plugin';
+import { splunkOnCallPlugin } from './plugin';
 
 describe('splunk-on-call', () => {
   it('should export plugin', () => {
-    expect(plugin).toBeDefined();
+    expect(splunkOnCallPlugin).toBeDefined();
   });
 });

plugins/splunk-on-call/src/plugin.ts

@@ -19,15 +19,15 @@ import {
   createRouteRef,
   discoveryApiRef,
   configApiRef,
+  createRoutableExtension,
 } from '@backstage/core';
 import { splunkOnCallApiRef, SplunkOnCallClient } from './api';
 
 export const rootRouteRef = createRouteRef({
-  path: '/splunk-on-call',
   title: 'splunk-on-call',
 });
 
-export const plugin = createPlugin({
+export const splunkOnCallPlugin = createPlugin({
   id: 'splunk-on-call',
   apis: [
     createApiFactory({
@@ -37,4 +37,15 @@ export const plugin = createPlugin({
         SplunkOnCallClient.fromConfig(configApi, discoveryApi),
     }),
   ],
+  routes: {
+    root: rootRouteRef,
+  },
 });
+
+export const SplunkOnCallPage = splunkOnCallPlugin.provide(
+  createRoutableExtension({
+    component: () =>
+      import('./components/SplunkOnCallPage').then(m => m.SplunkOnCallPage),
+    mountPoint: rootRouteRef,
+  }),
+);