[WiP] First class data types / extra extension points / extensible router

blueocean-dashboard/package.json

@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@jenkins-cd/design-language": "0.0.64",
-    "@jenkins-cd/js-extensions": "0.0.19",
+    "@jenkins-cd/js-extensions": "0.0.20-beta-1",
     "@jenkins-cd/js-modules": "0.0.5",
     "@jenkins-cd/sse-gateway": "0.0.6",
     "immutable": "3.8.1",

blueocean-dashboard/src/main/js/PipelineRoutes.jsx

@@ -1,4 +1,4 @@
-import { Route, Redirect, IndexRoute, IndexRedirect } from 'react-router';
+
 import React from 'react';
 import Dashboard from './Dashboard';
 import OrganizationPipelines from './OrganizationPipelines';
@@ -14,34 +14,60 @@ import {
     RunDetailsArtifacts,
     RunDetailsTests,
 } from './components';
+import Extensions from '@jenkins-cd/js-extensions';
+
+const DynamicRoutes = {
+    path: ':pipeline/(.*)',
+
+    getChildRoutes(partialNextState, callback) {
+        Extensions.store.getExtensions('pipeline.routes', routes => {
+            callback(null, routes); // routes is array
+        });
+    },
+};
 
 export default (
-    <Route path="/" component={Dashboard}>
-        <Route path="organizations/:organization" component={OrganizationPipelines}>
-            <IndexRedirect to="pipelines" />
-            <Route path="pipelines" component={Pipelines} />
+    { path: '', component: Dashboard, indexRoute: {
+        onEnter: ({ params }, replace) => replace('pipelines'),
+    },
+        childRoutes: [
+        { path: 'organizations/:organization', component: OrganizationPipelines,
+            indexRoute: { onEnter: ({ params }, replace) => replace(`/organizations/${params.organization}/pipelines`) },
+            childRoutes: [
+            { path: 'pipelines', component: Pipelines },
 
-            <Route component={PipelinePage}>
-                <Route path=":pipeline/branches" component={MultiBranch} />
-                <Route path=":pipeline/activity" component={Activity} />
-                <Route path=":pipeline/pr" component={PullRequests} />
+            { component: PipelinePage, childRoutes: [
+                { path: ':pipeline/branches', component: MultiBranch },
+                { path: ':pipeline/activity', component: Activity },
+                { path: ':pipeline/pr', component: PullRequests },
 
-                <Route path=":pipeline/detail/:branch/:runId" component={RunDetails}>
-                    <IndexRedirect to="pipeline" />
-                    <Route path="pipeline" component={RunDetailsPipeline} >
-                        <Route path=":node" component={RunDetailsPipeline} />
-                    </Route>
-                    <Route path="changes" component={RunDetailsChanges} />
-                    <Route path="tests" component={RunDetailsTests} />
-                    <Route path="artifacts" component={RunDetailsArtifacts} />
-                </Route>
+                { path: ':pipeline/detail/:branch/:runId', component: RunDetails,
+                    indexRoute: {
+                        onEnter: ({ params }, replace) => replace(
+                            `/organizations/${params.organization}/${encodeURIComponent(params.pipeline)}/` +
+                            `detail/${params.branch}/${params.runId}/pipeline`
+                        ),
+                    },
+                    childRoutes: [
+                    { path: 'pipeline', component: RunDetailsPipeline, childRoutes: [
+                        { path: ':node', component: RunDetailsPipeline },
+                    ] },
+                    { path: 'changes', component: RunDetailsChanges },
+                    { path: 'tests', component: RunDetailsTests },
+                    { path: 'artifacts', component: RunDetailsArtifacts },
+                    ],
+                },
 
-                <Redirect from=":pipeline(/*)" to=":pipeline/activity" />
-            </Route>
-        </Route>
-        <Route path="/pipelines" component={OrganizationPipelines}>
-            <IndexRoute component={Pipelines} />
-        </Route>
-        <IndexRedirect to="pipelines" />
-    </Route>
+                DynamicRoutes,
+                // TODO: need to convert this to onEnter - somehow?
+                //<Redirect from=":pipeline(/*)" to=":pipeline/activity" />
+            ],
+            },
+            ],
+        },
+        { path: '/pipelines', component: OrganizationPipelines, indexRoute: {
+            component: Pipelines,
+        } },
+        ],
+    }
 );

blueocean-dashboard/src/main/js/components/PipelinePage.jsx

@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react';
+import Extensions, { dataType } from '@jenkins-cd/js-extensions';
 import { Link } from 'react-router';
 import { isFailure, isPending } from '../util/FetchStatus';
 import NotFound from './NotFound';
@@ -7,7 +8,6 @@ import {
     PageHeader,
     Title,
     PageTabs,
-    TabLink,
     WeatherIcon,
     Favorite,
 } from '@jenkins-cd/design-language';
