JIRA Dependency Tree

This project provides web-app to display dependency tree of issues in JIRA with links.

Features

• Show dendency graph between JIRA issues
  • Construction of graph is completely automatic
  • only outward link
  • Show details of issue
  • Highlight issue/link that are related hovered it
• Switch layout
  • horizontal/vertical
• Import issues via JQL
• Zoom/Pan on canvas
• Search issue and view it in application
• Edit relations
  • Multiple Delete/Append at one time
  • Filter relations

Motivation

We wanted to use Advanced Roadmap in my work, but it is too expensive for us. So we decided to build dependency tree by hand.

This feature that display issue dependency is one of the most pain point of JIRA Roadmap I think.

Images

Importer

Relation Editor

Architecture

JIRA Dependency Tree has frontend and backend server applications.

• Frontend
  • Built on React.js and hooks
  • Built and bundled by vite
• Test
  • Using Playwright to run test on browser
  • Using vitest to run unit test
  • Using testing-library to test component without browser
• Server
  • Built with Rust
  • Using framework for AWS Lambda
• Infrastructure
  • Run on AWS Lambda and API Gateway
  • Deploying with CDK

JIRA Token usage

This application uses JIRA API Token that user generated owned by them. But given tokens does not store any place we promise. we use it only to call JIRA API by server, then destroy from memory.

Development

Some developers does not have personal macOS. We think this application might run on macOS without problem.

Prerequirement

• Docker
  • Install it as you like
• AWS SAM CLI
  • Install via AWS SAM
• pnpm
  • install npm install -g pnpm
  • or, other installation process that you used
• Rust
  • We recommend to use rustup to setup Rust.
• AWS CLI Setup

setup

# root
$ pnpm install

# setup rust
$ cd server
$ cargo

# setup cdk
$ cd server/cdk
$ pnpm install

Run application local

$ pnpm run start

# Run in other terminal
$ cd server/cdk
# only first time, or we recoomend you run when edit cdk file.
$ npx cdk synth --no-staging > template.yml
$ sam build
$ sam start local-api

Run CI

# Run wiremock before CI
docker run -it --net host --rm -p 8080:8080 -v (pwd)/e2e/fixture/wiremock:/home/wiremock --name wiremock \
        wiremock/wiremock:3.2.0 --enable-stub-cors

# Run all CI with headless browser
$ pnpm run it:run

# Run CI with playwright. To use developing test, debugging
$ pnpm run it:serve

Publish

Frontend

You should create src/env.prod.ts before.

import { Env } from "./models/env";

export const env: Env = {
  apiBaseUrl: "<URL of API Gateway>",
  apiKey: "<Generated from CDK deployment>",
};

Then, run publish command. If you want to publish preview channel, call publish:preview instead.

$ pnpm run publish:production

Server

$ cd server/cdk
$ npx cdk deploy