Dev Daily Plugin

The Dev Daily Plugin provides developers with a consolidated dashboard of their daily development activities, including pull requests, tasks, and reviews. This plugin helps developers efficiently plan and manage their day by bringing together key information in one place.

Prerequisites

• Complete the Getting Started guide
• Jira and Github accounts with the necessary permissions
  • For Jira obtain a API Token

Setup integrations

In your Backstage instance, click the Settings button on the bottom left and click on the Port tab.

Yours will be empty, so you'll need to add your Jira and Github integrations.

Click on the Add Integration button, and follow the instructions to add both Jira and Github integrations.

Install GitHub Integration

1. In your Backstage instance, click the Settings button on the bottom left and click on the Port tab.
2. Click on the Add Integration button, in the settings page.
3. In the Git Providers section, click on the GitHub button.
4. Follow the instructions to install the GitHub app on your GitHub account.

Read more about Port's GitHub integration here.

Install Jira Integration

1. First, obtain a API Token for the atlassian account you want to use to authenticate with Jira.
2. In your Backstage instance, click the Settings button on the bottom left and click on the Port tab.
3. Click on the Add Integration button, in the settings page.
4. Scroll down to Project Management and select Jira.
5. Fill out the form:
   • Name: Give your integration a name. (You can pick "jira")
   • Installation Method: Select Hosted by Port. For more advanced setups, read here
   • Jira Host: Usually it's https://<your-jira-instance>.atlassian.net/.
   • Atlassian User Email: The email of the user you want to use to authenticate with Jira.
   • Atlassian API Token: The API Token you obtained for the user.
6. Click on the Save button.

Read more about Port's Jira integration here.

Setup the mappings & blueprints

In your Backstage instance, click the Settings button on the bottom left and click on the Port tab.

Add the blueprints - Pull Request & Task

Click on Add Blueprint and add the following two blueprints:

Pull Request Blueprint

{
  "identifier": "dev-daily-pull-request",
  "title": "Pull Request",
  "icon": "Github",
  "schema": {
    "properties": {
      "creator": {
        "title": "Creator",
        "type": "string"
      },
      "assignees": {
        "title": "Assignees",
        "type": "array"
      },
      "reviewers": {
        "title": "Reviewers",
        "type": "array"
      },
      "status": {
        "title": "Status",
        "type": "string",
        "enum": ["merged", "open", "closed"],
        "enumColors": {
          "merged": "purple",
          "open": "green",
          "closed": "red"
        }
      },
      "closedAt": {
        "title": "Closed At",
        "type": "string",
        "format": "date-time"
      },
      "updatedAt": {
        "title": "Updated At",
        "type": "string",
        "format": "date-time"
      },
      "mergedAt": {
        "title": "Merged At",
        "type": "string",
        "format": "date-time"
      },
      "link": {
        "format": "url",
        "type": "string"
      }
    },
    "required": []
  },
  "mirrorProperties": {},
  "calculationProperties": {},
  "aggregationProperties": {},
  "relations": {}
}

Task Blueprint

{
  "identifier": "dev-daily-task",
  "title": "Task",
  "icon": "Jira",
  "schema": {
    "properties": {
      "assignee": {
        "type": "string",
        "title": "Assignee"
      },
      "status": {
        "icon": "DefaultProperty",
        "title": "Status",
        "type": "string",
        "enum": ["To Do", "In Progress", "Done"],
        "enumColors": {
          "To Do": "turquoise",
          "In Progress": "yellow",
          "Done": "green"
        }
      },
      "link": {
        "type": "string",
        "title": "Link",
        "format": "url"
      }
    },
    "required": ["assignee", "status", "link"]
  },
  "mirrorProperties": {},
  "calculationProperties": {},
  "aggregationProperties": {},
  "relations": {}
}

Add the mappings

Click on the MAPPING button near the GitHub integration. and paste the following YAML:

Pull Request Mapping

resources:
  - kind: pull-request
    selector:
      query: "true"
    port:
      entity:
        mappings:
          identifier: .head.repo.name + (.id|tostring)
          title: .title
          blueprint: '"dev-daily-pull-request"'
          properties:
            creator: .user.login
            assignees: "[.assignees[].login]"
            reviewers: "[.requested_reviewers[].login]"
            status: .status
            closedAt: .closed_at
            updatedAt: .updated_at
            mergedAt: .merged_at
            prNumber: .id
            link: .html_url

Now click on the MAPPING button near the Jira integration. and paste the following YAML:

Task Mapping

note

The jql query (in line 8) is used to filter the issues that will be mapped to the blueprint. Feel free to change it to your needs. in this example we are mapping issues that were created or updated in the last 3 weeks.

deleteDependentEntities: true
createMissingRelatedEntities: true
enableMergeEntity: true
resources:
  - kind: issue
    selector:
      query: "true"
      jql: (created >= -3w) OR (updated >= -3w)
    port:
      entity:
        mappings:
          identifier: .key
          title: .fields.summary
          blueprint: '"dev-daily-task"'
          properties:
            link: (.self | split("/") | .[:3] | join("/")) + "/browse/" + .key
            status: .fields.status.statusCategory.name
            creator: .fields.creator.emailAddress
            created: .fields.created
            updated: .fields.updated
            resolutionDate: .fields.resolutiondate
            assignee: .fields.assignee.emailAddress

note

If you already have a mapping configured you should append the new mapping to the existing one.

Install the plugin

yarn --cwd packages/app add @port-labs/backstage-plugin-dev-daily

Next, add the DevDailyPage component to your Backstage instance.

In the file packages/app/src/App.tsx, add the route:

import { DevDailyPluginPage } from "@port-labs/backstage-plugin-dev-daily";
// ...
<Route path="/dev-daily" element={<DevDailyPluginPage />} />;

Then add the link to the NavBar, in the file: packages/app/src/components/Root/Root.tsx:

import AssignmentTurnedInIcon from "@material-ui/icons/AssignmentTurnedIn";
// ...
<SidebarItem icon={AssignmentTurnedInIcon} to="dev-daily" text="Plan My Day" />;

See the plugin in action

note

You might need to wait 5-10 minutes for the integration setup to complete before you see the data in the plugin.

Troubleshooting

If you don't see the data in the plugin, you can check the following:

• Check if the integration setup is complete.
  • Login to Port dashboard, and check data sources page.
  • You will see a green checkmark next to the integration name.
• It could be that the plugin does not recognize the user you are logged in with.
  • Check on the top right corner of the page, under the Viewer email if the user is logged in with the correct account.