mozilla
/
treeherder
зеркало из https://github.com/mozilla/treeherder.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1450026 - Convert Userguide to ReactJS (#3902)

This commit is contained in:
Guilherme Bayer 2018-10-08 20:15:18 -03:00 коммит произвёл Cameron Dawson
Родитель a36fb2cde1
Коммит 3a42016453
18 изменённых файлов: 482 добавлений и 431 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

15
neutrino-custom/base.js
Просмотреть файл

@ -14,7 +14,6 @@ const DIST = path.join(CWD, 'dist');
const INDEX_TEMPLATE = path.join(UI, 'index.html'); const INDEX_TEMPLATE = path.join(UI, 'index.html');
const PERF_TEMPLATE = path.join(UI, 'perf.html'); const PERF_TEMPLATE = path.join(UI, 'perf.html');
const LOGVIEWER_TEMPLATE = path.join(UI, 'logviewer.html'); const LOGVIEWER_TEMPLATE = path.join(UI, 'logviewer.html');
const USERGUIDE_TEMPLATE = path.join(UI, 'userguide.html');
const HTML_MINIFY_OPTIONS = { const HTML_MINIFY_OPTIONS = {
useShortDoctype: true, useShortDoctype: true,
@ -83,7 +82,7 @@ module.exports = neutrino => {
.end(); .end();
neutrino.config neutrino.config
.entry('userguide') .entry('userguide')
.add(path.join(UI, 'entry-userguide.js')) .add(path.join(UI, 'userguide', 'index.jsx'))
.end(); .end();
neutrino.config neutrino.config
.entry('testview') .entry('testview')
@ -172,14 +171,18 @@ module.exports = neutrino => {
neutrino.config neutrino.config
.plugin('html-userguide') .plugin('html-userguide')
.use(HtmlPlugin, { .use(HtmlPlugin, {
inject: 'body', inject: false,
template: htmlTemplate,
filename: 'userguide.html', filename: 'userguide.html',
template: USERGUIDE_TEMPLATE, favicon: 'ui/img/tree_open.png',
chunks: ['userguide', 'vendor', 'manifest'], chunks: ['userguide', 'vendor', 'manifest'],
minify: HTML_MINIFY_OPTIONS appMountId: 'root',
xhtml: true,
mobile: true,
minify: HTML_MINIFY_OPTIONS,
title: 'Treeherder User Guide'
}); });
neutrino.config neutrino.config
.plugin('html-login') .plugin('html-login')
.use(HtmlPlugin, { .use(HtmlPlugin, {

25
ui/css/treeherder-global.css
Просмотреть файл

@ -404,24 +404,25 @@ h4 {
*/ */
#onscreen-overlay { #onscreen-overlay {
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 10000; /* 1 more than .overlay wait spinners */ z-index: 9000;
background: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.4);
} }
#onscreen-shortcuts { #onscreen-shortcuts {
position: fixed; position: fixed;
top: 50%; top: 50%;
left: 16.5%; left: 16.5%;
transform: translateY(-50%); transform: translateY(-50%);
width:100%; z-index: 10000;
width: 100%;
} }
#onscreen-shortcuts div div.card { #onscreen-shortcuts div div.card {
max-height: 90vh; max-height: 90vh;
overflow: auto; overflow: auto;
} }
/* /*

14
ui/css/treeherder-userguide.css
Просмотреть файл

@ -1,8 +1,11 @@
#userguide { body {
padding: 10px 10px 0;
overflow: auto; overflow: auto;
} }
#userguide {
padding: 10px;
}
#userguide.dt, #userguide.dd { #userguide.dt, #userguide.dd {
text-align: center; text-align: center;
} }
@ -53,6 +56,10 @@
color: #428bca; color: #428bca;
} }
#ug-raw-log-icon, #ug-logviewer-icon {
margin: 0 3px;
}
#ug-raw-log-icon { #ug-raw-log-icon {
font-size: 14px; font-size: 14px;
color: #666; color: #666;
@ -69,4 +76,7 @@
.ug-footer { .ug-footer {
overflow: auto; overflow: auto;
display: flex;
justify-content: space-between;
border-radius: 0 calc(.25rem - 1px);
} }

3
ui/entry-index.js
Просмотреть файл

@ -26,6 +26,9 @@ import './js/treeherder_app';
// Treeherder React UI // Treeherder React UI
import './job-view/JobView'; import './job-view/JobView';
// ShortcutTable React UI
import './shared/ShortcutTable';
// Treeherder JS // Treeherder JS
import './js/directives/treeherder/main'; import './js/directives/treeherder/main';
import './js/services/main'; import './js/services/main';

16
ui/entry-userguide.js
Просмотреть файл

@ -1,16 +0,0 @@
// Webpack entry point for userguide.html
// Vendor Styles
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.css';
// Userguide Styles
import './css/treeherder-global.css';
import './css/treeherder-userguide.css';
import './css/treeherder-job-buttons.css';
// Bootstrap the Angular modules against which everything will be registered
import './js/userguide';
// Userguide JS
import './js/controllers/userguide';

13
ui/index.html
Просмотреть файл

@ -8,15 +8,18 @@
</head> </head>
<body ng-controller="MainCtrl"> <body ng-controller="MainCtrl">
<div id="global-container" class="d-flex flex-column h-100"> <div id="global-container" class="d-flex flex-column h-100">
<div id="onscreen-overlay" ng-if="onscreenOverlayShowing" <div
ng-click="setOnscreenShortcutsShowing(false)"> id="onscreen-overlay"
<div id="onscreen-shortcuts" ng-if="onscreenShortcutsShowing" ng-if="onscreenOverlayShowing"
stop-propagation-on-left-click> ng-click="setOnscreenShortcutsShowing(false)">
<div id="onscreen-shortcuts">
<div class="col-8"> <div class="col-8">
<ng-include src="'partials/main/thShortcutTable.html'"></ng-include> <shortcut-table onscreen-shortcuts-showing="onscreenShortcutsShowing" />
</div> </div>
</div> </div>
</div> </div>
<job-view /> <job-view />
</div> </div>

16
ui/js/controllers/userguide.js
Просмотреть файл

@ -1,16 +0,0 @@
import userguideApp from '../userguide';
userguideApp.controller('UserguideCtrl', ['$scope',
function UserguideCtrl($scope) {
// Used for dynamic startdate, enddate param examples
const d = new Date();
const y = d.getFullYear();
const m = d.getMonth() + 1;
const sd = d.getDate() - 2;
const ed = d.getDate();
$scope.startDate = y + '-' + m + '-' + sd;
$scope.endDate = y + '-' + m + '-' + ed;
},
]);

15
ui/js/directives/treeherder/main.js
Просмотреть файл

@ -1,21 +1,6 @@
import treeherder from '../../treeherder'; import treeherder from '../../treeherder';
import thNotificationsBoxTemplate from '../../../partials/main/thNotificationsBox.html'; import thNotificationsBoxTemplate from '../../../partials/main/thNotificationsBox.html';
treeherder.directive('stopPropagationOnLeftClick', [
function () {
return {
restrict: 'A',
link: function (scope, element) {
element.on('click', function (event) {
if (event.which === 1) {
event.stopPropagation();
}
});
},
};
},
]);
treeherder.directive('thNotificationBox', [ treeherder.directive('thNotificationBox', [
'thNotify', 'thNotify',
function (thNotify) { function (thNotify) {

5
ui/js/treeherder_app.js
Просмотреть файл

@ -3,7 +3,6 @@ import ngRoute from 'angular-route';
import uiBootstrap from 'angular1-ui-bootstrap4'; import uiBootstrap from 'angular1-ui-bootstrap4';
import treeherderModule from './treeherder'; import treeherderModule from './treeherder';
import thShortcutTableTemplate from '../partials/main/thShortcutTable.html';
const treeherderApp = angular.module('treeherder.app', [ const treeherderApp = angular.module('treeherder.app', [
treeherderModule.name, treeherderModule.name,
@ -37,10 +36,6 @@ treeherderApp.config(['$compileProvider', '$locationProvider', '$routeProvider',
reloadOnSearch: false, reloadOnSearch: false,
}) })
.otherwise({ redirectTo: '/jobs' }); .otherwise({ redirectTo: '/jobs' });
}]).run(['$templateCache', ($templateCache) => {
// Templates used by ng-include have to be manually put in the template cache.
// Those used by directives should instead be imported at point of use.
$templateCache.put('partials/main/thShortcutTable.html', thShortcutTableTemplate);
}]); }]);
export default treeherderApp; export default treeherderApp;

19
ui/js/userguide.js
Просмотреть файл

@ -1,19 +0,0 @@
import angular from 'angular';
import thShortcutTableTemplate from '../partials/main/thShortcutTable.html';
const userguideApp = angular.module('userguide', []);
userguideApp.config(['$compileProvider', function ($compileProvider) {
// Disable debug data & legacy comment/class directive syntax, as recommended by:
// https://docs.angularjs.org/guide/production
$compileProvider.debugInfoEnabled(false);
$compileProvider.commentDirectivesEnabled(false);
$compileProvider.cssClassDirectivesEnabled(false);
}]).run(['$templateCache', ($templateCache) => {
// Templates used by ng-include have to be manually put in the template cache.
// Those used by directives should instead be imported at point of use.
$templateCache.put('partials/main/thShortcutTable.html', thShortcutTableTemplate);
}]);
export default userguideApp;

93
ui/partials/main/thShortcutTable.html
Просмотреть файл

@ -1,93 +0,0 @@
<div class="card">
<div class="card-header">
<h3>Keyboard shortcuts
<a ng-show="onscreenShortcutsShowing"
ng-click="setOnscreenShortcutsShowing(false)"
class="pull-right" href="" title="Close this help">
<span class="fa fa-times lightgray"></span>
</a>
</h3>
</div>
<div class="card-body panel-spacing">
<table id="shortcuts">
<tr>
<th colspan=2>Jobs View</th>
</tr>
<tbody>
<tr><td><kbd>f</kbd></td>
<td>Enter a quick filter</td></tr>
<tr>
<td><kbd>ctrl</kbd><kbd>shift</kbd><kbd>f</kbd></td>
<td>Clear the quick filter</td>
</tr>
<tr><td><kbd>i</kbd></td>
<td>Toggle pending and running jobs</td></tr>
<tr><td><kbd>j</kbd> or <kbd>n</kbd></td>
<td>Select next unclassified failure</td></tr>
<tr><td><kbd>k</kbd> or <kbd>p</kbd></td>
<td>Select previous unclassified failure</td></tr>
<tr><td><kbd>l</kbd></td>
<td>Open the logviewer for the selected job</td></tr>
<tr><td><kbd>r</kbd></td>
<td>Retrigger selected job</td></tr>
<tr><td><kbd>t</kbd></td>
<td>Select next info tab</td></tr>
<tr><td><kbd>u</kbd></td>
<td>Toggle showing only unclassified jobs</td></tr>
<tr><td><kbd>&rarr;</kbd></td>
<td>Select next job</td></tr>
<tr><td><kbd>&larr;</kbd></td>
<td>Select previous job</td></tr>
<tr><td><kbd>esc</kbd></td>
<td>Close all open panels</td></tr>
<tr><td><kbd>ctrl</kbd> or <kbd>cmd</kbd></td>
<td>Toggle pinning a job during click selection</td></tr>
</tbody>
<tr>
<th colspan=2>Pinboard</th>
</tr>
<tbody>
<tr><td><kbd>b</kbd></td>
<td>Add a selected job to the pinboard + enter related bug</td></tr>
<tr><td><kbd>c</kbd></td>
<td>Add a selected job to the pinboard + enter classification</td></tr>
<tr>
<td><kbd>ctrl</kbd><kbd>shift</kbd><kbd>u</kbd></td>
<td>Clear the pinboard</td>
</tr>
<tr><td><kbd>spacebar</kbd></td>
<td>Add a selected job to the pinboard</td></tr>
<tr><td><kbd>ctrl</kbd><kbd>enter</kbd></td>
<td>Save pinboard classification and related bugs</td></tr>
<tr><td><kbd>ctrl</kbd><kbd>backspace</kbd></td>
<td>Delete job classification and related bugs</td></tr>
<tr>
<th colspan=2>Autoclassify Panel</th>
</tr>
<tr><td><kbd>a</kbd></td>
<td>Add all subsequent lines to the selection</td></tr>
<tr><td><kbd>e</kbd></td>
<td>Toggle editing selected lines</td></tr>
<tr><td><kbd>shift</kbd><kbd>i</kbd></td>
<td>Ignore the failure</td></tr>
<tr><td><kbd>s</kbd></td>
<td>Save all classifications</td></tr>
<tr><td><kbd>x</kbd></td>
<td>Toggle showing additional classification suggestions</td></tr>
<tr><td><kbd>0</kbd>-<kbd>9</kbd></td>
<td>Select the Nth classification option</td></tr>
<tr><td><kbd>&darr;</kbd></td>
<td>Select next failure</td></tr>
<tr><td><kbd>&uarr;</kbd></td>
<td>Select previous failure</td></tr>
</tbody>
<tr>
<th colspan=2>Help</th>
</tr>
<tbody>
<tr><td><kbd>?</kbd></td>
<td>Display onscreen keyboard shortcuts</td></tr>
</tbody>
</table>
</div>
</div>

164
ui/shared/ShortcutTable.jsx Normal file
Просмотреть файл

@ -0,0 +1,164 @@
import React from 'react';
import { react2angular } from 'react2angular/index.es2015';
import treeherder from '../js/treeherder';
const ShortcutTable = function ShortcutTable() {
return (
<div className="card">
<div className="card-header">
<h3>Keyboard shortcuts</h3>
</div>
<div className="card-body panel-spacing">
<table id="shortcuts">
<tbody>
<tr>
<th colSpan="2">Jobs View</th>
</tr>
</tbody>
<tbody>
<tr>
<td><kbd>f</kbd></td>
<td>Enter a quick filter</td>
</tr>
<tr>
<td><kbd>ctrl</kbd><kbd>shift</kbd><kbd>f</kbd></td>
<td>Clear the quick filter</td>
</tr>
<tr>
<td><kbd>i</kbd></td>
<td>Toggle pending and running jobs</td>
</tr>
<tr>
<td><kbd>j</kbd> or <kbd>n</kbd></td>
<td>Select next unclassified failure</td>
</tr>
<tr>
<td><kbd>k</kbd> or <kbd>p</kbd></td>
<td>Select previous unclassified failure</td>
</tr>
<tr>
<td><kbd>l</kbd></td>
<td>Open the logviewer for the selected job</td>
</tr>
<tr>
<td><kbd>r</kbd></td>
<td>Retrigger selected job</td>
</tr>
<tr>
<td><kbd>t</kbd></td>
<td>Select next info tab</td>
</tr>
<tr>
<td><kbd>u</kbd></td>
<td>Toggle showing only unclassified jobs</td>
</tr>
<tr>
<td><kbd>&rarr;</kbd></td>
<td>Select next job</td>
</tr>
<tr>
<td><kbd>&larr;</kbd></td>
<td>Select previous job</td>
</tr>
<tr>
<td><kbd>esc</kbd></td>
<td>Close all open panels</td>
</tr>
<tr>
<td><kbd>ctrl</kbd> or <kbd>cmd</kbd></td>
<td>Toggle pinning a job during click selection</td>
</tr>
</tbody>
<tbody>
<tr>
<th colSpan="2">Pinboard</th>
</tr>
</tbody>
<tbody>
<tr>
<td><kbd>b</kbd></td>
<td>Add a selected job to the pinboard + enter related bug</td>
</tr>
<tr>
<td><kbd>c</kbd></td>
<td>Add a selected job to the pinboard + enter classification</td>
</tr>
<tr>
<td><kbd>ctrl</kbd><kbd>shift</kbd><kbd>u</kbd></td>
<td>Clear the pinboard</td>
</tr>
<tr>
<td><kbd>spacebar</kbd></td>
<td>Add a selected job to the pinboard</td>
</tr>
<tr>
<td><kbd>ctrl</kbd><kbd>enter</kbd></td>
<td>Save pinboard classification and related bugs</td>
</tr>
<tr>
<td><kbd>ctrl</kbd><kbd>backspace</kbd></td>
<td>Delete job classification and related bugs</td>
</tr>
<tr>
<th colSpan="2">Autoclassify Panel</th>
</tr>
<tr>
<td><kbd>a</kbd></td>
<td>Add all subsequent lines to the selection</td>
</tr>
<tr>
<td><kbd>e</kbd></td>
<td>Toggle editing selected lines</td>
</tr>
<tr>
<td><kbd>shift</kbd><kbd>i</kbd></td>
<td>Ignore the failure</td>
</tr>
<tr>
<td><kbd>s</kbd></td>
<td>Save all classifications</td>
</tr>
<tr>
<td><kbd>x</kbd></td>
<td>Toggle showing additional classification suggestions</td>
</tr>
<tr>
<td><kbd>0</kbd>-<kbd>9</kbd></td>
<td>Select the Nth classification option</td>
</tr>
<tr>
<td><kbd>&darr;</kbd></td>
<td>Select next failure</td>
</tr>
<tr>
<td><kbd>&uarr;</kbd></td>
<td>Select previous failure</td>
</tr>
</tbody>
<tbody>
<tr>
<th colSpan="2">Help</th>
</tr>
</tbody>
<tbody>
<tr>
<td><kbd>?</kbd></td>
<td>Display onscreen keyboard shortcuts</td>
</tr>
</tbody>
</table>
</div>
</div>
);
};
treeherder.component('shortcutTable', react2angular(ShortcutTable));
export default ShortcutTable;

242
ui/userguide.html
Просмотреть файл

@ -1,242 +0,0 @@
<!DOCTYPE html>
<html ng-app="userguide" ng-strict-di>
<head>
<meta charset="utf-8">
<title>Treeherder User Guide</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link id="favicon" type="image/png" rel="shortcut icon" href="img/tree_open.png">
</head>
<body ng-controller="UserguideCtrl" id="userguide">
<!-- Content panel -->
<div class="card">
<!-- Header -->
<div class="card-header">
<h1>Treeherder User Guide</h1>
<h5>Want to contribute?
<a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Tree+Management&amp;component=Treeherder">
File a bug</a> /
<a href="https://github.com/mozilla/treeherder">
Source</a> /
<a href="https://wiki.mozilla.org/EngineeringProductivity/Projects/Treeherder#Contributing">
Contributing</a>
</h5>
For anything else visit our
<a href="https://wiki.mozilla.org/EngineeringProductivity/Projects/Treeherder">
Project Wiki</a>
or ask us on IRC in
<a href="irc://irc.mozilla.org/treeherder">#treeherder</a>
</div>
<!-- Start of interior panels -->
<div class="card-body">
<div class="row">
<!-- Job Notation table -->
<div class="col-6">
<div class="card">
<div class="card-header">
<h3>Job notation</h3>
</div>
<div class="card-body">
<table id="legend-other">
<tr>
<th>
<button class="btn btn-green ug-btn ug-btn-comment">+n</button>
</th>
<td>Collapsed job count</td>
</tr>
<tr>
<th>
<button class="btn btn-dkgray ug-btn ug-btn-comment">Th( )</button>
</th>
<td>Wrapped job group</td>
</tr>
<tr>
<th>
<button class="btn btn-orange-classified autoclassified ug-btn ug-btn-comment">Th</button>
</th>
<td>Hollow asterisk, auto-classified</td>
</tr>
<tr>
<th>
<button class="btn btn-orange-classified ug-btn ug-btn-comment">Th</button>
</th>
<td>Asterisk, classified</td>
</tr>
<tr>
<th>
<button class="btn btn-ltgray ug-btn ug-btn-bg">Th</button>
</th>
<td>Light gray, pending</td>
</tr>
<tr>
<th>
<button class="btn btn-dkgray ug-btn ug-btn-bg">Th</button>
</th>
<td>Gray, running</td>
</tr>
<tr>
<th>
<button class="btn btn-green ug-btn ug-btn-bg">Th</button>
</th>
<td>Green, success</td>
</tr>
<tr>
<th>
<button class="btn btn-orange ug-btn ug-btn-orange">Th</button>
</th>
<td>Orange, tests failed</td>
</tr>
<tr>
<th>
<button class="btn btn-purple ug-btn ug-btn-purple">Th</button>
</th>
<td>Purple, infrastructure exception</td>
</tr>
<tr>
<th>
<button class="btn btn-red ug-btn ug-btn-red">Th</button>
</th>
<td>Red, build error</td>
</tr>
<tr>
<th>
<button class="btn btn-dkblue ug-btn ug-btn-bg">Th</button>
</th>
<td>Dark blue, build restarted</td>
</tr>
<tr>
<th>
<button class="btn btn-pink ug-btn ug-btn-bg">Th</button>
</th>
<td>Pink, build cancelled</td>
</tr>
<tr>
<th>
<button class="btn btn-yellow ug-btn ug-btn-yellow">Th</button>
</th>
<td>Yellow, unknown</td>
</tr>
<tr>
<th class="superseded">
<button class="btn btn-ltblue ug-btn ug-btn-bg">Th</button>
</th>
<td>Light blue, superseded</td>
</tr>
</table>
</div>
</div>
</div>
<!-- Shortcuts table -->
<div class="col-6">
<ng-include id="th-shortcut-table"
src="'partials/main/thShortcutTable.html'"></ng-include>
</div>
<!-- Copy values on hover table -->
<div class="col-6">
<div class="card">
<div class="card-header"><h3>Copy values on hover</h3></div>
<div class="card-body panel-spacing">
<table id="shortcuts">
<tr>
<td><kbd>ctrl/cmd</kbd><kbd>c</kbd></td>
<td>Copy job details
<img src="./img/logviewerIconHelp.svg" id="ug-logviewer-icon">
logviewer url on hover
</td>
</tr>
<tr>
<td><kbd>ctrl/cmd</kbd><kbd>c</kbd></td>
<td>Copy job details
<span id="ug-raw-log-icon" class="fa fa-file-text-o"></span>
raw log url on hover
</td>
</tr>
<tr>
<td><kbd>ctrl/cmd</kbd><kbd>c</kbd></td>
<td>Copy job details <span class="small"><label>Job:</label>
<span id="ug-job-name">name</span></span> as raw text on hover
</td>
</tr>
</table>
</div>
</div>
</div>
<!-- End of row -->
</div>
<!-- Query string params -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3>URL Query String Parameters</h3>
</div>
<div class="card-body panel-spacing">
<table id="queryparams">
<tr>
<td><span class="queryparam">nojobs</span></td>
<td>Load pushes without loading any job results.</td>
<td><span class="queryparam">&nojobs</span></td>
</tr>
<tr>
<td><span class="queryparam">fromchange</span></td>
<td>Specify the earliest revision in the push range.</td>
<td><span class="queryparam">&fromchange=a12ca6c8b89b</span></td>
</tr>
<tr>
<td><span class="queryparam">tochange</span></td>
<td>Specify the latest revision in the push range.</td>
<td><span class="queryparam">&tochange=3215c7fc090b</span></td>
</tr>
<tr>
<td><span class="queryparam">startdate</span></td>
<td>
<span>Specify the earliest</span>
<span class="queryparam">YYYY-MM-DD</span>
<span>date in the push range.</span>
</td>
<td><span class="queryparam">&startdate={{ startDate }}</span></td>
</tr>
<tr>
<td><span class="queryparam">enddate</span></td>
<td>
<span>Specify the latest</span>
<span class="queryparam">YYYY-MM-DD</span>
<span>date in the push range.</span>
</td>
<td><span class="queryparam">&enddate={{ endDate }}</span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- End of interior panels -->
</div>
<!-- Credits and Whats Deployed -->
<div class="card-footer ug-footer row">
<div class="col-6">
<div>Some icons by
<a href="http://www.freepik.com" title="Freepik">Freepik</a> from
<a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> licensed under
<a href="http://creativecommons.org/licenses/by/3.0/"
title="Creative Commons BY 3.0">CC BY 3.0</a>
</div>
</div>
<div class="col-6 float-right">
<a class="midgray float-right"
href="http://whatsdeployed.io/?owner=mozilla&amp;repo=treeherder&amp;name[]=Stage&amp;url[]=https://treeherder.allizom.org/revision.txt&amp;name[]=Prod&amp;url[]=https://treeherder.mozilla.org/revision.txt">What's Deployed?</a>
</div>
</div>
<!-- End of content panel -->
</div>
</body>
</html>

17
ui/userguide/App.jsx Normal file
Просмотреть файл

@ -0,0 +1,17 @@
import React from 'react';
import UserGuideHeader from './UserGuideHeader';
import UserGuideBody from './UserGuideBody';
import UserGuideFooter from './UserGuideFooter';
const App = () => (
<div id="userguide">
<div className="card">
<UserGuideHeader />
<UserGuideBody />
<UserGuideFooter />
</div>
</div>
);
export default App;

190
ui/userguide/UserGuideBody.jsx Normal file
Просмотреть файл

@ -0,0 +1,190 @@
import React from 'react';
import ShortcutTable from '../shared/ShortcutTable';
import logviewerIconHelp from '../img/logviewerIconHelp.svg';
const notations = [
{
text: '+n',
classes: 'btn-green ug-btn-comment',
explanation: 'Collapsed job count',
},
{
text: 'Th()',
classes: 'btn-dkgray ug-btn-comment',
explanation: 'Wrapped job group',
},
{
classes: 'btn-orange-classified autoclassified ug-btn-comment',
explanation: 'Hollow asterisk, auto-classified',
},
{
classes: 'btn-orange-classified ug-btn-comment',
explanation: 'Asterisk, classified',
},
{
classes: 'btn-ltgray ug-btn-bg',
explanation: 'Light gray, pending',
},
{
classes: 'btn-dkgray ug-btn-bg',
explanation: 'Gray, running',
},
{
classes: 'btn-green ug-btn-bg',
explanation: 'Green, success',
},
{
classes: 'btn-orange ug-btn-orange',
explanation: 'Orange, tests failed',
},
{
classes: 'btn-purple ug-btn-purple',
explanation: 'Purple, infrastructure exception',
},
{
classes: 'btn-red ug-btn-red',
explanation: 'Red, build error',
},
{
classes: 'btn-dkblue ug-btn-bg',
explanation: 'Dark blue, build restarted',
},
{
classes: 'btn-pink ug-btn-bg',
explanation: 'Pink, build cancelled',
},
{
classes: 'btn-yellow ug-btn-yellow',
explanation: 'Yellow, unknown',
},
{
classes: 'btn-ltblue ug-btn ug-btn-bg',
explanation: 'Light blue, superseded',
},
];
const UserGuideBody = function UserGuideBody() {
return (
<div className="card-body">
<div className="row">
<div className="col-6">
<div className="card">
<div className="card-header">
<h3>Job notation</h3>
</div>
<div className="card-body">
<table id="legend-other">
<tbody>
{notations.map(({ classes, explanation, text }) => (
<tr key={classes}>
<th className="superseded">
<button className={`btn ug-btn ${classes}`}>
{text || 'Th'}
</button>
</th>
<td>{explanation}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
<div className="col-6">
<ShortcutTable id="th-shortcut-table" />
</div>
<div className="col-6">
<div className="card">
<div className="card-header"><h3>Copy values on hover</h3></div>
<div className="card-body panel-spacing">
<table id="shortcuts">
<tbody>
<tr>
<td><kbd>ctrl/cmd</kbd><kbd>c</kbd></td>
<td>Copy job details
<img src={logviewerIconHelp} id="ug-logviewer-icon" alt="" />
logviewer url on hover
</td>
</tr>
<tr>
<td><kbd>ctrl/cmd</kbd><kbd>c</kbd></td>
<td>Copy job details
<span id="ug-raw-log-icon" className="fa fa-file-text-o" />
raw log url on hover
</td>
</tr>
<tr>
<td><kbd>ctrl/cmd</kbd><kbd>c</kbd></td>
<td>Copy job details <span className="small"><label>Job:</label>
<span id="ug-job-name">name</span></span> as raw text on hover
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-12">
<div className="card">
<div className="card-header">
<h3>URL Query String Parameters</h3>
</div>
<div className="card-body panel-spacing">
<table id="queryparams">
<tbody>
<tr>
<td><span className="queryparam">nojobs</span></td>
<td>Load pushes without loading any job results.</td>
<td><span className="queryparam">&nojobs</span></td>
</tr>
<tr>
<td><span className="queryparam">fromchange</span></td>
<td>Specify the earliest revision in the push range.</td>
<td><span className="queryparam">&fromchange=a12ca6c8b89b</span></td>
</tr>
<tr>
<td><span className="queryparam">tochange</span></td>
<td>Specify the latest revision in the push range.</td>
<td><span className="queryparam">&tochange=3215c7fc090b</span></td>
</tr>
<tr>
<td><span className="queryparam">startdate</span></td>
<td>
<span>Specify the earliest </span>
<span className="queryparam">YYYY-MM-DD</span>
<span> date in the push range.</span>
</td>
<td><span className="queryparam">&startdate=YYYY-MM-DD</span></td>
</tr>
<tr>
<td><span className="queryparam">enddate</span></td>
<td>
<span>Specify the latest </span>
<span className="queryparam">YYYY-MM-DD</span>
<span> date in the push range.</span>
</td>
<td><span className="queryparam">&enddate=YYYY-MM-DD</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
);
};
export default UserGuideBody;

21
ui/userguide/UserGuideFooter.jsx Normal file
Просмотреть файл

@ -0,0 +1,21 @@
import React from 'react';
const UserGuideFooter = function UserGuideFooter() {
return (
<div className="card-footer ug-footer">
<div>
<div>Some icons by
<a href="http://www.freepik.com" title="Freepik"> Freepik</a> from
<a href="http://www.flaticon.com" title="Flaticon"> www.flaticon.com</a> licensed under
<a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0"> CC BY 3.0</a>
</div>
</div>
<div>
<a className="midgray" href="http://whatsdeployed.io/?owner=mozilla&amp;repo=treeherder&amp;name[]=Stage&amp;url[]=https://treeherder.allizom.org/revision.txt&amp;name[]=Prod&amp;url[]=https://treeherder.mozilla.org/revision.txt">Whats Deployed?</a>
</div>
</div>
);
};
export default UserGuideFooter;

21
ui/userguide/UserGuideHeader.jsx Normal file
Просмотреть файл

@ -0,0 +1,21 @@
import React from 'react';
const UserGuideHeader = function UserGuideHeader() {
return (
<div className="card-header">
<h1>Treeherder User Guide</h1>
<h5>Want to contribute?
<a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Tree+Management&amp;component=Treeherder"> File a bug</a> /
<a href="https://github.com/mozilla/treeherder"> Source </a> /
<a href="https://wiki.mozilla.org/EngineeringProductivity/Projects/Treeherder#Contributing"> Contributing</a>
</h5>
For anything else visit our
<a href="https://wiki.mozilla.org/EngineeringProductivity/Projects/Treeherder"> Project Wiki </a>
or ask us on IRC in
<a href="irc://irc.mozilla.org/treeherder"> #treeherder</a>
</div>
);
};
export default UserGuideHeader;

24
ui/userguide/index.jsx Normal file
Просмотреть файл

@ -0,0 +1,24 @@
import React from 'react';
import { render } from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.css';
import '../css/treeherder-global.css';
import '../css/treeherder-userguide.css';
import '../css/treeherder-job-buttons.css';
import App from './App';
const load = () => render((
<AppContainer>
<App />
</AppContainer>
), document.getElementById('root'));
if (module.hot) {
module.hot.accept('./App', load);
}
load();