Merge pull request #2689 from alecmerdler/remove-react-components
Remove React UI Components
This commit is contained in:
Alec Merdler
GitHub
commit
d1a7a54038
17 changed files with 2 additions and 594 deletions
|
|
@ -68,9 +68,7 @@
|
|||
"karma-phantomjs-launcher": "^1.0.0",
|
||||
"karma-webpack": "^1.8.1",
|
||||
"ngtemplate-loader": "^1.3.1",
|
||||
"node-sass": "3.10.1",
|
||||
"phantomjs-prebuilt": "^2.1.7",
|
||||
"sass-loader": "4.0.2",
|
||||
"script-loader": "^0.7.0",
|
||||
"source-map-loader": "0.1.5",
|
||||
"style-loader": "0.13.1",
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
/*
|
||||
A list of useful mixins
|
||||
*/
|
||||
|
||||
@mixin box-shadow($args...) {
|
||||
-webkit-box-shadow: $args;
|
||||
-moz-box-shadow: $args;
|
||||
box-shadow: $args;
|
||||
-o-box-shadow: $args;
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
.rp-description {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.rp-throbber {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rp-panelBody {
|
||||
padding: 15px 30px;
|
||||
}
|
||||
|
||||
.rp-tabs {
|
||||
border-bottom: 1px solid #DDD;
|
||||
}
|
||||
.rp-tabs > li.active > a,
|
||||
.rp-tabs > li.active > a:focus,
|
||||
.rp-tabs > li.active > a:hover {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.rp-tabs {
|
||||
padding: 0 15px;
|
||||
font-size: 20px;
|
||||
|
||||
li.active a {
|
||||
color: #51a3d9;
|
||||
border-bottom: 1px solid #51a3d9;
|
||||
|
||||
&:hover {
|
||||
color: #51a3d9;
|
||||
border-bottom: 1px solid #51a3d9;
|
||||
}
|
||||
}
|
||||
|
||||
li a {
|
||||
color: #333;
|
||||
border-bottom: 1px solid #DDD;
|
||||
&:focus,
|
||||
&:hover {
|
||||
border: 1px solid #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rp-tagSpan {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
.rp-button {
|
||||
float: right;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.rp-button__dropdown {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25), 0 0 1px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.rp-button__text {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.rp-button__text--bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
.rp-header__row {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.rp-title {
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
// Repo Page specific styles here
|
||||
@import "../mixins";
|
||||
@import "body";
|
||||
@import "header";
|
||||
@import "sidebar";
|
||||
|
||||
.rp-header {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.rp-mainPanel {
|
||||
margin-bottom: 20px;
|
||||
background-color: #fff;
|
||||
@include box-shadow(0px 2px 2px rgba(0, 0, 0, 0.4));
|
||||
overflow: hidden;
|
||||
display: table;
|
||||
|
||||
[class*="col-"] {
|
||||
float: none;
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.rp-main {
|
||||
padding: 0;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.rp-sidebar {
|
||||
padding: 30px 30px 0 30px;
|
||||
}
|
||||
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
.rp-badge {
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.rp-badge__icon {
|
||||
float: left;
|
||||
height: 25px;
|
||||
font-size: 16px;
|
||||
padding: 0 12px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.rp-badge__icon--private {
|
||||
@extend .rp-badge__icon;
|
||||
background-color: #d64456;
|
||||
}
|
||||
|
||||
.rp-badge__icon--public {
|
||||
@extend .rp-badge__icon;
|
||||
background-color: #2fc98e;
|
||||
}
|
||||
|
||||
.rp-imagesHeader {
|
||||
font-size: 18px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.rp-imagesTable {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.rp-imagesTable__headerCell {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
color: #999;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.rp-imagesTable__tagIcon {
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.rp-sharing {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
import * as React from "react";
|
||||
|
||||
import Build from "./build";
|
||||
import Throbber from "./throbber";
|
||||
|
||||
interface IBody {
|
||||
description: string;
|
||||
api: Object;
|
||||
repository: Object;
|
||||
}
|
||||
|
||||
interface IBodyState {
|
||||
currentBuild: any;
|
||||
intervalId: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* The Component for the main body of the repo page
|
||||
* @param {string} description - The description of the repository
|
||||
* @param {object} api - The ApiService injected from Angular
|
||||
* @param {object} repository - The list of properties for the repository
|
||||
*/
|
||||
class body extends React.Component<IBody, IBodyState> {
|
||||
static propTypes = {
|
||||
description: React.PropTypes.string.isRequired,
|
||||
api: React.PropTypes.object.isRequired,
|
||||
repository: React.PropTypes.object.isRequired,
|
||||
}
|
||||
constructor(props){
|
||||
super(props)
|
||||
this.state = {
|
||||
currentBuild: [],
|
||||
intervalId: null
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
let intervalId: number = window.setInterval(() => this.getBuilds(), 1000);
|
||||
this.setState({
|
||||
currentBuild: this.state.currentBuild,
|
||||
intervalId: intervalId
|
||||
});
|
||||
}
|
||||
comoponentDidUnmount() {
|
||||
clearInterval(this.state.intervalId);
|
||||
}
|
||||
getBuilds() {
|
||||
let api: any = this.props.api;
|
||||
let repository: any = this.props.repository;
|
||||
let params: Object = {
|
||||
'repository': repository.namespace + '/' + repository.name,
|
||||
'limit': 8
|
||||
};
|
||||
|
||||
api.getRepoBuildsAsResource(params, true).get((data) => {
|
||||
let builds: Array<Object> = [];
|
||||
data.builds.forEach((element, i) => {
|
||||
builds.push({
|
||||
user: element.manual_user,
|
||||
id: element.id,
|
||||
display_name: element.display_name,
|
||||
started: element.started,
|
||||
tags: element.tags,
|
||||
phase: element.phase,
|
||||
trigger: element.trigger,
|
||||
trigger_metadata: element.trigger_metadata
|
||||
});
|
||||
});
|
||||
|
||||
this.setState({
|
||||
currentBuild: builds,
|
||||
intervalId: this.state.intervalId
|
||||
});
|
||||
});
|
||||
}
|
||||
render () {
|
||||
let description: string = this.props.description;
|
||||
if (description === null || description === "") {
|
||||
description = "No Description";
|
||||
}
|
||||
return(
|
||||
<div>
|
||||
<ul className="nav nav-tabs rp-tabs">
|
||||
<li className="active">
|
||||
<a data-target="#tab1" data-toggle="tab">Description</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-target="#tab2" data-toggle="tab">Automated Builds</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="panel-body rp-panelBody">
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane in active" id="tab1">
|
||||
<div className="rp-description">{description}</div>
|
||||
</div>
|
||||
<div className="tab-pane" id="tab2">
|
||||
<div className="panel-body">
|
||||
<h3 className="tab-header">Repository Builds</h3>
|
||||
<Build data={this.state.currentBuild}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default body;
|
||||
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
import * as React from 'react';
|
||||
import * as moment from "moment";
|
||||
|
||||
import Throbber from "./throbber";
|
||||
|
||||
export default class Build extends React.Component<any, any> {
|
||||
render () {
|
||||
let builds: any = this.props.data;
|
||||
let buildsTable: any = [];
|
||||
let table: any;
|
||||
if (Object.keys(builds).length === 0) {
|
||||
buildsTable.push('Loading')
|
||||
table = <Throbber />
|
||||
}
|
||||
else {
|
||||
// Get Builds
|
||||
builds.forEach((element, i) => {
|
||||
let tags: Array<any> = []
|
||||
element.tags.forEach(tag => {
|
||||
tags.push(
|
||||
<span className="building-tag">
|
||||
<span className="tag-span rp-tagSpan">
|
||||
<i className="fa fa-tag"></i> {tag}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
});
|
||||
let buildId: string = element.id.split('-')[0];
|
||||
let phase: string = element.phase ? element.phase : 'Cannot retrieve phase';
|
||||
let started: string = element.started ? element.started : 'Cannot retrieve start date';
|
||||
let message: string;
|
||||
if (element.trigger_metadata && element.trigger_metadata.commit_info && element.trigger_metadata.commit_info.message){
|
||||
message = element.trigger_metadata.commit_info.message;
|
||||
}
|
||||
else {
|
||||
message = 'Cannot retrieve message';
|
||||
}
|
||||
buildsTable.push(
|
||||
<tr key={buildId}>
|
||||
<td>{phase}</td>
|
||||
<td>{buildId}</td>
|
||||
<td>{message}</td>
|
||||
<td>{moment(started).format('l')}</td>
|
||||
<td>{tags}</td>
|
||||
</tr>
|
||||
)
|
||||
});
|
||||
// Build the table
|
||||
table = (
|
||||
<table className="co-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>BUILD ID</td>
|
||||
<td>TRIGGERED BY</td>
|
||||
<td>DATE STARTED</td>
|
||||
<td>TAGS</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{buildsTable}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
return(
|
||||
<div className="row">
|
||||
{table}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
import * as React from "react";
|
||||
|
||||
interface IHeader {
|
||||
name: string;
|
||||
namespace: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* The Component for the header of the repo page
|
||||
* @param {string} name - The name of the repository
|
||||
* @param {string} namespace - The namespace of the repository
|
||||
*/
|
||||
class repoHeader extends React.Component<IHeader, {}> {
|
||||
static propTypes = {
|
||||
name: React.PropTypes.string.isRequired,
|
||||
namespace: React.PropTypes.string.isRequired
|
||||
}
|
||||
render () {
|
||||
return(
|
||||
<div className="row rp-header__row">
|
||||
<div className="rp-title">{this.props.namespace}/{this.props.name}</div>
|
||||
<div className="rp-button">
|
||||
<div className="dropdown">
|
||||
<button className="btn rp-button__dropdown dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
<span className="rp-button__text">
|
||||
Run with <span className="rp-button__text--bold">Docker</span>
|
||||
</span>
|
||||
<span className="caret"></span>
|
||||
</button>
|
||||
<ul className="dropdown-menu">
|
||||
<li><a href="#">Squashed Docker Image</a></li>
|
||||
<li><a href="#">Rocket Fetch</a></li>
|
||||
<li><a href="#">Basic Docker Pull</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default repoHeader;
|
||||
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
import "sass/repo-page/repo-page.scss";
|
||||
import repoHeader from "./header";
|
||||
import repoSidebar from "./sidebar";
|
||||
import repoBody from "./body";
|
||||
|
||||
rpHeaderDirective.$inject = [
|
||||
'reactDirective',
|
||||
];
|
||||
|
||||
export function rpHeaderDirective(reactDirective) {
|
||||
return reactDirective(repoHeader);
|
||||
}
|
||||
|
||||
|
||||
rpSidebarDirective.$inject = [
|
||||
'reactDirective',
|
||||
];
|
||||
|
||||
export function rpSidebarDirective(reactDirective) {
|
||||
return reactDirective(repoSidebar);
|
||||
}
|
||||
|
||||
|
||||
rpBodyDirective.$inject = [
|
||||
'reactDirective',
|
||||
'ApiService',
|
||||
];
|
||||
|
||||
export function rpBodyDirective(reactDirective, ApiService) {
|
||||
return reactDirective(repoBody, undefined, {}, {api: ApiService});
|
||||
}
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
import * as React from "react";
|
||||
import * as moment from "moment";
|
||||
|
||||
interface tag {
|
||||
image_id: string;
|
||||
last_modified: string;
|
||||
name: string;
|
||||
size: number;
|
||||
}
|
||||
|
||||
interface ISidebar {
|
||||
isPublic: string;
|
||||
tags: Array<tag>;
|
||||
repository: Object
|
||||
}
|
||||
|
||||
/**
|
||||
* The Component for the sidebar of the repo page
|
||||
* @param {string} isPublic - A string that states whether the repository is private or public
|
||||
* @param {tag} tags - The list of tags for the repository
|
||||
* @param {object} repository - The list of properties for the repository
|
||||
*/
|
||||
class repoSidebar extends React.Component<ISidebar, {}> {
|
||||
static propTypes = {
|
||||
isPublic: React.PropTypes.string.isRequired,
|
||||
tags: React.PropTypes.array.isRequired,
|
||||
repository: React.PropTypes.object.isRequired
|
||||
}
|
||||
render () {
|
||||
let isPublic: string = (this.props.isPublic) ? "Public" : "Private";
|
||||
let sortedTags: Array<any> = [];
|
||||
let tagRows: Array<any> = [];
|
||||
let badgeIcon: string = (this.props.isPublic) ? "rp-badge__icon--public" : "rp-badge__icon--private";
|
||||
let repository: any = this.props.repository;
|
||||
let sharing: string = repository.company || repository.namespace;
|
||||
|
||||
if (Object.keys(this.props.tags).length > 0) {
|
||||
for (let tagObject in this.props.tags) {
|
||||
sortedTags.push({
|
||||
name: this.props.tags[tagObject].name,
|
||||
lastModified: Date.parse(this.props.tags[tagObject].last_modified)
|
||||
});
|
||||
}
|
||||
|
||||
sortedTags = sortedTags.sort(function(a, b) {
|
||||
return b.lastModified - a.lastModified;
|
||||
});
|
||||
|
||||
sortedTags.slice(0,5).forEach(function(el, i){
|
||||
tagRows.push(
|
||||
<tr>
|
||||
<td>
|
||||
<i className="fa fa-tag rp-imagesTable__tagIcon" aria-hidden="true"></i>
|
||||
{el.name}
|
||||
</td>
|
||||
<td>
|
||||
{moment(el.lastModified).fromNow()}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
}
|
||||
else {
|
||||
tagRows.push(
|
||||
<tr>
|
||||
<td>
|
||||
No Tags Available
|
||||
</td>
|
||||
<td>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
|
||||
return(
|
||||
<div>
|
||||
<div className="rp-badge">
|
||||
<div className={badgeIcon}>
|
||||
{isPublic}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rp-sharing">
|
||||
{sharing} is sharing this container {this.props.isPublic ? "publically" : "privately"}
|
||||
</div>
|
||||
<div className="rp-imagesHeader">
|
||||
Latest Images
|
||||
</div>
|
||||
<div>
|
||||
<table className="co-table co-fixed-table rp-imagesTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="rp-imagesTable__headerCell">NAME</th>
|
||||
<th className="rp-imagesTable__headerCell">LAST MODIFIED</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{tagRows}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default repoSidebar;
|
||||
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import * as React from 'react';
|
||||
import * as moment from "moment";
|
||||
|
||||
export default class Throbber extends React.Component<any, any> {
|
||||
render () {
|
||||
return(
|
||||
<div className="co-m-loader co-an-fade-in-out rp-throbber">
|
||||
<div className="co-m-loader-dot__one"></div>
|
||||
<div className="co-m-loader-dot__two"></div>
|
||||
<div className="co-m-loader-dot__three"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
(function() {
|
||||
/**
|
||||
* Experiment enable new public repo
|
||||
*/
|
||||
angular.module('quayPages').config(['pages', function(pages) {
|
||||
pages.create('public-repo-exp', 'public-repo-exp.html', ExpCtrl, {
|
||||
'newLayout': true
|
||||
});
|
||||
}]);
|
||||
|
||||
function ExpCtrl($scope, CookieService) {
|
||||
$scope.isEnabled = CookieService.get('quay.public-repo-exp') == 'true';
|
||||
|
||||
$scope.setEnabled = function(value) {
|
||||
$scope.isEnabled = value;
|
||||
CookieService.putPermanent('quay.public-repo-exp', value.toString());
|
||||
};
|
||||
}
|
||||
}());
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
import { PageServiceImpl } from './services/page/page.service.impl';
|
||||
import { rpHeaderDirective, rpBodyDirective, rpSidebarDirective } from './directives/components/pages/repo-page/main';
|
||||
import * as angular from 'angular';
|
||||
|
||||
|
||||
|
|
@ -7,7 +6,4 @@ import * as angular from 'angular';
|
|||
* TODO: Needed for non-TypeScript components/services to register themselves. Remove once they are migrated.
|
||||
*/
|
||||
export const QuayPagesModule: ng.IModule = angular.module('quayPages', [])
|
||||
.constant('pages', new PageServiceImpl())
|
||||
.directive('rpHeader', rpHeaderDirective)
|
||||
.directive('rpSidebar', rpSidebarDirective)
|
||||
.directive('rpBody', rpBodyDirective);
|
||||
.constant('pages', new PageServiceImpl());
|
||||
|
|
|
|||
|
|
@ -154,9 +154,6 @@ function provideRoutes($routeProvider: ng.route.IRouteProvider,
|
|||
// Confirm Invite
|
||||
.route('/confirminvite', 'confirm-invite')
|
||||
|
||||
// Public Repo Experiments
|
||||
.route('/__exp/publicRepo', 'public-repo-exp')
|
||||
|
||||
// 404/403
|
||||
.route('/:catchall', 'error-view')
|
||||
.route('/:catch/:all', 'error-view')
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
<div class="page-content">
|
||||
<div class="cor-title">
|
||||
<span class="cor-title-link"></span>
|
||||
<span class="cor-title-content">Experiment: New Public Repo Page Layout</span>
|
||||
</div>
|
||||
<div class="co-main-content-panel">
|
||||
<button class="btn btn-success" ng-if="!isEnabled" ng-click="setEnabled(true)">Enable Experiment</button>
|
||||
<button class="btn btn-failure" ng-if="isEnabled" ng-click="setEnabled(false)">Disable Experiment</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -26,11 +26,10 @@ var config = {
|
|||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.s?css$/,
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
"style-loader",
|
||||
"css-loader?minimize=true",
|
||||
"sass-loader",
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Reference in a new issue