How to use @jenkins-cd/design-language - 10 common examples

render() {
        const { runs = [], getTimes = x => x, locale, t } = this.props;

        if (!runs.length) {
            return null; // No placeholder for this, it shouldn't be rendered when there's no runs
        }

        const columns = [
            JTable.column(30, '', false), // Status
            JTable.column(60, '', false), // Run
            JTable.column(480, '', true), // Description
            JTable.column(150, '', false), // Duration
            JTable.column(100, '', false), // Completed
        ];

        const children = runs.map(run => {
            if (run.runDetails) {
                // We have populated info

                const runDetails = run.runDetails;
                const runResult = runDetails.result === 'UNKNOWN' ? runDetails.state : runDetails.result;
                const isRunning = runResult === 'RUNNING' || runResult === 'PAUSED' || runResult === 'QUEUED';

                const runDetailsUrl = UrlBuilder.buildRunUrlForDetails(runDetails);

                const { durationInMillis, estimatedDurationInMillis } = runDetails;

                const identifier = getRunIdentifier(runDetails);

value={decodedBranchName}
                onChange={this.navigateToBranch}
                options={pipeline.branchNames.map(b => decodeURIComponent(b))}
            />
        );

        // Build up our column metadata

        const columns = [JTable.column(60, status, false), JTable.column(60, runHeader, false), JTable.column(60, commit, false)];

        if (isMultiBranchPipeline) {
            columns.push(JTable.column(160, 'branches', false));
        }

        columns.push(
            JTable.column(480, message, true),
            JTable.column(100, duration, false),
            JTable.column(100, completed, false),
            JTable.column((actionExtensionCount + actionsInRowCount) * 24, '', false)
        );

        // Build main display table

        const runsTable = showTable && (
            
                
                    {status}
                    {runHeader}
                    {commit}
                    {isMultiBranchPipeline && {branchFilter}}
                    {message}
                    {duration}

render() {
        const { testCase, translation, locale = 'en' } = this.props;
        const duration = TimeDuration.format(testCase.duration * 1000, translation, locale);
        const showTestCase = testCase.errorStackTrace || testCase.errorDetails || testCase.hasStdLog;
        let statusIndicator = null;
        switch (testCase.status) {
            case 'FAILED':
                statusIndicator = StatusIndicator.validResultValues.failure;
                break;
            case 'PASSED':
                statusIndicator = StatusIndicator.validResultValues.success;
                break;
            case 'SKIPPED':
                statusIndicator = StatusIndicator.validResultValues.not_built;
                break;
            default:
                statusIndicator = StatusIndicator.validResultValues.unknown;
        }

        const onExpand = () => {
            this.setState({ isFocused: true, attemptedFetchForStdOutStdErr: true });
            if (!testCase._links) {
                return;
            }

render() {
        const { testCase, translation, locale = 'en' } = this.props;
        const duration = TimeDuration.format(testCase.duration * 1000, translation, locale);
        const showTestCase = testCase.errorStackTrace || testCase.errorDetails || testCase.hasStdLog;
        let statusIndicator = null;
        switch (testCase.status) {
            case 'FAILED':
                statusIndicator = StatusIndicator.validResultValues.failure;
                break;
            case 'PASSED':
                statusIndicator = StatusIndicator.validResultValues.success;
                break;
            case 'SKIPPED':
                statusIndicator = StatusIndicator.validResultValues.not_built;
                break;
            default:
                statusIndicator = StatusIndicator.validResultValues.unknown;
        }

const { result, t } = this.props;

        if (!result || !this.pager || this.pager.pendingD) {
            return null;
        }

        const { artifactsZipFile: zipFile } = result;
        const artifacts = this.pager.data;

        const nameLabel = t('rundetail.artifacts.header.name', { defaultValue: 'Name' });
        const sizeLabel = t('rundetail.artifacts.header.size', { defaultValue: 'Size' });
        const displayLabel =  t('rundetail.artifacts.button.display', { defaultValue: 'Display the artifact in new window' });
        const downloadLabel = t('rundetail.artifacts.button.download', { defaultValue: 'Download the artifact' });
        const openLabel = t('rundetail.artifacts.button.open', { defaultValue: 'Open the artifact' });

        const columns = [JTable.column(500, nameLabel, true), JTable.column(120, sizeLabel), JTable.column(50, '')];

        const rootURL = UrlConfig.getJenkinsRootURL();

        const artifactsRendered = artifacts.map(artifact => {
            const urlArray = artifact.url.split('/');
            const fileName = urlArray[urlArray.length - 1];
            logger.debug('artifact - url:', artifact.url, 'artifact - fileName:', fileName);

            let displayLink = null;
            let downloadLink = null;
            if (artifact.downloadable) {
                displayLink = (
                    <a href="{`${rootURL}${artifact.url}/*view*`}" title="{displayLabel}">
                        
                    </a>
                );

function pipelines() {

    const columns = [
        JTable.column(640, 'Name', true),
        JTable.column(70, 'Status'),
        JTable.column(70, 'Branches'),
        JTable.column(70, 'Pull Requests'),
        JTable.column(24, ''),
    ];

    let p1 = new PipelineRecord({
        displayName: 'moreBeersSuccess',
        name: 'morebeersSuccess',
        organization: 'jenkins',
        weatherScore: 0,
        branchNames: ['master'],
        numberOfFailingBranches: 0,
        numberOfFailingPullRequests: 0,
        numberOfSuccessfulBranches: 3,
        numberOfSuccessfulPullRequests: 3,
        totalNumberOfBranches: 3,
        totalNumberOfPullRequests: 3,
    });

const pipelines = this.pager.data;

        const orgLink = organizationName ? {organizationDisplayName} : '';

        const showPipelineList = pipelines && pipelines.length > 0;
        const showEmptyState = !this.pager.pending && !this.getSearchText() && (!pipelines || !pipelines.length);

        const labelName = translate('home.pipelineslist.header.name', { defaultValue: 'Name' });
        const labelHealth = translate('home.pipelineslist.header.health', { defaultValue: 'Health' });
        const labelBranches = translate('home.pipelineslist.header.branches', { defaultValue: 'Branches' });
        const labelPullReqs = translate('home.pipelineslist.header.pullrequests', { defaultValue: 'PR' });

        const columns = [
            JTable.column(640, labelName, true),
            JTable.column(70, labelHealth),
            JTable.column(70, labelBranches),
            JTable.column(70, labelPullReqs),
            JTable.column(actionExtensionCount * 24, ''),
        ];

        const pipelineRows =
            pipelines &&
            pipelines.map(pipeline => {
                const key = pipeline._links.self.href;
                return ;
            });

        this.props.setTitle('Jenkins');

        return (

function pipelines() {

    const columns = [
        JTable.column(640, 'Name', true),
        JTable.column(70, 'Status'),
        JTable.column(70, 'Branches'),
        JTable.column(70, 'Pull Requests'),
        JTable.column(24, ''),
    ];

    let p1 = new PipelineRecord({
        displayName: 'moreBeersSuccess',
        name: 'morebeersSuccess',
        organization: 'jenkins',
        weatherScore: 0,
        branchNames: ['master'],
        numberOfFailingBranches: 0,
        numberOfFailingPullRequests: 0,
        numberOfSuccessfulBranches: 3,
        numberOfSuccessfulPullRequests: 3,

function pipelines() {

    const columns = [
        JTable.column(640, 'Name', true),
        JTable.column(70, 'Status'),
        JTable.column(70, 'Branches'),
        JTable.column(70, 'Pull Requests'),
        JTable.column(24, ''),
    ];

    let p1 = new PipelineRecord({
        displayName: 'moreBeersSuccess',
        name: 'morebeersSuccess',
        organization: 'jenkins',
        weatherScore: 0,
        branchNames: ['master'],
        numberOfFailingBranches: 0,
        numberOfFailingPullRequests: 0,
        numberOfSuccessfulBranches: 3,
        numberOfSuccessfulPullRequests: 3,
        totalNumberOfBranches: 3,
        totalNumberOfPullRequests: 3,

import React from 'react';
import executorInfoService from './ExecutorInfoService';
import { observer } from 'mobx-react';
import { JTable, TableHeaderRow, TableRow, TableCell, StatusIndicator, Icon } from '@jenkins-cd/design-language';

const columns = [
    JTable.column(10, '', false),
    JTable.column(60, 'Computers', true),
];

@observer
export class ExecutorInfoPage extends React.Component {
    render() {
        return (
            
                
                {executorInfoService.computers && executorInfoService.computers.map(computer => [
                    
                        
                            
                        
                        
                            {computer.displayName}