-
Notifications
You must be signed in to change notification settings - Fork 901
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(core/pipelines): Add execution breadcrumbs to the pipeline execu…
…tion component (#8462) * feat(core/pipelines) Adds breadcrumbs to executions that were kicked off by a different pipeline * Add a label, change breadcrumb icon, & get rid of unnecessary async/awaits. * Show single pipeline permalink even when there is no parent * Only show parent executions, not current one, and rename label. * Switch to using css instead of spaces for spacing. Add a comment. Don't exclude ExecutionBreadcrumbs component from re-renders. * fix(core/pipeline): restore handleParentPipelineClick linking behavior and restore BuildStatus indicator * chore(core/pipeline): restore imports order * fix(core/pipeline): Fix links to execution details * refactor(core/pipeline): Migrate to useCurrentStateAndParams() hook Co-authored-by: rodrigo-espinosa <rodrigo.espinosa@salesforce.com> Co-authored-by: Chris Thielen <github@sandgnat.com> Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
- Loading branch information
1 parent
91cceb3
commit 7271167
Showing
5 changed files
with
93 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
61 changes: 61 additions & 0 deletions
61
app/scripts/modules/core/src/pipeline/executions/execution/ExecutionBreadcrumbs.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
import React, { MouseEventHandler } from 'react'; | ||
import { useSref, useCurrentStateAndParams } from '@uirouter/react'; | ||
import ReactGA from 'react-ga'; | ||
|
||
import { ExecutionInformationService } from './executionInformation.service'; | ||
import { IExecution } from 'core/domain'; | ||
|
||
export interface IExecutionBreadcrumbsProps { | ||
execution: IExecution; | ||
} | ||
|
||
export const ExecutionBreadcrumbs = ({ execution }: IExecutionBreadcrumbsProps) => { | ||
const parentExecutions = React.useMemo(() => { | ||
return new ExecutionInformationService() | ||
.getAllParentExecutions(execution) | ||
.filter((x) => x !== execution) | ||
.reverse(); | ||
}, []); | ||
|
||
const label = parentExecutions.length === 1 ? 'Parent Execution' : 'Parent Executions'; | ||
|
||
return ( | ||
<div> | ||
<span>{label}: </span> | ||
{parentExecutions.map((execution, index, array) => ( | ||
<React.Fragment key={execution.id}> | ||
<ExecutionPermaLink execution={execution} /> | ||
{index !== array.length - 1 && <i className="fas fa-angle-right execution-breadcrumb-marker"></i>} | ||
</React.Fragment> | ||
))} | ||
</div> | ||
); | ||
}; | ||
|
||
function ExecutionPermaLink({ execution }: IExecutionBreadcrumbsProps) { | ||
const { application, id: executionId } = execution; | ||
const { state } = useCurrentStateAndParams(); | ||
|
||
const isProject = state.name.includes('.project.'); | ||
const executionDetails = `home.${isProject ? 'project.' : 'applications.'}application.pipelines.executionDetails`; | ||
const toState = executionDetails + '.execution'; | ||
const srefParams = { application, executionId }; | ||
const srefOptions = { reload: executionDetails }; | ||
const sref = useSref(toState, srefParams, srefOptions); | ||
|
||
const handleClick: MouseEventHandler<any> = (e) => { | ||
ReactGA.event({ category: 'Pipeline', action: 'Execution build number clicked - parent pipeline' }); | ||
sref.onClick(e); | ||
}; | ||
|
||
return ( | ||
<a | ||
href={sref.href} | ||
onClick={handleClick} | ||
style={{ display: 'inline' }} | ||
className="execution-build-number clickable" | ||
> | ||
{execution.name} | ||
</a> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters