feat: update to PagerDutyPage to add support for configurations such …

…as settings Signed-off-by: Tiago Barbosa <tbarbos@hotmail.com>
PagerDuty · Jul 24, 2024 · 7656de3 · 7656de3
1 parent ce41f10
commit 7656de3
Show file tree

Hide file tree

Showing 2 changed files with 152 additions and 17 deletions.
diff --git a/src/api/client.test.ts b/src/api/client.test.ts
@@ -365,6 +365,7 @@ describe('PagerDutyClient', () => {
  });
  });
 });
+
 describe('getSetting', () => {
  const settingId = 'settingId';
  const setting: PagerDutySetting = {

diff --git a/src/components/PagerDutyPage/index.tsx b/src/components/PagerDutyPage/index.tsx
@@ -1,28 +1,162 @@
-import React from "react";
-import { Grid, Typography } from "@material-ui/core";
-import { Header, Page, Content } from "@backstage/core-components";
+import React, { useEffect, useState } from "react";
+import {
+ Card,
+ FormControlLabel,
+ Grid,
+ Radio,
+ RadioGroup,
+ Typography,
+} from "@material-ui/core";
+import {
+ Header,
+ Page,
+ Content,
+ TabbedLayout,
+} from "@backstage/core-components";
 import { ServiceMappingComponent } from "./ServiceMappingComponent";
+import { useApi } from "@backstage/core-plugin-api";
+import { pagerDutyApiRef } from "../../api";
+import { NotFoundError } from "@backstage/errors";
+
+const SERVICE_DEPENDENCY_SYNC_STRATEGY =
+ "settings::service-dependency-sync-strategy";
 
 /** @public */
 export const PagerDutyPage = () => {
+ const pagerDutyApi = useApi(pagerDutyApiRef);
+ const [
+ selectedServiceDependencyStrategy,
+ setSelectedServiceDependencyStrategy,
+ ] = useState("disabled");
+
+ useEffect(() => {
+ function fetchSetting() {
+ pagerDutyApi
+ .getSetting(SERVICE_DEPENDENCY_SYNC_STRATEGY)
+ .then((result) => {
+ if (result !== undefined) {
+ setSelectedServiceDependencyStrategy(result.value);
+ }
+ })
+ .catch((error) => {
+ if (error instanceof NotFoundError) {
+ // If the setting is not found, set the default value to "disabled"
+ setSelectedServiceDependencyStrategy("disabled");
+ }
+ });
+ }
+
+ fetchSetting();
+ }, [pagerDutyApi]);
+
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ const value = getSelectedValue((event.target as HTMLInputElement).value);
+
+ setSelectedServiceDependencyStrategy(value);
+
+ pagerDutyApi.storeSettings([
+ {
+ id: SERVICE_DEPENDENCY_SYNC_STRATEGY,
+ value,
+ },
+ ]);
+ };
+
+ function getSelectedValue(
+ value: string
+ ): "backstage" | "pagerduty" | "both" | "disabled" {
+ switch (value) {
+ case "backstage":
+ return "backstage";
+ case "pagerduty":
+ return "pagerduty";
+ case "both":
+ return "both";
+ default:
+ return "disabled";
+ }
+ }
+
  return (
  <Page themeId="home">
  <Header title="PagerDuty" subtitle="Advanced configurations" />
  <Content>
- <Grid container spacing={3} direction="column">
- <Grid item>
- <Typography variant="h4">Service to Entity mapping</Typography>
- <Typography variant="body1">
- Easily map your existing PagerDuty services to entities in Backstage without the need to add anotations to all your projects.
- </Typography>
- <Typography variant="body1">
- <b>Warning: </b>Only 1:1 mapping is allowed at this time.
- </Typography>
- </Grid>
- <Grid item>
- <ServiceMappingComponent />
- </Grid>
- </Grid>
+ <TabbedLayout>
+ <TabbedLayout.Route path="/service-mapping" title="Service Mapping">
+ <Grid container spacing={3} direction="column">
+ <Grid item>
+ {/* <Typography variant="h4">Service to Entity mapping</Typography> */}
+ <Typography variant="body1">
+ Easily map your existing PagerDuty services to entities in
+ Backstage without the need to add anotations to all your
+ projects.
+ </Typography>
+ <Typography variant="body1">
+ <b>Warning: </b>Only 1:1 mapping is allowed at this time.
+ </Typography>
+ </Grid>
+ <Grid item>
+ <ServiceMappingComponent />
+ </Grid>
+ </Grid>
+ </TabbedLayout.Route>
+ <TabbedLayout.Route path="/settings" title="Configuration">
+ <Grid container spacing={3} direction="column">
+ <Grid item>
+ <Typography variant="h4">Plugin configuration</Typography>
+ <Typography variant="body1">
+ Configure your PagerDuty plugin configuration here
+ </Typography>
+ </Grid>
+ <Card
+ title="Service dependency synchronization preferences"
+ style={{ padding: "10px", paddingLeft: "15px", width: "50%" }}
+ >
+ <>
+ <Typography variant="h6">
+ Service dependency synchronization strategy
+ </Typography>
+ <Typography variant="body1">
+ Select the main source of truth for your service dependencies
+ </Typography>
+ <RadioGroup
+ value={selectedServiceDependencyStrategy}
+ onChange={handleChange}
+ >
+ <FormControlLabel
+ value="backstage"
+ control={<Radio />}
+ label="Backstage"
+ />
+ <FormControlLabel
+ value="pagerduty"
+ control={<Radio />}
+ label="PagerDuty"
+ />
+ <FormControlLabel
+ value="both"
+ control={<Radio />}
+ label="Both"
+ />
+ <FormControlLabel
+ value="disabled"
+ control={<Radio />}
+ label="Disabled"
+ />
+ </RadioGroup>
+ </>
+
+ <br />
+ <br />
+ <Typography variant="body1">
+ <b>Warning: </b>Changing this setting will affect how your
+ service dependencies are synchronized and may cause data loss.
+ Check the <a style={{color: "cadetblue"}} href="https://pagerduty.github.io/backstage-plugin-docs/index.html"> documentation </a> for more information.
+ </Typography>
+ </Card>
+ </Grid>
+ </TabbedLayout.Route>
+ </TabbedLayout>
  </Content>
  </Page>
  );