How to use @jenkins-cd/blueocean-core-js - 10 common examples

fetch(url, fetchOptions) {
        return Fetch.fetchJSON(url, { fetchOptions })
            .then(data => capabilityAugmenter.augmentCapabilities(data))
            .catch(error => {
                const responseBody = error.responseBody;
                if (responseBody && responseBody.code && responseBody.message) {
                    ToastService.newToast({
                        style: 'error',
                        caption: t('Favoriting Error'),
                        text: t(responseBody.message),
                    });
                }
                console.error(error); // eslint-disable-line no-console
            });
    }

}

        const { t, locale, runnable } = this.props;

        // Required props
        if (!t) {
            PipelineCard.logger.error('PipelineCard requires translate function as "t" prop.');
            return null;
        }

        const latestRun = runnable.latestRun;

        const isBranch = capable(runnable, BRANCH_CAPABILITY);
        const names = extractNames(runnable, isBranch);
        const organizationName = runnable.organization;
        const organizationDisplayName = organizationName === AppConfig.getOrganizationName() ? AppConfig.getOrganizationDisplayName() : organizationName;
        const fullDisplayName = isBranch
            ? runnable.fullDisplayName
                  .split('/')
                  .slice(0, -1)
                  .join('/')
            : runnable.fullDisplayName;

        let status;
        let startTime = null;
        let estimatedDuration = null;
        let commitId = null;

        if (latestRun) {
            status = latestRun.result === 'UNKNOWN' ? latestRun.state : latestRun.result;
            startTime = latestRun.startTime;
            estimatedDuration = latestRun.estimatedDurationInMillis;

import React, { Component, PropTypes } from 'react';
import { PipelineGraph } from '@jenkins-cd/design-language';
import { TimeManager, i18nTranslator, logging } from '@jenkins-cd/blueocean-core-js';

const timeManager = new TimeManager();
const { array, any, func, object, string } = PropTypes;
const logger = logging.logger('io.jenkins.blueocean.dashboard.PipelineRunGraph');
const translate = i18nTranslator('blueocean-web');

function badNode(jenkinsNode) {
    // eslint-disable-next-line
    console.error('Malformed / missing Jenkins run node:', jenkinsNode);
    return new Error('convertJenkinsNodeDetails: malformed / missing Jenkins run node.');
}

function convertJenkinsNodeDetails(jenkinsNode, isCompleted, skewMillis = 0) {
    if (!jenkinsNode
        || !jenkinsNode.id) {
        throw badNode(jenkinsNode);
    }
    logger.debug('jenkinsNode', jenkinsNode);
    const isRunning = () => {
        switch (jenkinsNode.state) {

render() {
        if (!this.props.runnable) {
            return null;
        }

        const { t, locale, runnable } = this.props;

        // Required props
        if (!t) {
            PipelineCard.logger.error('PipelineCard requires translate function as "t" prop.');
            return null;
        }

        const latestRun = runnable.latestRun;

        const isBranch = capable(runnable, BRANCH_CAPABILITY);
        const names = extractNames(runnable, isBranch);
        const organizationName = runnable.organization;
        const organizationDisplayName = organizationName === AppConfig.getOrganizationName() ? AppConfig.getOrganizationDisplayName() : organizationName;
        const fullDisplayName = isBranch
            ? runnable.fullDisplayName
                  .split('/')
                  .slice(0, -1)
                  .join('/')
            : runnable.fullDisplayName;

        let status;
        let startTime = null;
        let estimatedDuration = null;
        let commitId = null;

        if (latestRun) {

// @flow

import React, { Component, PropTypes } from 'react';
import type { PipelineInfo, StageInfo } from '../../services/PipelineStore';
import { isValidEnvironmentKey } from '../../services/PipelineValidator';
import idgen from '../../services/IdGenerator';
import { Dropdown } from '@jenkins-cd/design-language';
import { Split } from './Split';
import { TextInput } from '@jenkins-cd/design-language';
import { getAddIconGroup, getDeleteIconGroup } from './common';
import focusOnElement from './focusOnElement';
import InputText from './InputText';
import { ValidationMessageList } from './ValidationMessageList';
import { i18nTranslator } from '@jenkins-cd/blueocean-core-js';

const t = i18nTranslator('blueocean-pipeline-editor');

type Props = {
    node: PipelineInfo | StageInfo,
    onChange: (environment: Object[]) => any,
};

type State = {
    pristine: ?any,
};

type DefaultProps = typeof EnvironmentConfiguration.defaultProps;

const iconRadius = 10;
function addIcon() {
    return (
        <svg height="{iconRadius" width="{iconRadius"></svg>

import rootReducer, { ACTION_TYPES } from './redux/router';
import Config from './config';
import { ToastDrawer } from './components/ToastDrawer';
import { BackendConnectFailure } from './components/BackendConnectFailure';
import { DevelopmentFooter } from './DevelopmentFooter';
import { useStrict } from 'mobx';
import { Icon } from '@jenkins-cd/design-language';
import ErrorUtils from './ErrorUtils';

useStrict(true);

const LOGGER = logging.logger('io.jenkins.blueocean.web.routing');

let config; // Holder for various app-wide state

const translate = i18nTranslator('blueocean-web');

// Show link when only when someone is logged in...unless security is not configured,
// then show it anyway.
const AdminLink = props => {
    const { t } = props;

    const user = User.current();
    const showLink = !Security.isSecurityEnabled() || (user && user.isAdministrator);

    if (showLink) {
        var adminCaption = t('administration', {
            defaultValue: 'Administration',
        });
        return <a href="{`${UrlConfig.getJenkinsRootURL()}/manage`}">{adminCaption}</a>;
    }

return dedupe(url, () =>
            Fetch.fetchJSON(url) // Fetch data
            .then(data => augmenter.augmentCapabilities(data))
            .then(successAndFreeze)) // add success field & freeze graph
            .then(

createCredential(repositoryUrl, userName, password, branchName, requirePush) {
        const path = UrlConfig.getJenkinsRootURL();
        const validateCredUrl = Utils.cleanSlashes(`${path}/blue/rest/organizations/${this.organization}/scm/git/validate`);

        const requestBody: any = {
            userName,
            password,
            repositoryUrl,
        };

        if (branchName) {
            requestBody.branch = branchName;
        }

        if (requirePush) {
            requestBody.repositoryUrl = true; // Only set if true!
        }

        const fetchOptions = {

findExistingCredential(repositoryUrl) {
        const root = UrlConfig.getJenkinsRootURL();
        const credUrl = Utils.cleanSlashes(`${root}/blue/rest/organizations/${this.organization}/scm/git/?repositoryUrl=${repositoryUrl}`);

        // Create error in sync code for better stack trace
        const possibleError = new TypedError();

        return this._fetch(credUrl).then(
            result => this._findExistingCredentialSuccess(result),
            error => {
                const { responseBody } = error;

                if (responseBody.message.indexOf('Existing credential failed') >= 0) {
                    throw possibleError.populate(LoadError.TOKEN_REVOKED, responseBody);
                }

                throw possibleError.populate(LoadError.TOKEN_INVALID, responseBody);
            }
        );

import { observer } from 'mobx-react';
import debounce from 'lodash.debounce';
import { NoSteps, QueuedState } from './QueuedState';
import { KaraokeService } from '../index';
import LogConsole from './LogConsole';
import LogToolbar from './LogToolbar';
import Steps from './Steps';
import FreeStyle from './FreeStyle';
import RunDescription from './RunDescription';
import { UrlBuilder } from '@jenkins-cd/blueocean-core-js';
import StageRestartLink from '../../StageRestartLink';

import { KaraokeConfig } from '../';
import { DownstreamRuns } from '../../downstream-runs/DownstreamRuns';

const logger = logging.logger('io.jenkins.blueocean.dashboard.karaoke.Pipeline');

// using the hook 'location.search'.includes('view=0') to trigger the logConsole view instead of steps
function isClassicLogView(props) {
    const { search } = props.location;

    if (search) {
        const viewReg = /view=(\d+)/;
        const match = viewReg.exec(search);
        if (match && match[1] && Number(match[1]) === 0) {
            return true;
        }
    }
    return false;
}

// NB: This is loaded into RunDetailsPipeline.jsx as a handler for the jenkins.pipeline.karaoke.pipeline.provider extension point