diff --git a/backstage-plugins/packages/app/src/components/Root/Root.tsx b/backstage-plugins/packages/app/src/components/Root/Root.tsx index b3196f834..f312adb8c 100644 --- a/backstage-plugins/packages/app/src/components/Root/Root.tsx +++ b/backstage-plugins/packages/app/src/components/Root/Root.tsx @@ -27,6 +27,7 @@ import HomeIcon from '@material-ui/icons/Home'; import LibraryBooks from '@material-ui/icons/LibraryBooks'; import MenuIcon from '@material-ui/icons/Menu'; import GroupIcon from '@material-ui/icons/People'; +import PollIcon from '@material-ui/icons/Poll'; import SearchIcon from '@material-ui/icons/Search'; import React, { PropsWithChildren } from 'react'; import LogoFull from './LogoFull'; @@ -89,6 +90,11 @@ export const Root = ({ children }: PropsWithChildren<{}>) => ( to="dev-daily" text="Plan My Day" /> + diff --git a/backstage-plugins/plugins/devex-survey-plugin/README.md b/backstage-plugins/plugins/devex-survey-plugin/README.md index f1cddc49f..5cc02cd90 100644 --- a/backstage-plugins/plugins/devex-survey-plugin/README.md +++ b/backstage-plugins/plugins/devex-survey-plugin/README.md @@ -1,122 +1,51 @@ -# Devex Survey Plugin - -Uncover the pains of your developers to improve your platform. - -After fully understanding the pains of your developers, and after surveying your organization, we will suggest the best plan to improve your platform. - -After the plan is executed, you should execute the survey again to see if the plan has worked. You should execute this survey on a regular basis to get a good understanding of the pains of your developers. - -Blueprint: - -```json -{ - "identifier": "survey_results", - "title": "Survey Results", - "icon": "Microservice", - "schema": { - "properties": { - "blocking_your_flow": { - "type": "string", - "title": "Blocking Your Flow?", - "enum": [ - "work_planning", - "development_process", - "shipping_features", - "managing_production" - ], - "enumColors": { - "work_planning": "lightGray", - "development_process": "lightGray", - "shipping_features": "lightGray", - "managing_production": "lightGray" - } - }, - "work_planning_challenges": { - "icon": "DefaultProperty", - "title": "Work Planning Challenges", - "type": "string", - "enum": [ - "managing_tickets_prs", - "resolving_bugs", - "prioritizing_tasks", - "fragmented_communication" - ], - "enumColors": { - "managing_tickets_prs": "lightGray", - "resolving_bugs": "lightGray", - "prioritizing_tasks": "lightGray", - "fragmented_communication": "lightGray" - } - }, - "development_process_challenges": { - "type": "string", - "title": "Development Process Challenges", - "enum": [ - "maintaining_environment", - "first_time_setup", - "finding_documentation", - "context_switching" - ], - "enumColors": { - "maintaining_environment": "lightGray", - "first_time_setup": "lightGray", - "finding_documentation": "lightGray", - "context_switching": "lightGray" - } - }, - "shipping_features_challenges": { - "type": "string", - "title": "Shipping Features Challenges", - "enum": [ - "manual_deployments", - "pipeline_failures", - "running_migrations", - "feature_toggles" - ], - "enumColors": { - "manual_deployments": "lightGray", - "pipeline_failures": "lightGray", - "running_migrations": "lightGray", - "feature_toggles": "lightGray" - } - }, - "managing_production_challenges": { - "type": "string", - "title": "Managing Production Challenges", - "enum": [ - "service_health", - "troubleshooting_outages", - "understanding_infrastructure", - "accessing_permissions" - ], - "enumColors": { - "service_health": "lightGray", - "troubleshooting_outages": "lightGray", - "understanding_infrastructure": "lightGray", - "accessing_permissions": "lightGray" - } - }, - "other_feedback": { - "type": "string", - "title": "Other feedback" - }, - "email": { - "type": "string", - "title": "Email" - } - }, - "required": [ - "blocking_your_flow", - "work_planning_challenges", - "development_process_challenges", - "shipping_features_challenges", - "managing_production_challenges", - "email" - ] - }, - "mirrorProperties": {}, - "calculationProperties": {}, - "aggregationProperties": {}, - "relations": {} -} -``` +# DevEx Survey Plugin for Backstage + +The only way to improve your platform is to understand the pains of your developers. + +The DevEx Survey Plugin enables organizations to collect and analyze feedback about developer workflows, challenges, and productivity blockers. This plugin helps engineering leaders make data-driven decisions to improve developer experience and productivity. + +![DevEx Survey Plugin](/docs/site/static/img/devex-survey/completing.gif) + +## Features + +### Comprehensive Developer Experience Analysis + +- Identify bottlenecks in development workflows +- Track productivity blockers +- Measure effectiveness of platform improvements +- Gather actionable feedback from your engineering teams + +### Real-time Analytics Dashboard + +- Visual response distribution +- Trend analysis over time +- Challenge area identification +- Time-based comparisons + +### Flexible Survey Administration + +- Customizable survey questions +- Target audience configuration +- Automated response aggregation +- Scheduled survey campaigns + +### Data-Driven Decision Making + +- Prioritize platform improvements +- Track improvement effectiveness +- Measure developer satisfaction +- Identify training opportunities + +## Documentation + +For detailed installation and configuration instructions, please refer to [Port's official plugin documentation](https://docs.backstage-plugin.getport.io/examples/devex-survey). + +## Screenshots + +### Survey Form + +![DevEx Survey Plugin](/docs/site/static/img/devex-survey/completing.gif) + +### Results View + +![Results View](/docs/site/static/img/devex-survey/results.png) diff --git a/backstage-plugins/plugins/devex-survey-plugin/src/components/charts/TopChallenge.tsx b/backstage-plugins/plugins/devex-survey-plugin/src/components/charts/TopChallenge.tsx index 19c9a2322..164f426f0 100644 --- a/backstage-plugins/plugins/devex-survey-plugin/src/components/charts/TopChallenge.tsx +++ b/backstage-plugins/plugins/devex-survey-plugin/src/components/charts/TopChallenge.tsx @@ -78,7 +78,7 @@ export const TopChallenge = ({ results }: Props) => { return ( - + Most Common Challenge Area: {topCategory.name} @@ -88,7 +88,7 @@ export const TopChallenge = ({ results }: Props) => { {Math.round((topCategory.count / topCategory.total) * 100)}%) - + Top Challenge inside {topCategory.name}: diff --git a/docs/site/docs/examples/_cards.mdx b/docs/site/docs/examples/_cards.mdx index 1a79ee043..af06be23d 100644 --- a/docs/site/docs/examples/_cards.mdx +++ b/docs/site/docs/examples/_cards.mdx @@ -4,6 +4,11 @@

A developer productivity dashboard showcasing developer-centric metrics and insights.

+
+

Developer Experience Survey Plugin

+

A customizable survey tool to gather and analyze developer experience feedback across your organization.

+
+

Security Plugin

A security dashboard that helps you manage security policies and compliance.

@@ -14,7 +19,7 @@

An incident management dashboard that helps you manage incidents and be more efficient when you are on call.

-
+

More Coming Soon

We're working on additional example plugins to support more use cases.

diff --git a/docs/site/docs/examples/devex-survey.md b/docs/site/docs/examples/devex-survey.md new file mode 100644 index 000000000..cc5679a52 --- /dev/null +++ b/docs/site/docs/examples/devex-survey.md @@ -0,0 +1,244 @@ +--- +title: DevEx Survey Plugin +description: A customizable survey tool to gather and analyze developer experience feedback across your organization. +sidebar_position: 3 +--- + +# DevEx Survey Plugin + +#### The only way to improve your platform is to understand the pains of your developers. + +The DevEx Survey Plugin enables organizations to collect and analyze feedback about developer workflows, challenges, and productivity blockers. This plugin helps engineering leaders make data-driven decisions to improve developer experience and productivity by systematically identifying pain points across different development phases. + +![DevEx Survey](/img/devex-survey/completing.gif) + +## Prerequisites + +- Complete the [Getting Started](/getting-started) guide +- Port account with admin access + +## Setup the blueprint + +In your Backstage instance, click the **Settings** button on the bottom left and click on the **Port** tab. + +### Add the Survey Results blueprint + +Click on **Add Blueprint** and add the following blueprint: + +
+Survey Results Blueprint + +```json +{ + "identifier": "survey_results", + "title": "Survey Results", + "icon": "Microservice", + "schema": { + "properties": { + "blocking_your_flow": { + "type": "string", + "title": "Blocking Your Flow?", + "enum": [ + "work_planning", + "development_process", + "shipping_features", + "managing_production" + ], + "enumColors": { + "work_planning": "lightGray", + "development_process": "lightGray", + "shipping_features": "lightGray", + "managing_production": "lightGray" + } + }, + "work_planning_challenges": { + "icon": "DefaultProperty", + "title": "Work Planning Challenges", + "type": "string", + "enum": [ + "managing_tickets_prs", + "resolving_bugs", + "prioritizing_tasks", + "fragmented_communication" + ], + "enumColors": { + "managing_tickets_prs": "lightGray", + "resolving_bugs": "lightGray", + "prioritizing_tasks": "lightGray", + "fragmented_communication": "lightGray" + } + }, + "development_process_challenges": { + "type": "string", + "title": "Development Process Challenges", + "enum": [ + "maintaining_environment", + "first_time_setup", + "finding_documentation", + "context_switching" + ], + "enumColors": { + "maintaining_environment": "lightGray", + "first_time_setup": "lightGray", + "finding_documentation": "lightGray", + "context_switching": "lightGray" + } + }, + "shipping_features_challenges": { + "type": "string", + "title": "Shipping Features Challenges", + "enum": [ + "manual_deployments", + "pipeline_failures", + "running_migrations", + "feature_toggles" + ], + "enumColors": { + "manual_deployments": "lightGray", + "pipeline_failures": "lightGray", + "running_migrations": "lightGray", + "feature_toggles": "lightGray" + } + }, + "managing_production_challenges": { + "type": "string", + "title": "Managing Production Challenges", + "enum": [ + "service_health", + "troubleshooting_outages", + "understanding_infrastructure", + "accessing_permissions" + ], + "enumColors": { + "service_health": "lightGray", + "troubleshooting_outages": "lightGray", + "understanding_infrastructure": "lightGray", + "accessing_permissions": "lightGray" + } + }, + "other_feedback": { + "type": "string", + "title": "Other feedback" + }, + "email": { + "type": "string", + "title": "Email" + } + }, + "required": [ + "blocking_your_flow", + "work_planning_challenges", + "development_process_challenges", + "shipping_features_challenges", + "managing_production_challenges", + "email" + ] + } +} +``` + +
+ +## Installation + +Install the plugin in your Backstage instance: + +```bash +yarn --cwd packages/app add @port-labs/backstage-plugin-devex-survey +``` + +## Configuration + +Add the survey plugin page to your Backstage application. + +In `packages/app/src/App.tsx`, add the route: + +```tsx +import { DevExSurveyPage } from "@port-labs/backstage-plugin-devex-survey"; +// ... +} />; +``` + +Add the navigation item to `packages/app/src/components/Root/Root.tsx`: + +```tsx +import PollIcon from "@material-ui/icons/Poll"; +// ... +; +``` + +## Usage + +### Creating a Survey + +1. Navigate to the DevEx Survey page in your Backstage instance +2. Click "Create Survey" in the admin panel +3. Configure your survey questions and response options +4. Set the survey duration and target audience +5. Publish the survey + +### Survey Categories + +The survey covers four main areas of developer experience: + +1. **Work Planning** + + - Managing tickets and PRs + - Bug resolution + - Task prioritization + - Communication challenges + +2. **Development Process** + + - Environment maintenance + - First-time setup + - Documentation access + - Context switching + +3. **Shipping Features** + + - Deployment processes + - Pipeline management + - Database migrations + - Feature flag handling + +4. **Production Management** + - Service health monitoring + - Outage troubleshooting + - Infrastructure understanding + - Access management + +### Viewing Results + +Access the results dashboard to view aggregated responses and analytics: + +![Survey Results Dashboard](/img/devex-survey/results.png) + +The dashboard provides: + +- Response distribution across categories +- Trend analysis over time +- Key challenge area identification +- Time-based comparisons + +## Best Practices + +- Run surveys at regular intervals (e.g., quarterly) +- Share results with the engineering team for transparency +- Use insights to prioritize platform improvements +- Follow up on identified pain points with concrete actions + +## Troubleshooting + +If you encounter issues: + +- Verify your Port configuration in the Backstage settings +- Check that users have the correct permissions +- Ensure your Backstage instance is properly configured with Port +- Contact support if you need additional assistance + +## See it in Action + +Watch a complete survey flow: + +![Survey Completion Demo](/img/devex-survey/completing.gif) diff --git a/docs/site/static/img/devex-survey/completing.gif b/docs/site/static/img/devex-survey/completing.gif new file mode 100644 index 000000000..ee8637006 Binary files /dev/null and b/docs/site/static/img/devex-survey/completing.gif differ diff --git a/docs/site/static/img/devex-survey/results.png b/docs/site/static/img/devex-survey/results.png new file mode 100644 index 000000000..d8596245d Binary files /dev/null and b/docs/site/static/img/devex-survey/results.png differ