@@ -47,9 +47,7 @@ export default class PipelinePage extends Component {
                         <Favorite className="dark-yellow" />
                     </Title>
                     <PageTabs base={baseUrl}>
-                        <TabLink to="/activity">Activity</TabLink>
-                        <TabLink to="/branches">Branches</TabLink>
-                        <TabLink to="/pr">Pull Requests</TabLink>
+                        <Extensions.Renderer extensionPoint="pipeline.main.navigation" filter={dataType(pipeline._jobClass)} pipeline={pipeline} baseLink={baseUrl} />
                     </PageTabs>
                 </PageHeader>
                 {React.cloneElement(this.props.children, { pipeline })}

blueocean-dashboard/src/main/js/components/RunDetails.jsx

@@ -5,8 +5,8 @@ import {
     ModalHeader,
     PipelineResult,
     PageTabs,
-    TabLink,
 } from '@jenkins-cd/design-language';
+import Extensions, { dataType } from '@jenkins-cd/js-extensions';
 
 import {
     actions,
@@ -119,10 +119,7 @@ class RunDetails extends Component {
                           onAuthorsClick={() => this.navigateToChanges()}
                         />
                         <PageTabs base={baseUrl}>
-                            <TabLink to="/pipeline">Pipeline</TabLink>
-                            <TabLink to="/changes">Changes</TabLink>
-                            <TabLink to="/tests">Tests</TabLink>
-                            <TabLink to="/artifacts">Artifacts</TabLink>
+                            <Extensions.Renderer extensionPoint="rundetails.main.navigation" filter={dataType(currentRun)} currentRun={currentRun} baseLink={baseUrl} />
                         </PageTabs>
                     </div>
                 </ModalHeader>

blueocean-dashboard/src/main/js/components/RunDetailsPipeline.jsx

@@ -268,6 +268,11 @@ export class RunDetailsPipeline extends Component {
         const noSteps = !log && currentSteps && currentSteps.model && currentSteps.model.length === 0;
         const shouldShowLogHeader = log !== null || !noSteps;
         return (
+            <div>
+            <Extensions.Renderer
+              extensionPoint="jenkins.pipeline.run.details"
+              currentRun={this.props.result}
+            />
             <div ref="scrollArea">
                 { nodes && nodes[nodeKey] && <Extensions.Renderer
                   extensionPoint="jenkins.pipeline.run.result"
@@ -300,6 +305,7 @@ export class RunDetailsPipeline extends Component {
 
                 { log && <LogConsole key={logGeneral.url} logArray={log.logArray} scrollToBottom={scrollToBottom} /> }
             </div>
+            </div>
         );
     }
 }

blueocean-dashboard/src/main/js/components/RunDetailsTests.jsx

@@ -2,7 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import { EmptyStateView } from '@jenkins-cd/design-language';
 import { actions as selectorActions, testResults as testResultsSelector,
     connect, createSelector } from '../redux';
-import Extensions, { dataType } from '@jenkins-cd/js-extensions';
+import Extensions, { mostSpecificDataType } from '@jenkins-cd/js-extensions';
 
 const EmptyState = () => (
     <EmptyStateView tightSpacing>
@@ -58,7 +58,7 @@ export class RunDetailsTests extends Component {
                 <div className="test-result-duration">Duration {testResults.duration}</div>
             </div>
 
-            <Extensions.Renderer extensionPoint="jenkins.test.result" filter={dataType(testResults)} testResults={testResults} />
+            <Extensions.Renderer extensionPoint="jenkins.test.result" filter={mostSpecificDataType(testResults)} testResults={testResults} />
         </div>);
     }
 }

blueocean-dashboard/src/main/js/components/rundetails/RunDetailsArtifactsTab.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TabLink } from '@jenkins-cd/design-language';
+
+export default class RunDetailsArtifactsTab extends React.Component {
+    render() {
+        return (
+            <TabLink to={`${this.props.baseLink}/artifacts`}>Artifacts</TabLink>
+        );
+    }
+}
+
+RunDetailsArtifactsTab.propTypes = {
+    pipeline: React.PropTypes.any,
+    baseLink: React.PropTypes.string,
+};

blueocean-dashboard/src/main/js/components/rundetails/RunDetailsTabs.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TabLink } from '@jenkins-cd/design-language';
+
+export default class RunDetailsTabs extends React.Component {
+    render() {
+        return (
+            <span>
+                <TabLink to={`${this.props.baseLink}/pipeline`}>Pipeline</TabLink>
+                <TabLink to={`${this.props.baseLink}/changes`}>Changes</TabLink>
+                <TabLink to={`${this.props.baseLink}/tests`}>Tests</TabLink>
+            </span>
+        );
+    }
+}
+
+RunDetailsTabs.propTypes = {
+    pipeline: React.PropTypes.any,
+    baseLink: React.PropTypes.string,
+};

blueocean-dashboard/src/main/js/components/tabs/PipelineActivityTab.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TabLink } from '@jenkins-cd/design-language';
+
+export default class PipelineActivityTab extends React.Component {
+    render() {
+        return <TabLink to={`${this.props.baseLink}/activity`}>Activity</TabLink>;
+    }
+}
+
+PipelineActivityTab.propTypes = {
+    pipeline: React.PropTypes.any,
+    baseLink: React.PropTypes.string,
+};

