Forem: amycutlip

Customize Jira's Advanced Planning Tool for Multiple Teams & Projects

amycutlip — Tue, 10 Sep 2024 15:40:04 +0000

Jira’s Advanced Planning tool (the artist formerly known as Advanced Roadmaps) allows users to manage work across multiple projects, products, and teams. However, if you try to use Advanced Planning at scale, it is impossible to set up plans that give each organizational unit what it needs—a plan that shows their work and how it relates to other teams' work.

We’ve created PlanWeaver, a handful of open source Jira automations that give projects, products, and teams the ability to separate and report on the work of each unit or team involved in their program.

In this article, you’ll learn why PlanWeaver is necessary for managing advanced plans at scale and how to implement the automations that make reporting on programs easier and more intuitive.

Why is PlanWeaver needed?

In most large organizations, multiple projects, products, and teams coordinate in various ways. In this article, we’ll use a fictional restaurant technology company called FastCo to illustrate how PlanWeaver can improve clarity within an organization.

In our example, FastCo has multiple products serviced by multiple teams:

FastCo’s products and teams need to support multiple projects, programs, and initiatives that can vary in size and complexity. FastCo has multiple simultaneous implementation programs: Good Burger and Sunny Sushi. Each program contains initiatives that need to be completed by various teams:

Out of the box, Advanced Planning doesn’t provide an easy way to visualize all projects on a team or program level.

Team Level

A team wants to see all the projects they are involved in and the other teams in those projects (so dependencies can be mapped).

The image below shows all the initiatives that the Order team is involved in, as well as the work of other teams in those initiatives.

Program Level

A program wants to see all work within the program, across all of the program's initiatives. The image below shows Sunny Sushi’s work plan; a view not easily available out of box.

The PlanWeaver automations simplify the creation of complex plans by tagging issues. These tags allow you to build the plans as shown above.

Program-level views with Parent Tags

Enter Parent and Child Tags. The PlanWeaver automations add two fields to issues that are Epic or higher in the issue hierarchy:

Parent Tags - The project key of all parent issues of the current issue
Child Tags - The project key of all children of the current issue (and the project key of epic siblings)

Let's see how PlanWeaver’s tags work individually to create useful plans.

Program-level views with Parent Tags

Parent Tags help you build a program or project-level view. Every child of a higher-order issue is tagged with that issue’s project key.

In the image below, Parent Tags allow users to see all of the work related to the Good Burger program. We can see multiple initiatives and their related epics across various teams. Simply querying by the parent tag allows a user to see an organized view of the work planned for the program.

Use the following filter for this Advanced Timeline Plan view:

"Parent Tags[Labels]" = GOODBURGER or project = "Good Burger"

There are two automation files for Parent Tags: one that updates Parent Tags when an issue is changed, and one that populates the Parent Tags in parent issues.

⬇️ Download JSON file

Team views with Child Tags

Child Tags help you build a view of not only a team’s work but also related work from other projects. Child tags improve the Advanced Plans view when a single team has work across multiple programs or projects and needs a way to view it all along with the dependencies.

Below is a view for the Order team, displaying not only the work for the team across multiple initiatives but also the work from other teams that may have dependencies with the Order team’s work:

Use the following filter for this Advanced Timeline Plan view:

"Child Tags[Labels]" = ORDER

There are three JSON files for Child Tags: one to update Child Tags when a parent issue is changed, another to update Child Tags when an issue is moved, and a final automation to update a parent issue's tags when Child Tags change.

⬇️ Download JSON file

Conclusion

Out of the box, it's a challenge to use Jira’s Advanced Planning at an enterprise scale. With our open source PlanWeaver add-on, Advanced Planning becomes more useful for teams to view their work across programs. Adding Epic-level tags enhances reporting and allows program managers and teams to view their work—and how their work impacts other teams—more intuitively.

At Bitovi, we focus on helping our clients make the right decisions for their products and company. Developing new ways to view work, like our PlanWeaver automation, is another way we’re working to perfect product delivery. We’ll have another post soon walking through how to import and use the PlanWeaver automations. In the meantime, be sure to join our Community Discord for support and inspiration. Happy planning!

Protect Your Business from IT Disasters: Lessons from the CrowdStrike Outage

amycutlip — Thu, 25 Jul 2024 19:32:26 +0000

Businesses heavily rely on IT infrastructure for smooth operations and security, but what happens when that infrastructure breaks? Thousands of companies were blindsided by a sudden CrowdStrike outage on Friday, July 19th, leading to a projected cost of $1 Billion. With an estimated 8.5 million devices impacted by the outage, over 5,000 canceled flights, and hundreds of hospital computer systems offline, you’re probably wondering: What can I do to prevent a CrowdStrike-level business disruption?

In this blog, you’ll learn the business impacts of IT disasters, how to prevent them, and the steps you can take today to protect your organization from similar threats.

