Skip to main content

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.

Dev Daily Plugin Dashboard

Prerequisites

  • Complete the Getting Started guide
  • Jira and Github accounts with the necessary permissions

Setup integrations

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

Port Settings

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.
Jira Integration

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

Dev Daily Plugin Dashboard

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.