How to use the @jenkins-cd/blueocean-core-js.logging.logger function in @jenkins-cd/blueocean-core-js

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) {

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

import { TabLink } from '@jenkins-cd/design-language';
import { i18nTranslator, ReplayButton, RunButton, LoginButton, logging } from '@jenkins-cd/blueocean-core-js';
import Extensions, { dataType } from '@jenkins-cd/js-extensions';

import { Icon } from '@jenkins-cd/design-language';

import { UrlBuilder, buildClassicConfigUrl } from '@jenkins-cd/blueocean-core-js';
import { MULTIBRANCH_PIPELINE } from '../Capabilities';
import { RunDetailsHeader } from './RunDetailsHeader';
import { RunRecord } from './records';
import { FullScreen } from './FullScreen';
import { Paths, capable, Security } from '@jenkins-cd/blueocean-core-js';
import { observer } from 'mobx-react';

const { rest: RestPaths } = Paths;
const logger = logging.logger('io.jenkins.blueocean.dashboard.RunDetails');

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

const classicConfigLink = pipeline => {
    let link = null;
    if (Security.permit(pipeline).configure()) {
        let url = UrlBuilder.buildClassicConfigUrl(pipeline);
        link = (
            <a style="{{" title="{webTranslate('toast.configure'," href="{url}">
                
            </a>
        );
    }
    return link;
};

import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router';
import Extensions from '@jenkins-cd/js-extensions';
import { ExpandablePath, Page, TabLink, WeatherIcon } from '@jenkins-cd/design-language';
import { AppConfig, ContentPageHeader, i18nTranslator, logging, NotFound, Paths, Security } from '@jenkins-cd/blueocean-core-js';
import { Icon } from '@jenkins-cd/design-language';
import { UrlBuilder } from '@jenkins-cd/blueocean-core-js';
import { documentTitle } from './DocumentTitle';
import { observer } from 'mobx-react';
import { observable, action } from 'mobx';

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

const RestPaths = Paths.rest;

const classicConfigLink = pipeline => {
    let link = null;
    if (Security.permit(pipeline).configure()) {
        link = (
            <a title="{webTranslate('toast.configure'," href="{UrlBuilder.buildClassicConfigUrl(pipeline)}">
                
            </a>
        );
    }
    return link;
};

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

import React from 'react';
import { action, asFlat, computed, observable } from 'mobx';
import { logging, Utils } from '@jenkins-cd/blueocean-core-js';

const LOGGER = logging.logger('io.jenkins.blueocean.create-pipeline');

/**
 * Base class for managing the flow of multiple steps.
 * Must provide an initial step, and has methods for pushing or replacing steps on stack.
 */
export default class FlowManager {
    get redirectTimeout() {
        return 2000;
    }

    @computed
    get activeIndex() {
        return this.steps.length > 0 ? this.steps.length - 1 : 0;
    }

    /**

import { action, computed, observable } from 'mobx';
import { logging } from '@jenkins-cd/blueocean-core-js';

import { KaraokeApi } from '../../index';

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

/**
 * The pager fetches pages of data from the BlueOcean api. It fetches pages of data, then
 * inserts them into the [@link BunkerService], and stores the href from the data.
 *
 * MobX computes a data field from the href backed by the backend cache. This allows for SSE events
 * to be propagated to the pager.
 *
 * @export
 * @class Pager
 */
export class LogPager {
    /**
     * pager is fetching data. log and detail
     * @type {boolean}
     */

import React, { Component, PropTypes } from 'react';
import { ResultItem, TimeDuration } from '@jenkins-cd/design-language';
import { AppConfig, logging, TimeManager } from '@jenkins-cd/blueocean-core-js';
import { observer } from 'mobx-react';
import { KaraokeService } from '../index';
import LogConsole from './LogConsole';
import InputStep from './InputStep';
import { prefixIfNeeded } from '../urls/prefixIfNeeded';

const logger = logging.logger('io.jenkins.blueocean.dashboard.karaoke.Step');
const timeManager = new TimeManager();

function createStepLabel(step) {
    const { displayName, displayDescription } = step;

    if (displayDescription) {
        return [
            <span title="{displayDescription}">
                {displayDescription}
            </span>,
            <span>— {displayName}</span>,
        ];
    }

    return displayName;
}

import { i18nTranslator, logging, sseService, pipelineService } from '@jenkins-cd/blueocean-core-js';
const translate = i18nTranslator('blueocean-dashboard');

import FlowManager from '../CreationFlowManager';
import waitAtLeast from '../flow2/waitAtLeast';
import { CreatePipelineOutcome } from './GitCreationApi';
import { CredentialsManager } from '../credentials/CredentialsManager';
import { UnknownErrorStep } from './steps/UnknownErrorStep';
import { LoadingStep } from './steps/LoadingStep';
import GitConnectStep, { isSshRepositoryUrl } from './GitConnectStep';
import GitCompletedStep from './GitCompletedStep';
import GitRenameStep from './steps/GitRenameStep';
import STATE from './GitCreationState';

const LOGGER = logging.logger('io.jenkins.blueocean.git-pipeline');
const MIN_DELAY = 500;
const SAVE_DELAY = 1000;

/**
 * Impl of FlowManager for git creation flow.
 */
export default class GitFlowManager extends FlowManager {
    credentialsManager = null;

    @observable noCredentialsOption = null;

    @computed
    get credentials() {
        const credentials = this.credentialsManager.credentials.slice();
        return [].concat(this.noCredentialsOption, credentials);
    }

import FlowManager from '../CreationFlowManager';

import STATE from './GithubCreationState';

import { ListOrganizationsOutcome } from '../bitbucket/api/BbCreationApi';
import { CreateMbpOutcome } from '../bitbucket/api/BbCreationApi';
import RenameStep from '../bitbucket/steps/BbRenameStep';

import GithubLoadingStep from './steps/GithubLoadingStep';
import GithubCredentialsStep from './steps/GithubCredentialStep';
import GithubOrgListStep from './steps/GithubOrgListStep';
import GithubRepositoryStep from '../bitbucket/steps/BbRepositoryStep';
import GithubCompleteStep from '../bitbucket/steps/BbCompleteStep';
import GithubUnknownErrorStep from './steps/GithubUnknownErrorStep';

const LOGGER = logging.logger('io.jenkins.blueocean.github-pipeline');
const MIN_DELAY = 500;
const FIRST_PAGE = 1;
const PAGE_SIZE = 100;
const SSE_TIMEOUT_DELAY = 1000 * 60;
const translate = i18nTranslator('blueocean-dashboard');

export default class GithubFlowManager extends FlowManager {
    apiUrl = null;

    credentialId = null;

    credentialSelected = false;

    @observable organizations = [];

    @observable repositories = [];

runnable: PropTypes.object,
    favorite: PropTypes.bool,
    onFavoriteToggle: PropTypes.func,
    locale: PropTypes.string.isRequired,
    t: PropTypes.func.isRequired,
};

PipelineCard.defaultProps = {
    favorite: false,
};

PipelineCard.contextTypes = {
    config: PropTypes.object.isRequired,
};

PipelineCard.logger = logging.logger('io.jenkins.blueocean.personalization.PipelineCard');

export function PipelineCardRenderer(props) {
    const {
        onClickMain,
        status,
        startTime,
        estimatedDuration,
        activityUrl,
        displayPath,
        branchText,
        commitText,
        favoriteChecked,
        onFavoriteToggle,
        runnableItem,
        latestRun,
        onRunDetails,