Up first: Who is Bitovi?

Bitovi is a digital product consultancy dedicated to perfecting product delivery. We’ve provided Quality Engineering Consulting to businesses of all sizes—from lean startups to Fortune 500 enterprises. We write about improving software engineering and delivery practices.

Learn more about Bitovi’s digital consulting services.

Business disruptions and financial losses from IT outages

The CrowdStrike outage serves as a wake-up call to businesses about the severe disruptions that IT failures can cause. Financial losses, operational disruptions, and reputation damage—when critical IT infrastructure fails, the ripple effects can be vast and costly.

Financial losses from IT disasters like the CrowdStrike outage

During the CrowdStrike outage, businesses faced immediate operational challenges. With over 8.5 million devices affected globally, revenue loss during the downtime period was a severe blow to many companies' financial health.

The estimated $1 billion cost reflects not only lost productivity but also the emergency IT remediation efforts required to address the outage. Businesses had to bear the costs associated with restoring operations, including overtime payments to IT staff and, in some cases, hiring specialized consultants.

The financial impacts of IT disruptions are overwhelming, but there is a way forward. Investing in a robust Quality Engineering practice allows organizations to prevent significant disruptions and address them quickly if they do occur.

“In light of the CrowdStrike outage, investing in Quality Engineering is essential. It helps prevent disruptions and ensures quick recovery, minimizing financial losses and protecting business reputation,” says Bitovi’s Director of Quality Engineering Consulting, Denison Luz.

Operational disruptions caused by IT outages

On a human level, the operational disruptions were more devastating than the financial impacts. Industries that depend on real-time data and continuous operations, like airlines, healthcare, and banking, were particularly hard hit. The outage led to the cancellation of over 5,000 flights, causing widespread travel chaos and leaving passengers stranded in airports worldwide. Hospitals struggled to maintain patient care as critical computer systems went offline, forcing staff to revert to manual processes prone to errors and inefficiencies. The impact on patient safety and care quality was a stark reminder of how dependent modern healthcare systems are on reliable IT infrastructure.

[nurse quote, verifying with sources]

These disruptions underscored the need for robust and resilient IT systems that can withstand unexpected failures. Quality Engineering establishes safeguards like regression testing, which ensures new updates are compatible with older systems, keeping systems online and providing critical services.

Reputation damage caused by IT infrastructure failures

Reputation damage is another critical aspect that businesses must consider. For businesses, trust is paramount. An outage that compromises security or disrupts services can erode customer confidence and damage a company’s reputation. The long-term impact on customer trust can be even more damaging than the immediate financial losses. Companies that experience significant outages often face backlash from customers and negative media coverage, which can take years to recover from.

The CrowdStrike outage is a potent reminder that IT resilience is not just a technical issue but a critical business priority. Ensuring that your IT systems are robust and capable of withstanding failures can protect your business from severe financial losses and operational disruptions. It is essential for business leaders to prioritize Quality Engineering and proactive measures to safeguard their organizations against similar threats. Not sure where to start? It’s not too late to preserve your reputation for quality—Bitovi’s Quality Engineering Consultants are available to help enhance your testing practices.

Implementing Quality Engineering to prevent IT outages

People sleeping in airports, plunging stock prices, healthcare disruptions—the CrowdStrike outage made waves beyond the tech industry, affecting millions of businesses and individuals worldwide.

Establishing robust IT infrastructure and proactive measures to prevent such disasters has never been more important. Businesses must recognize the vulnerabilities in their systems and the need for continuous monitoring and quality engineering to ensure resilience.

Investing in advanced Quality Engineering practices and implementing regular quality checks can help in identifying potential points of failure before they lead to significant disruptions. Moreover, having a well-defined incident response plan can mitigate the impact when an outage does occur. Proactive measures like stress testing systems and regular drills can prepare businesses to handle unexpected IT failures more effectively, minimizing downtime and associated costs.

Bitovi can help establish the safeguards to protect your business from IT disruptions. Contact our Quality Engineering Consulting experts for a free consultation.

Meet React to Web Component (R2WC) v2

amycutlip — Tue, 06 Jun 2023 15:03:00 +0000

Greetings, dev community! The highly-anticipated release of the new R2WC (react-to-web-component) API is here! We have been thrilled by the level of adoption version 1.0 has attained within the developer community. You have provided great feedback in our Discord and GitHub issues on your pain points and the ways in which we can improve R2WC. And we listened!

What is R2WC?

React to Web Component is the best way to encapsulate React components into standalone Web Components. It lets you use React anywhere! React to Web Component is especially useful for microfrontends and dropping React code into otherwise static sites.

Gone are the days of redeveloping components for the web. Now you can wrap any component from your React component library and use it in any project that uses HTML, regardless of its framework or library.

Updates and New Features

Let’s get to the good stuff! Check out the new features in R2WC v2.

