Hello,
I've recently integrated your plugin successfully (it's beautiful!) and I found present README.md to be highly incorrect.
For example:

1. [[ can't exist around Authorization
2. Sidebar icon creation missed - "<SidebarItem icon={ExtensionIcon} to="/opsgenie" text="OpsGenie" />"
3. Urls for domain and proxy target don't need .eu necessarily - are confusing

I would suggest copy pasting instructions from
https://roadie.io/backstage/plugins/opsgenie/

which are correct to the letter. Thank you!

Plugin Version: 0.6.3
Backstage Version: 1.6.0

Starting in the new year 2023, we started having the backstage opsgenie Analytics tab to stop working and generating a bunch of undefined errors.

Digging into the code a little, we can see that a date in early January result into being classified as Week 52 of 2023 instead of Week 1. Which then leads to an issue when trying to increment the incidentsBuckets since week w52 - 2023 wasn't initialized to 0. (incidentsBuckets[week].total += 1;)

index-8e608a93.esm.js:269 Uncaught TypeError: Cannot read properties of undefined (reading 'total')
    at eval (index-8e608a93.esm.js:269:1)
    at Array.forEach (<anonymous>)
    at AnalitycsApi.incidentsByWeekAndHours (index-8e608a93.esm.js:266:1)
    at Graph$3 (index-8e608a93.esm.js:1194:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)

Steps to reproduce

1. Make sure to have an incident in OpsGenie that has an impactStartDate in early January. (i.e.: impactStartDate: "2023-01-02T03:00:38.787Z")
2. Open the /opsgenie/analytics page

Error: Cannot read properties of undefined (reading 'total')

hi,

recently integrated the plugin in a backstage 1.31 version.

I am using 0.6.0 plugin's version

Everything works fine except the option
"Who is on-call"

any ideas ?

With the release of Backstage 1.6.0 it is now possible to migrate from react-router 6.0.0-beta.0 to a stable version. Backstage has released a migration guide which outlines the need for all plugins to shift react-router and react-router-dom from dependencies to peerDependencies e.g.

 dependencies {
   ...
-  "react-router-dom": "^6.0.0-beta.0",
-  "react-router": "^6.0.0-beta.0"
 },
 peerDependencies: {
   ...
+  "react-router-dom": "6.0.0-beta.0 || ^6.3.0",
+  "react-router": "6.0.0-beta.0 || ^6.3.0"
 },

In order for developers to use a stable version of react-router in their Backstage implementation, this plugin will need to make this change.

I have updated the backstage from 1.7.1 to 1.10.1 , after updating the backstage , opsgenie plugin stop working , plugin with components page is still working i.e I am able to show alert or "who-is-on-call" on specific component page but standalone page for this plugin is giving error.

PF

I have checked and found that opsgenie plugin gets updated from 0.6.1 to 0.6.4

• output of yarn backstage-cli info

yarn run v1.22.19
$ /home/il58d0/smb/backstage-conf-repo/backstage-conf-repo-original/node_modules/.bin/backstage-cli info
OS:   Linux 5.14.0-1055-oem - linux/x64
node: v16.14.0
yarn: 1.22.19
cli:  0.22.1 (installed)
backstage:  1.10.1

Dependencies:
  @backstage/app-defaults                          1.1.0
  @backstage/backend-app-api                       0.3.1
  @backstage/backend-common                        0.17.0, 0.18.1
  @backstage/backend-plugin-api                    0.3.1
  @backstage/backend-tasks                         0.4.2
  @backstage/backend-test-utils                    0.1.33
  @backstage/catalog-client                        1.3.0
  @backstage/catalog-model                         1.1.5
  @backstage/cli-common                            0.1.11
  @backstage/cli                                   0.22.1
  @backstage/config-loader                         1.1.8
  @backstage/config                                1.0.6
  @backstage/core-app-api                          1.4.0
  @backstage/core-components                       0.12.3
  @backstage/core-plugin-api                       1.3.0
  @backstage/errors                                1.1.4
  @backstage/integration-aws-node                  0.1.1
  @backstage/integration-react                     1.1.9
  @backstage/integration                           1.4.2
  @backstage/plugin-api-docs                       0.8.14
  @backstage/plugin-app-backend                    0.3.41
  @backstage/plugin-auth-backend                   0.17.4
  @backstage/plugin-auth-node                      0.2.10
  @backstage/plugin-bazaar-backend                 0.2.4
  @backstage/plugin-bazaar                         0.2.3
  @backstage/plugin-catalog-backend-module-github  0.2.4
  @backstage/plugin-catalog-backend                1.7.1
  @backstage/plugin-catalog-common                 1.0.10
  @backstage/plugin-catalog-graph                  0.2.26
  @backstage/plugin-catalog-import                 0.9.4
  @backstage/plugin-catalog-node                   1.3.2
  @backstage/plugin-catalog-react                  1.2.4
  @backstage/plugin-catalog                        1.7.2
  @backstage/plugin-events-node                    0.2.2
  @backstage/plugin-github-actions                 0.5.14
  @backstage/plugin-home                           0.4.30
  @backstage/plugin-org                            0.6.4
  @backstage/plugin-permission-common              0.7.3
  @backstage/plugin-permission-node                0.7.4
  @backstage/plugin-permission-react               0.4.9
  @backstage/plugin-playlist-backend               0.2.4
  @backstage/plugin-playlist-common                0.1.4
  @backstage/plugin-playlist                       0.1.5
  @backstage/plugin-proxy-backend                  0.2.35
  @backstage/plugin-scaffolder-backend             1.10.1
  @backstage/plugin-scaffolder-common              1.2.4
  @backstage/plugin-scaffolder-react               1.0.1
  @backstage/plugin-scaffolder                     1.10.1
  @backstage/plugin-search-backend-module-pg       0.5.2
  @backstage/plugin-search-backend-node            1.1.2
  @backstage/plugin-search-backend                 1.2.2
  @backstage/plugin-search-common                  1.2.1
  @backstage/plugin-search-react                   1.4.0
  @backstage/plugin-search                         1.0.7
  @backstage/plugin-shortcuts                      0.3.6
  @backstage/plugin-sonarqube-backend              0.1.6
  @backstage/plugin-sonarqube-react                0.1.1
  @backstage/plugin-sonarqube                      0.6.2
  @backstage/plugin-stack-overflow                 0.1.10
  @backstage/plugin-tech-radar                     0.6.0
  @backstage/plugin-techdocs-backend               1.5.2
  @backstage/plugin-techdocs-module-addons-contrib 1.0.9
  @backstage/plugin-techdocs-node                  1.4.5
  @backstage/plugin-techdocs-react                 1.1.2
  @backstage/plugin-techdocs                       1.4.3
  @backstage/plugin-todo-backend                   0.1.38
  @backstage/plugin-todo                           0.2.16
  @backstage/plugin-user-settings                  0.6.2
  @backstage/release-manifests                     0.0.8
  @backstage/test-utils                            1.2.4
  @backstage/theme                                 0.2.16
  @backstage/types                                 1.0.2
  @backstage/version-bridge                        1.0.3
Done in 0.80s.

The plugin ingests everything without being able to filter out what is relevant to ones role. With a department of many teams there is a lot of noise on the feed

The on-call page has a Search but it would be good to be able to configure relevant panels at the top, or even some out of view. The same for the alerts page, it shows everything which means 98% is irrelevant

Is this possible?

The alerts list component (EntityOpsgenieAlertsCard) shows alerts with a colored dot that indicates status. Example:

Currently

• a closed alert is currently marked by a dot in color theme.palette.status.ok (green)
• an open and acknowledged alert has a dot in theme.palette.status.warning (yellow)
• an open alert that is not acknowledged gets theme.palette.status.error (red)

Source: https://github.com/K-Phoen/backstage-plugin-opsgenie/blob/v0.6.6/src/components/AlertsTable/StatusChip.tsx

To me personally, the combination of the color green for a closed alert is unexpected, as the green indicates more that something is "ready" or "active".

I suggest to align the colors with the OpsGenie web UI. Here they use:

• Red for an open, not acknowledged alert (#b23120 in dark, #d8351f in light)
• Light blue for an acknowledged alert (#a4adba in dark, #dfecfe in light)
• Transparent, gray outline only for a closed alert

https://github.com/K-Phoen/backstage-plugin-opsgenie#components-annotations

For the component-selector annotation an example is provided outlining how to target a specific tag. Are there other annotation values that can be used to target other things? What about targeting multiple services?

It would be great to add a schedule's name next to the team owner on the OnCallForScheduleCard as one team could own multiple schedules and there are cards with the same name in this case which could be misleading.

It could be as simple as:

{schedule.ownerTeam.name} | {schedule.name}

here

Or you could add the "Team:" and "Schedule:" labels so it's more explicit.

Hello,

I would like to use the PermissionPolicy Interface in my Backstage Backend together with Opsgenie. As far as I can tell, Opsgenie Plugin does not expose "PolicyQuery", so that I could authorize Users for this Plugin.

1. Could you add this Feature?
2. Or is there an other way to DENY OpsGenie for some Users?

Thanks

Hi,

First of all, thanks for your plugin. I have a feature request to be able to raise incidents with some basic fields from the plugin. Reasoning for this is that some employees should be able to raise incident from Backstage. I think smaller organizations would appreciate this feature. What do you think? If you are open to it and accepting PRs I can try to add it.

It would be nice to show who is on-call on the component page. There should be a annotation for team name and based on team name it should show all on-calls for all schedules

I am using "@k-phoen/backstage-plugin-opsgenie": "^0.5.9", of the Opsgenie plugin but get the following error when clicking on the Incidents or Analytics tabs for the plugin:

Failed to load resource: the server responded with a status of 422 (Unprocessable Entity)

During the request for the Incidents tab, this line will go through the logs at a fast clip before receiving the 422 error:

[1] 2022-03-28T15:25:35.786Z backstage info Method: GET, Path: /api/proxy/opsgenie/api/v1/incidents req=[object Object]

Further troubleshooting appears that the plugin is trying to return over 108,000 items and we see this being returned in our logs:

 {“message”:“Sum of offset and limit should be lower than 20000",“took”:0.002,“requestId”:“<REDACTED>”}

If this is indeed the issue, is there a way to only return a subset of this data or limit to only a day or 2 of data?

Any assistance is appreciated. Thanks.

The new On Call page is awesome! However, we have a lot of schedule items and am hitting 429 Too Many Requests errors due to each card making separate requests hitting limits on the OpsGenie API. Is it possible to paginate this page to show X cards per page? and perhaps support some kind of Search or dropdown list of all schedule names to quickly find the on call card you're looking for?

How can I modify a plugin and test it in Backstage? Is there any available documentation outlining this process? Additionally, what steps should I follow to implement these changes on a local machine, and what adjustments are necessary when deploying to a production environment?

Plugin Setup

1. If you have standalone app (you didn't clone this repository), then do:

yarn add @k-phoen/backstage-plugin-opsgenie

What if I have a standalone app and I did clone this repository for local testing?

I cloned your repo. Executed ~/opsgenie> yarn && yarn tsc && yarn build-rollup && yarn link
Then in my Custom app ~/my-backstage-app/packages/app> yarn link "@K-Phoen/backstage-plugin-opsgenie" then I manually add the dependency to packages/app/package.json and follow the instructions in the readme. finally yarn start

When I navigate to localhost:3000/opsgenie the app crashes with invalid hook call because there are multiple copies of react.

The docs suggest a fix: https://reactjs.org/warnings/invalid-hook-call-warning.html

This problem can also come up when you use npm link or an equivalent. In that case, your bundler might “see” two Reacts — one in application folder and one in your library folder. Assuming myapp and mylib are sibling folders, one possible fix is to run npm link ../myapp/node_modules/react from mylib. This should make the library use the application’s React copy.

So I tried ~/opsgenie> npm link ../my-backstage-app/node_modules/react

and app crashed with useLocation() may be used only in the context of a <Router> component.

The above error occurred in the <Routes> component:
    in Routes (at Router.tsx:7)
    in Router (at App.tsx:148)
    in Route (at App.tsx:148)
    in Routes (at App.tsx:133)
    in div (created by SidebarPage)
    in SidebarPage (at Root.tsx:97)
    in Root (at App.tsx:132)
    in Route (created by AppRouter)
    in Routes (created by AppRouter)
    in SignInPageWrapper (created by AppRouter)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by AppRouter)
    in AppRouter (at App.tsx:130)
    in RoutingProvider (created by Provider)
    in CssBaseline (created by WithStyles(CssBaseline))
    in WithStyles(CssBaseline) (created by AppThemeProvider)
    in ThemeProvider (created by AppThemeProvider)
    in AppThemeProvider (created by Provider)
    in AppContextProvider (created by Provider)
    in ApiProvider (created by Provider)
    in Provider (at App.tsx:127)
    in App (at src/index.tsx:6)

I tracked this down to your src/Router.tsx
Please help 🙏

Currently, the behavior of the WHO IS ON-CALL tab is to show six cards at a time. It'd be really valuable to have a property accessible that allowed to customize how many cards are shown per page. Also perhaps a boolean to simply disable pagination altogether.

Similiar to the problems with recharts reported here. Running the tests in a backstage app which uses this plugin will fail with the following error.

● Test suite failed to run

      x Expected ':', got ')'
       ,-[/home/sdiez/projects/gitlab.breuni.de/backstage/backstage/node_modules/d3-scale/node_modules/d3-array/src/cumsum.js:5:5]
     5 | : v => (sum += +valueof(v, index++, values) || 0));
       :                                                  ^
       `----

    Caused by:
        0: failed to process input file
        1: Syntax Error

      at Compiler.transformSync (../../../node_modules/@swc/core/index.js:241:29)
      at transformSync (../../../node_modules/@swc/core/index.js:348:21)
      at Object.process (../../../node_modules/@swc/jest/index.js:72:45)
      at Object.process (../../../node_modules/@backstage/cli/config/jestSwcTransform.js:27:27)
      at ScriptTransformer.transformSource (../../../node_modules/@jest/transform/build/ScriptTransformer.js:619:31)
      at ScriptTransformer._transformAndBuildScript (../../../node_modules/@jest/transform/build/ScriptTransformer.js:765:40)
      at ScriptTransformer.transform (../../../node_modules/@jest/transform/build/ScriptTransformer.js:822:19)

Downgrading to recharts version 2.1.12 seems to solve the issue.

Hello,

I updated all Backstage with last version of all deps, and I have an error when I run "yarn test" on Backstage:

    /workspace/backstage-app/node_modules/@k-phoen/backstage-plugin-opsgenie/dist/esm/index-d8881c5c.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { createApiRef, createRouteRef, createPlugin, createApiFactory, discoveryApiRef, identityApiRef, configApiRef, createRoutableExtension, createComponentExtension } from '@backstage/core-plugin-api';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (../../../node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (../../../node_modules/@k-phoen/backstage-plugin-opsgenie/dist/index.esm.js:49:22)

Do you have the same issue on your side?

Thank you,

Hi,

Right now, we are forced to use OnCallList to view people currently on call. What we would like to see is schedules, that we are interested in (couple out of 100). I saw that you implemented OnCallForScheduleCard. Could you please export it, so we can use it?

Issue

I've attempted to integrate the AlertsCard component into my instance, however, when viewing the Component the response back is consistently entity is undefined.

Context

• OpsgeniePage component works as expected. All on-call, alerts, and incidents are showing.
• Query annotation being used by component: opsgenie.com/component-selector: 'tag:"service:Videos"'
• Showing that there is an alert with the above tag and it is searchable:
  

Please migrate to support the new composability API as defined in https://backstage.io/docs/plugins/composability#porting-existing-plugins

Some of our teams use shared schedules that aren't owned by any individual team. This currently isn't supported by the plugin - the schedule is returned by GET /schedules but is filtered out because it doesn't have an owning team. We could adjust our schedules to be owned by one of the teams, but is it useful for others to add a way to select schedules by schedule name instead of team name?
Currently thinking this would be done by adding a second annotation "opsgenie.com/schedule"

Hi,

Thanks for providing a great plugin, a small request from our operation teams has been to show more on-call team cards per pagination. We are displaying this page on a shared monitor. 12 works well for us and doesn't exceed API rate limits.

A solution I have found is to allow the user to pass the desired count via config.

I'm happy to contribute if there is an appetite for this.

Thanks