Skip to content

Commit

Permalink
Merge pull request patternfly#246 from jeff-phillips-18/v6-updates
Browse files Browse the repository at this point in the history
feat(update): Cherry pick missing v5 updates into main
  • Loading branch information
dlabaj authored Oct 25, 2024
2 parents dab2de2 + 8759db1 commit b88e9eb
Show file tree
Hide file tree
Showing 25 changed files with 515 additions and 302 deletions.
122 changes: 87 additions & 35 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,61 +1,74 @@
# @patternfly/react-topology

This package provides Topology View components based on [PatternFly 4][patternfly-4]

Based from https://github.com/patternfly/patternfly-react version 4.91.40
# PatternFly Topology

### Prerequisites
This package provides the resources necessary to use PatternFly Topology, an open source utility that you can use to create a visual representation of all the applications within your project, their build status, and the components and services associated with them.

#### Node Environment
Topology utilizes some of PatternFly's React components https://github.com/patternfly/patternfly-react.

This project currently supports Node [Active LTS](https://github.com/nodejs/Release#release-schedule) releases. Please stay current with Node Active LTS when developing patternfly-react.
Documentation for Topology and its features is available on [the PatternFly website.](www.patternfly.org/topology/about-topology)

For example, to develop with Node 8, use the following:
## Table of contents
- [Prerequisites](#prerequisites)
- [Installing Topology](#installing-topology)
- [Initial setup and usage](#initial-setup-and-usage)
- [Example](#example)
- [Demo app](#demo-app)

```
nvm install 8
nvm use 8
```
## Prerequisites

This project also requires a Yarn version of >=1.6.0. The latest version can be installed [here](https://yarnpkg.com/).
To use Topology, you will need to have both [Node Active LTS](https://github.com/nodejs/Release#release-schedule) and [Yarn](https://yarnpkg.com/) installed.

### Installing
1. Install and develop with the most up-to-date version of Node Active LTS. For example, to develop with Node 8, you would use the following commands:

```
yarn add @patternfly/react-topology
```
```
nvm install 8
nvm use 8
```
1. Install and use version 1.6.0 or later of Yarn.
or
## Installing Topology
```
npm install @patternfly/react-topology --save
```
Once you have all of the prequisites, you can install the Topology package with Yarn or npm:
1. Using Yarn:
## Basic Usage
```
yarn add @patternfly/react-topology
```
1. Using npm:
To use React Topology out-of-the-box, you will first need to transform your back-end data into a [Model](https://github.com/patternfly/patternfly-react/blob/main/packages/react-topology/src/types.ts#L16-L20). These model objects contain the information needed to display the nodes and edges. Each node and edge has a set of properties used by PF Topology as well as a data field which can be used to customize the nodes and edges by the application.
```
npm install @patternfly/react-topology --save
```
You will then need to declare a controller, which can be initialized via the `useVisualizationController()` method.
## Initial setup and usage
The `fromModel` method must be called on the controller to create the nodes. `fromModel` will take your data model as a parameter. Your data model should include a `graph` object, on which you will need to set `id` , `type` and `layout`.
To use Topology out of the box, follow these steps:
To create your topology view component, you can use `TopologyView` to Wrap `<VisualizationSurface>` which can accept `state` as a parameter. The state is application specific. It can be any data the application wants to store/retrieve from the controller. Adding state to the surface allows hooks to update when state changes. The state is useful to keep graph state such as selected elements.
1. First transform your back-end data into a [Model](https://github.com/patternfly/react-topology/blob/main/packages/module/src/types.ts) object. This will contain the information needed to display the nodes and edges in your Topology view. Each node and edge contains a set of properties used by Topology, as well as a data field, which Topology can be used to customize the nodes and edges.
Use a controller to wrap your topology view component. In the example below, this is done via the `VisualizationProvider` which consumes the `Controller` via context.
1. Declare a controller, which can be initialized via the `useVisualizationController()` method.
Three `register` methods are accessed by the controller.
1. Create nodes by calling the `fromModel` method on the controller you initialized. `fromModel` will take the `Model` that you created as a parameter. Your data model should include a `graph` object, on which you will need to set `id` , `type`, and `layout`.
The following two must be declared explicitly\:
1. To create your Topology view component, wrap `TopologyView` around `<VisualizationSurface>`, which can accept a `state` parameter.
- The value of state is application specific and should include any data the application wants to store/retrieve from the controller.
- Adding state to `<VisualizationSurface>` allows hooks to update when state changes.
- State can also be used to keep track of your graph state, such as selected elements.
- `registerLayoutFactory`\: This method sets the layout of your topology view (e.g. Force, Dagre, Cola, etc.). You can use `defaultLayoutFactory` as a parameter if your application supports all layouts. You can also update `defaultLayout` to a custom implementation if you only want to support a subset of the available layout options.
1. Wrap your `TopologyView` with your controller. In the example below, this is done via the `VisualizationProvider` which consumes the `Controller` via context.
- `registerComponentFactory`\: This method lets you customize the components in your topology view (e.g. nodes, groups, and edges). You can use `defaultComponentFactory` as a parameter.
1. There are 3 `register` methods that the controller accesses.
The register method below is initialized in `Visualization.ts`, therefore it doesn't need to be declared unless you want to support a custom implementation which modifies the types.
These 2 must be declared explicitly:
- `registerElementFactory`\: This method sets the types of the elements being used (e.g. graphs, nodes, edges). `defaultElementFactory` uses types from `ModelKind` and is exported in `index.ts`.
1. **`registerLayoutFactory`:** Sets the layout of your topology view (e.g. Force, Dagre, Cola, etc.). You can use `defaultLayoutFactory` as a parameter if your application supports all layouts. You can also update `defaultLayout` to a custom implementation if you only want to support a subset of the available layout options.
1. **`registerComponentFactory`:** Lets you customize the components in your topology view (e.g. nodes, groups, and edges). You can use `defaultComponentFactory` as a parameter.
The remaining method is initialized in `Visualization.ts`, so it doesn't need to be declared unless you want to support a custom implementation that modifies the types:
#### Example Component Usage
3. **`registerElementFactory`:** Sets the types of the elements being used (e.g. graphs, nodes, edges). `defaultElementFactory` uses types from `ModelKind` and is exported in `index.ts`.
## Example
```ts
import * as React from 'react';
Expand Down Expand Up @@ -185,3 +198,42 @@ export const TopologyBaselineDemo = React.memo(() => {
});
```

## Demo app

To help you better understand and visualize the different Topology components, we have created an interactive demo, [which is contained here.](https://github.com/patternfly/react-topology/tree/main/packages/demo-app-ts)

Continue reading for instructions on how to build and run the demo app.

### Prerequisites

In order to run the demo app, you need to make sure the following prerequisites are met.

1. Make sure that you have yarn installed, as outlined in [the general Topology prerequisites.](#prerequisites)
1. If you haven’t already, [fork the Topology project.](https://github.com/patternfly/react-topology)

### Running the demo app

Once you’ve set up the prerequisites, you can follow these steps to run the docs workspace or the demo app on your local machine

1. In a terminal, type the following commands to start the docs workspace:

```
yarn install
yarn start
```

2. In a terminal, type the following commands to navigate to demo-app-ts and launch the demo app:

```
cd packages/demo-app-ts
yarn start:demo-app:hot
```

3. You will receive a message confirming that the app is running. To view the locally running workspace, visit http://localhost:8008/.

4. Explore the demo app in your browser:

![Demo app landing page.](packages/module/patternfly-docs/content/examples/img/topology-demo-app.png)

## Need help?
If you find a bug, have a request, or have any questions about Topology that aren't answered in our documentation, please [reach out to us on Slack.](https://patternfly.slack.com/archives/CK7URGJ2W)
50 changes: 50 additions & 0 deletions packages/demo-app-ts/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
# Topology demo app

To help you better understand and visualize the different Topology components, we have created an interactive demo, [which is contained here.](https://github.com/patternfly/react-topology/tree/main/packages/demo-app-ts)

Continue reading for instructions on how to build and run the demo app.

### Prerequisites

In order to run the demo app, you need to make sure the following prerequisites are met.

1. Make sure that you have yarn installed, as outlined in [the general Topology prerequisites.](#prerequisites)
1. Make sure that you have the PatternFly React library installed. [Follow these instructions if you need to install this package.](https://github.com/patternfly/patternfly-react?tab=readme-ov-file#install-and-configure-patternfly-react)
1. If you haven’t already, clone [the Topology project](https://github.com/patternfly/react-topology) and navigate to your local directory:

```
git clone https://github.com/patternfly/react-topology.git
cd react-topology
```

### Running the demo app

Once you’ve set up the prerequisites, you can follow these steps to run the demo app on your local machine

1. In a terminal, type the following commands to start the docs workspace:

```
yarn install
yarn start
```

2. In a separate terminal window, type the following commands to navigate to demo-app-ts and launch the demo app:

```
cd packages/demo-app-ts
yarn start:demo-app:hot
```

3. You will receive a message confirming that the app is running, as well the URL that you can enter in your browser to load the app:

```
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:3000/
```

4. Explore the demo app in your browser:

![Demo app landing page.](packages/module/patternfly-docs/content/examples/img/topology-demo-app.png)

## Need help?
If you find a bug, have a request, or have any questions about Topology that aren't answered in our documentation, please [reach out to us on Slack.](https://patternfly.slack.com/archives/CK7URGJ2W)
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
RunStatus,
TaskGroupPillLabel
} from '@patternfly/react-topology';
import { BanIcon } from '@patternfly/react-icons';
import { DEFAULT_TASK_HEIGHT, GROUP_TASK_WIDTH } from './createDemoPipelineGroupsNodes';

type DemoTaskGroupProps = {
Expand Down Expand Up @@ -43,12 +44,18 @@ const DemoTaskGroup: React.FunctionComponent<DemoTaskGroupProps> = ({ element, .
collapsible
collapsedWidth={GROUP_TASK_WIDTH}
collapsedHeight={DEFAULT_TASK_HEIGHT}
GroupLabelComponent={TaskGroupPillLabel}
GroupLabelComponent={(props) => (
<TaskGroupPillLabel
{...props}
customStatusIcon={data.status === RunStatus.Cancelled ? <BanIcon /> : undefined}
/>
)}
element={element as Node}
centerLabelOnEdge
recreateLayoutOnCollapseChange
getEdgeCreationTypes={getEdgeCreationTypes}
scaleNode={hover && detailsLevel !== ScaleDetailsLevel.high}
customStatusIcon={data.status === RunStatus.Cancelled ? <BanIcon /> : undefined}
showLabelOnHover
hideDetailsAtMedium
showStatusState
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@ import {
DEFAULT_LAYER,
GraphElement,
Layer,
RunStatus,
ScaleDetailsLevel,
TaskNode,
TOP_LAYER,
useHover,
WithContextMenuProps,
WithSelectionProps
} from '@patternfly/react-topology';
import { BanIcon } from '@patternfly/react-icons';

type DemoTaskNodeProps = {
element: GraphElement;
Expand All @@ -31,6 +33,7 @@ const DemoTaskNode: React.FunctionComponent<DemoTaskNodeProps> = ({ element, ...
showStatusState
status={data.status}
hideDetailsAtMedium
customStatusIcon={data.status === RunStatus.Cancelled ? <BanIcon /> : undefined}
{...rest}
/>
</g>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ export const createExecution3 = (runAfter?: string): [string, PipelineNodeModel[
},
runAfterTasks: [task_3_1.id],
data: {
status: RunStatus.Succeeded,
status: RunStatus.Cancelled,
isDependency: true
}
};
Expand Down Expand Up @@ -294,7 +294,7 @@ export const createExecution3 = (runAfter?: string): [string, PipelineNodeModel[
padding: [NODE_PADDING_VERTICAL, NODE_PADDING_HORIZONTAL]
},
data: {
status: RunStatus.Succeeded,
status: RunStatus.Cancelled,
isDependency: true
}
};
Expand Down
106 changes: 106 additions & 0 deletions packages/module/patternfly-docs/content/examples/AboutTopology.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
---
id: About Topology
section: topology
sortValue: 1
sourceLink: https://github.com/patternfly/react-topology/blob/main/packages/module/patternfly-docs/content/examples/TopologyGettingStartedDemo.tsx
propComponents: ['VisualizationProvider', 'VisualizationSurface']
---

import {
ColaLayout,
DefaultEdge,
DefaultGroup,
DefaultNode,
EdgeStyle,
GraphComponent,
ModelKind,
NodeShape,
SELECTION_EVENT,
Visualization,
VisualizationProvider,
VisualizationSurface
} from '@patternfly/react-topology';
import Icon1 from '@patternfly/react-icons/dist/esm/icons/regions-icon';
import Icon2 from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';

import './topology-example.css';

# Introduction

**Note:** Topology lives in its own package at [`@patternfly/react-topology`](https://www.npmjs.com/package/@patternfly/react-topology).

PatternFly's **Topology** is an open source utility built off of [@patternfly/react-core](https://www.npmjs.com/package/@patternfly/react-core) that you can use to create a visual representation of all the applications within your project, their build status, and the components and services associated with them. Creating these visuals can help document and communicate the intricacies of the processes behind your product.

To create a Topology view for your application, you can create a simple layout of nodes, which represents your data points, and connecting edges, which represent the relationships between nodes. Beyond this basis, you can continue to customize and enhance your Topology view to fit the specific needs of your application.

## Prerequisites

To use Topology, you will need to have both [Node Active LTS](https://github.com/nodejs/Release#release-schedule) and [Yarn](https://yarnpkg.com/) installed.

1. Install and develop with the most up-to-date version of Node Active LTS. For example, to develop with Node 8, you would use the following commands:

```
nvm install 8
nvm use 8
```
2. Install and use version 1.6.0 or later of Yarn.
## Installing Topology
Once you have all of the prequisites, you can install the Topology package with Yarn or npm:
1. Using Yarn:
```
yarn add @patternfly/react-topology
```
2. Using npm:
```
npm install @patternfly/react-topology --save
```
## Initial setup and usage
To use Topology out of the box, follow these steps:
1. First transform your back-end data into a [Model](https://github.com/patternfly/react-topology/blob/main/packages/module/src/types.ts) object. This will contain the information needed to display the nodes and edges in your Topology view. Each node and edge contains a set of properties used by Topology, as well as a data field, which Topology can be used to customize the nodes and edges.
1. Declare a controller, which can be initialized via the `useVisualizationController()` method.
1. Create nodes by calling the `fromModel` method on the controller you initialized. `fromModel` will take the `Model` that you created as a parameter. Your data model should include a `graph` object, on which you will need to set `id` , `type`, and `layout`.
1. To create your Topology view component, wrap `TopologyView` around `<VisualizationSurface>`, which can accept a `state` parameter.
- The value of state is application specific and should include any data the application wants to store/retrieve from the controller.
- Adding state to `<VisualizationSurface>` allows hooks to update when state changes.
- State cam also be used to keep track of your graph state, such as selected elements.
1. Wrap your `TopologyView` with your controller. In the example below, this is done via the `VisualizationProvider` which consumes the `Controller` via context.
1. There are 3 `register` methods that the controller accesses.
These 2 must be declared explicitly:
1. **`registerLayoutFactory`:** Sets the layout of your topology view (e.g. Force, Dagre, Cola, etc.). You can use `defaultLayoutFactory` as a parameter if your application supports all layouts. You can also update `defaultLayout` to a custom implementation if you only want to support a subset of the available layout options.
1. **`registerComponentFactory`:** Lets you customize the components in your topology view (e.g. nodes, groups, and edges). You can use `defaultComponentFactory` as a parameter.
The remaining method is initialized in `Visualization.ts`, so it doesn't need to be declared unless you want to support a custom implementation that modifies the types:
3. **`registerElementFactory`:** Sets the types of the elements being used (e.g. graphs, nodes, edges). `defaultElementFactory` uses types from `ModelKind` and is exported in `index.ts`.
1. Create nodes by calling the `fromModel` method on the controller. `fromModel` will take your data model as a parameter. Your data model should include a `graph` object, on which you will need to set `id` , `type`, and `layout`.
1. To create your topology view component, add a `<VisualizationProvider>`, which is a useful context provider. It allows access to the created controller and is required when using the `<VisualizationSurface>` component.
1. Use `<VisualizationSurface>` to provide the SVG component required for your topology components. `<VisualizationSurface>` can take a state parameter, which enables you to pass your state settings to the controller.
## Demo app
To help you better understand and visualize the different Topology components, we have created an interactive demo, [which is contained in the react-topology repository.](https://github.com/patternfly/react-topology/tree/main/packages/demo-app-ts)
You can run the demo app [by following these instructions.](https://github.com/patternfly/react-topology?tab=readme-ov-file#demo-app)
### Example
```ts file='./TopologyGettingStartedDemo.tsx'
```
Loading

0 comments on commit b88e9eb

Please sign in to comment.