TypeScript Support
Simplified API
Improved Syncing
New npm Namespace
Continued Support for React 16, 17, and 18

TypeScript Support

We are elated to announce that R2WC has full TypeScript support! TypeScript has cemented itself as a staple in the dev community thanks to its enhanced type safety. Now you’ll be able to see warnings and make changes to your React components accordingly.

Simplified API

In R2WC v1, you had to pass in an instance of React and ReactDOM to the function call. Not anymore! We have added React and ReactDOM as peer dependencies for R2WC, with support for v16, 17, and 18 for React and ReactDOM. Now you can get started using R2WC even faster.

Here’s how calling R2WC worked in v1:

import React from "react"
import ReactDOM from "react-dom/client" // if using React 18
// import ReactDOM from "react-dom" // if using React 17

import r2wc from "react-to-webcomponent"

const WebGreeting = r2wc(Greeting, React, ReactDOM)

customElements.define("web-greeting", WebGreeting)

And here's how calling R2WC works in v2! It's that simple:

import r2wc from "@r2wc/react-to-web-component"

const WebGreeting = r2wc(Greeting)

customElements.define("web-greeting", WebGreeting)

Improved Syncing

One of the most common issues reported to us about R2WC version 1.0 is that props were not being accepted by the created web component in production. This is because propTypes are generally removed from a React project when it is built for production.

We are happy to announce that the internal functionality of R2WC no longer depends on propTypes! Instead, we have given you two ways to pass props to R2WC—as an array of prop names as strings or an object with key-value pairs being your prop names and their corresponding types.

import r2wc from '@r2wc/react-to-web-component'

type GreetingProps = {
  name: string;
}

const Greeting: FC<GreetingProps> = ({ name }) => {
  return <h2> Hello, { name } </h2>;
}


// Recommended
const GreetingWebComponent = r2wc(Greeting, { props: { name: "string" }})

// OR for simpler needs
/*
const GreetingWebComponent = r2wc(Greeting, { props: ["name"] })
*/

customElements.define('greeting-wc', GreetingWebComponent)

R2WC now takes two parameters—a ReactComponent and an options object. The options object has two keys - shadow and props. The shadow key can be one of two values - “open" | "closed" - while the props key can either be an array of strings representing your prop names or an object with key-value pairs of your props and their types.

Note: If the props option is passed in as an array of prop names, R2WC will treat all these props as strings. If passed in as an object, the keys represent the names of your props (camel cased), and the values can be one of "string" | "number" | "boolean" | "function" | "json".

Here's an example of how the new props option works in R2WC v2:

import r2wc from '@r2wc/react-to-web-component'

type ListProps = {
  title: string
  items: string[]
}

const SimpleList: FC<ListProps> = ({ title, items }) => {
  return (
    <>
      <h3>{title}</h3>
      <ul>
        {items.map((item) => {
          return <li>{item}</li> 
        })}
      </ul>
    </>
  )
}

const ListWC = r2wc(SimpleList, { 
    props: { title: "string", items: "json" }, 
    shadow: "open"
  })

customElements.define("my-list", ListWC);

/* in your index.html */

<my-list title="hobbies" items="['swimming', 'coding', 'reading blogs']"></my-list>

New npm Namespace

The new version of R2WC lives in a new namespace on npm called '@r2wc/react-to-web-component' and utilizes another package called '@r2wc/core', which contains the meat of the functionality for the new version.

Our legacy version will still live in the namespace 'react-to-webcomponent' on npm and will also receive an update to utilize the new core. This means that it will also receive TypeScript support, freedom from propType issues, and benefit from the new syncing mechanism between attributes, properties, and props. However, to avoid breaking your current codebase, the legacy 'react-to-webcomponent' package will still take React and ReactDOM as parameters. See type definition below.

function r2wc<Props>(ReactComponent: React.ComponentType<Props>, React: ReactType, ReactDOM: ReactDOMRootType | ReactDOMRenderType, options?: R2WCOptions<Props>): CustomElementConstructor

Continued Support for React 16, 17, and 18

The new R2WC API from '@r2wc/react-to-web-component' will support the current version of React (v18 as of the writing of this article) and versions 16 and 17.

Our new package has been released in two versions. If you’re using React 16 or 17, you should use v1, 'react-to-webcomponent'. This version utilizes React’s older rendering API for mounting your ReactComponent to the web component.

If you’re on React 18, you can use v2 namespace '@r2wc/react-to-web-component' and utilize React’s newer mounting mechanism of first creating a root container that then renders the ReactComponent.

Try React to Web Component yourself!

We are excited to have you all start using our new API and look forward to your feedback. Head on over to our CodeSandbox to play with R2WC. Happy coding! 😁

What do you think?

Drop into our Community Discord and let us know what you think of React to Web Component v2. We’d love to hear your thoughts, help you troubleshoot, and see what you’re working on!