blueocean-dashboard/src/main/js/components/tabs/PipelineBranchesTab.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TabLink } from '@jenkins-cd/design-language';
+
+export default class PipelineBranchesTab extends React.Component {
+    render() {
+        return <TabLink to={`${this.props.baseLink}/branches`}>Branches</TabLink>;
+    }
+}
+
+PipelineBranchesTab.propTypes = {
+    pipeline: React.PropTypes.any,
+    baseLink: React.PropTypes.string,
+};

blueocean-dashboard/src/main/js/components/tabs/PipelinePullRequestsTab.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TabLink } from '@jenkins-cd/design-language';
+
+export default class PipelinePullRequestsTab extends React.Component {
+    render() {
+        return <TabLink to={`${this.props.baseLink}/pr`}>Pull Requests</TabLink>;
+    }
+}
+
+PipelinePullRequestsTab.propTypes = {
+    pipeline: React.PropTypes.any,
+    baseLink: React.PropTypes.string,
+};

blueocean-dashboard/src/main/js/jenkins-js-extension.yaml

@@ -10,6 +10,24 @@ extensions:
     extensionPoint: jenkins.main.stores
   - component: components/PipelineRunGraph
     extensionPoint: jenkins.pipeline.run.result
+  - component: components/tabs/PipelineActivityTab
+    extensionPoint: pipeline.main.navigation
+    dataType: hudson.model.Job
+  - component: components/tabs/PipelineBranchesTab
+    extensionPoint: pipeline.main.navigation
+    dataType: org.jenkinsci.plugins.workflow.job.WorkflowJob
+  - component: components/tabs/PipelinePullRequestsTab
+    extensionPoint: pipeline.main.navigation
+    dataType: org.jenkinsci.plugins.workflow.job.WorkflowJob
+  - component: components/tabs/PipelineActivityTab
+    extensionPoint: pipeline.main.navigation
+    dataType: jenkins.branch.MultiBranchProject
+  - component: components/tabs/PipelineBranchesTab
+    extensionPoint: pipeline.main.navigation
+    dataType: jenkins.branch.MultiBranchProject
+  - component: components/tabs/PipelinePullRequestsTab
+    extensionPoint: pipeline.main.navigation
+    dataType: jenkins.branch.MultiBranchProject
   - component: components/testing/TestResults
     extensionPoint: jenkins.test.result
     dataType: hudson.tasks.test.TestResult

blueocean-dashboard/src/main/less/extensions.less

@@ -1,5 +1,6 @@
 @import "variables";
 
 @import "core";
+@import "page-tabs";
 @import "testing";
 @import "run-pipeline";

blueocean-dashboard/src/main/less/page-tabs.less

@@ -0,0 +1,5 @@
+.page-tabs {
+  > div, > div > div {
+    display: inline-block;
+  }
+}

blueocean-freestyle/.babelrc

@@ -0,0 +1,3 @@
+{
+ "presets": ["es2015", "stage-0", "react"]
+}

blueocean-freestyle/.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 160

blueocean-freestyle/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "extends": "@jenkins-cd/jenkins/react",
+  "rules": {
+    "react/jsx-no-bind": 0,
+    "no-unused-vars": [2, {"varsIgnorePattern": "^React$"}],
+    "max-len": [1, 160, 4]
+  }
+}

blueocean-freestyle/.storybook/config.js

@@ -0,0 +1,7 @@
+import { configure } from '@kadira/storybook';
+
+function loadStories() {
+  require('../src/main/js/stories/index');
+}
+
+configure(loadStories, module);

blueocean-freestyle/.storybook/head.html

@@ -0,0 +1,16 @@
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+<!-- Reset -->
+<link href="/css/normalize.css" rel="stylesheet">
+
+<!-- Icons -->
+<link href="/css/latofonts.css" rel="stylesheet">
+<link href="/octicons/octicons.css" rel="stylesheet">
+
+<!-- Jenkins theme -->
+<link href="/css/jenkins-design-language.css" rel="stylesheet">
+
+<!-- styles -->
+<link href="/extensions.css" rel="stylesheet">

blueocean-freestyle/.storybook/webpack.config.js

@@ -0,0 +1,11 @@
+const path = require('path');
+
+module.exports = {
+    module: {},
+    resolve: {
+        extensions: [
+            '.js', // required by storybook
+            '', '.jsx' // for blueocean files
+        ],
+    }
+};

blueocean-freestyle/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2016 CloudBees Inc and a number of other of contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.