File
Implements
Index
Properties
|
|
Methods
|
|
Inputs
|
|
Methods
Protected
loadJobs
|
loadJobs()
|
|
|
ngAfterViewInit
|
ngAfterViewInit()
|
|
|
curve
|
Type : any
|
Default value : shape.curveLinear
|
|
data
|
Type : object
|
Default value : {
nodes: [],
links: [],
}
|
|
graph
|
Decorators :
@ViewChild('graph', {static: true})
|
|
jobNameToId
|
Type : object
|
Default value : {}
|
|
view
|
Type : []
|
Default value : [800, 600]
|
|
import {
Component,
OnInit,
Input,
ElementRef,
AfterViewInit,
ViewChild,
} from '@angular/core';
import * as shape from 'd3-shape';
import * as _ from 'lodash';
import { Workflow, Job } from '../shared/workflow.model';
@Component({
selector: 'hi-workflow-dag',
templateUrl: './workflow-dag.component.html',
styleUrls: ['./workflow-dag.component.scss'],
})
export class WorkflowDagComponent implements OnInit, AfterViewInit {
@Input()
workflow: Workflow;
curve: any = shape.curveLinear;
view = [800, 600];
data = {
nodes: [],
links: [],
};
jobNameToId = {};
@ViewChild('graph', { static: true })
graph;
constructor(protected el: ElementRef) {}
ngOnInit() {
this.loadJobs();
}
ngAfterViewInit() {
// console.log(this.el);
// console.log(this.graph);
}
protected loadJobs() {
// process nodes
_.forEach(this.workflow.jobs, (job: Job) => {
const newId = (this.data.nodes.length + 1).toString();
this.data.nodes.push({
id: newId,
label: job.name,
description: job.rawName,
state: job.state,
});
this.jobNameToId[job.name] = newId;
});
// process edges/links
_.forEach(this.workflow.jobs, (job: Job) => {
_.forEach(job.parents, (parentName) => {
this.data.links.push({
source: this.jobNameToId[parentName],
target: this.jobNameToId[job.name],
});
});
});
}
}
<!--
~ Licensed to the Apache Software Foundation (ASF) under one
~ or more contributor license agreements. See the NOTICE file
~ distributed with this work for additional information
~ regarding copyright ownership. The ASF licenses this file
~ to you under the Apache License, Version 2.0 (the
~ "License"); you may not use this file except in compliance
~ with the License. You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing,
~ software distributed under the License is distributed on an
~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
~ KIND, either express or implied. See the License for the
~ specific language governing permissions and limitations
~ under the License.
-->
<ngx-graph
#graph
class="chart-container"
[view]="[(graph.graphDims.width * 2) / 3, graph.graphDims.height]"
[links]="data.links"
[nodes]="data.nodes"
[curve]="curve"
orientation="TB"
[autoZoom]="false"
[panningEnabled]="false"
[draggingEnabled]="false"
[minZoomLevel]="1"
[maxZoomLevel]="1"
>
<ng-template #defsTemplate>
<svg:marker
id="arrow"
viewBox="0 -5 10 10"
refX="8"
refY="0"
markerWidth="4"
markerHeight="4"
orient="auto"
>
<svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
</svg:marker>
</ng-template>
<ng-template #nodeTemplate let-node>
<svg:g
class="node"
ngx-tooltip
[tooltipPlacement]="'top'"
[tooltipType]="'tooltip'"
[tooltipTitle]="node.description"
>
<svg:rect
[attr.width]="node.width"
[attr.height]="node.height"
[attr.fill]="node.options.color"
/>
<svg:text
alignment-baseline="central"
[attr.x]="10"
[attr.y]="node.height / 2"
>
{{ node.label }}
</svg:text>
<svg:text
alignment-baseline="hanging"
[attr.x]="node.width - 100"
[attr.y]="node.height + 10"
[ngClass]="'state-default state-' + node.state"
>
{{ node.state }}
</svg:text>
</svg:g>
</ng-template>
<ng-template #linkTemplate let-link>
<svg:g class="edge">
<svg:path
class="line"
stroke-width="2"
marker-end="url(#arrow)"
></svg:path>
<svg:text class="edge-label" text-anchor="middle">
<textPath
class="text-path"
[attr.href]="'#' + link.id"
[style.dominant-baseline]="link.dominantBaseline"
startOffset="50%"
>
{{ link.label }}
</textPath>
</svg:text>
</svg:g>
</ng-template>
</ngx-graph>
@use '@angular/material' as mat;
.state-default {
fill: mat.get-color-from-palette(
mat.define-palette(mat.$deep-orange-palette)
);
}
.state-COMPLETED {
fill: mat.get-color-from-palette(mat.define-palette(mat.$green-palette));
}
.state-PENDING {
fill: mat.get-color-from-palette(mat.define-palette(mat.$grey-palette));
}
Legend
Html element with directive