mirror of https://github.com/docker/docs.git
Merge pull request #161 from kitematic/jmorgan_add_tags
Add tag dropdown for creating containers with a specific image tag
This commit is contained in:
Sean Li
commit
e42a47659a
|
|
@ -161,23 +161,42 @@ var ContainerDetails = React.createClass({
|
|||
}
|
||||
}
|
||||
|
||||
var name = this.props.container.Name;
|
||||
var image = this.props.container.Config.Image;
|
||||
var disabledClass = '';
|
||||
if (!this.props.container.State.Running) {
|
||||
disabledClass = 'disabled';
|
||||
}
|
||||
|
||||
var buttonClass = React.addons.classSet({
|
||||
btn: true, 'btn-action': true,
|
||||
'with-icon': true,
|
||||
disabled: !this.props.container.State.Running
|
||||
});
|
||||
var dropdownButtonClass = React.addons.classSet({
|
||||
btn: true,
|
||||
'btn-action': true,
|
||||
'with-icon': true,
|
||||
'dropdown-toggle': true,
|
||||
disabled: !this.props.container.State.Running
|
||||
});
|
||||
|
||||
var textButtonClasses = React.addons.classSet({
|
||||
'btn': true,
|
||||
'btn-action': true,
|
||||
'only-icon': true,
|
||||
'active': this.state.page === this.PAGE_LOGS
|
||||
'active': this.state.page === this.PAGE_LOGS,
|
||||
disabled: !this.props.container.State.Running
|
||||
});
|
||||
|
||||
var gearButtonClass = React.addons.classSet({
|
||||
'btn': true,
|
||||
'btn-action': true,
|
||||
'only-icon': true,
|
||||
'active': this.state.page === this.PAGE_SETTINGS
|
||||
'active': this.state.page === this.PAGE_SETTINGS,
|
||||
disabled: !this.props.container.State.Running
|
||||
});
|
||||
|
||||
var name = this.props.container.Name;
|
||||
var image = this.props.container.Config.Image;
|
||||
|
||||
return (
|
||||
<div className="details">
|
||||
<div className="details-header">
|
||||
|
|
@ -186,16 +205,16 @@ var ContainerDetails = React.createClass({
|
|||
</div>
|
||||
<div className="details-header-actions">
|
||||
<div className="action btn-group">
|
||||
<a className="btn btn-action with-icon" onClick={this.handleClick}><span className="icon icon-preview-2"></span><span className="content">View</span></a><a className="btn btn-action with-icon dropdown-toggle"><span className="icon-dropdown icon icon-arrow-37"></span></a>
|
||||
<a className={buttonClass} onClick={this.handleClick}><span className="icon icon-preview-2"></span><span className="content">View</span></a><a className={dropdownButtonClass}><span className="icon-dropdown icon icon-arrow-37"></span></a>
|
||||
</div>
|
||||
<div className="action">
|
||||
<a className="btn btn-action with-icon dropdown-toggle" onClick={this.handleClick}><span className="icon icon-folder-1"></span> <span className="content">Volumes</span> <span className="icon-dropdown icon icon-arrow-37"></span></a>
|
||||
<a className={dropdownButtonClass} onClick={this.handleClick}><span className="icon icon-folder-1"></span> <span className="content">Volumes</span> <span className="icon-dropdown icon icon-arrow-37"></span></a>
|
||||
</div>
|
||||
<div className="action">
|
||||
<a className="btn btn-action with-icon" onClick={this.handleClick}><span className="icon icon-refresh"></span> <span className="content">Restart</span></a>
|
||||
<a className={buttonClass} onClick={this.handleClick}><span className="icon icon-refresh"></span> <span className="content">Restart</span></a>
|
||||
</div>
|
||||
<div className="action">
|
||||
<a className="btn btn-action with-icon" onClick={this.handleClick}><span className="icon icon-window-code-3"></span> <span className="content">Terminal</span></a>
|
||||
<a className={buttonClass} onClick={this.handleClick}><span className="icon icon-window-code-3"></span> <span className="content">Terminal</span></a>
|
||||
</div>
|
||||
<div className="details-header-actions-rhs tabs btn-group">
|
||||
<a className={textButtonClasses} onClick={this.showLogs}><span className="icon icon-text-wrapping-2"></span></a>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,13 @@
|
|||
var async = require('async');
|
||||
var $ = require('jquery');
|
||||
var assign = require('object-assign');
|
||||
var React = require('react/addons');
|
||||
var Modal = require('react-bootstrap/Modal');
|
||||
var Modal = require('react-bootstrap').Modal;
|
||||
var OverlayTrigger = require('react-bootstrap');
|
||||
var Popover = require('react-bootstrap/Popover');
|
||||
var SplitButton = require('react-bootstrap/SplitButton');
|
||||
var MenuItem = require('react-bootstrap/MenuItem');
|
||||
|
||||
var RetinaImage = require('react-retina-image');
|
||||
var ContainerStore = require('./ContainerStore');
|
||||
|
||||
|
|
@ -12,6 +18,8 @@ var ContainerModal = React.createClass({
|
|||
query: '',
|
||||
results: ContainerStore.recommended(),
|
||||
loading: false,
|
||||
tags: {},
|
||||
active: null,
|
||||
};
|
||||
},
|
||||
componentDidMount: function () {
|
||||
|
|
@ -67,11 +75,52 @@ var ContainerModal = React.createClass({
|
|||
}, 200);
|
||||
}
|
||||
},
|
||||
handleClick: function (event) {
|
||||
var name = event.target.getAttribute('name');
|
||||
var self = this;
|
||||
handleClick: function (name, event) {
|
||||
ContainerStore.create(name, 'latest', function (err, containerName) {
|
||||
self.props.onRequestHide();
|
||||
this.props.onRequestHide();
|
||||
}.bind(this));
|
||||
},
|
||||
handleTagClick: function (tag, name, event) {
|
||||
ContainerStore.create(name, tag, function (err, containerName) {
|
||||
this.props.onRequestHide();
|
||||
}.bind(this));
|
||||
},
|
||||
handleDropdownClick: function (name, event) {
|
||||
this.setState({
|
||||
active: name
|
||||
});
|
||||
if (this.state.tags[name]) {
|
||||
return;
|
||||
}
|
||||
$.get('https://registry.hub.docker.com/v1/repositories/' + name + '/tags', function (result) {
|
||||
var res = {};
|
||||
res[name] = result;
|
||||
console.log(assign(this.state.tags, res));
|
||||
this.setState({
|
||||
tags: assign(this.state.tags, res)
|
||||
});
|
||||
}.bind(this));
|
||||
},
|
||||
handleModalClick: function (event) {
|
||||
if (!this.state.active) {
|
||||
return;
|
||||
}
|
||||
if (!$('.popover').is(event.target)) {
|
||||
this.setState({
|
||||
active: null
|
||||
});
|
||||
}
|
||||
},
|
||||
componentDidUpdate: function () {
|
||||
if (!this.state.active) {
|
||||
return;
|
||||
}
|
||||
var $dropdown = $(this.getDOMNode()).find('[data-name="' + this.state.active + '"]');
|
||||
var $popover = $(this.getDOMNode()).find('.popover');
|
||||
|
||||
$popover.offset({
|
||||
top: $dropdown.offset().top + 32,
|
||||
left: $dropdown.offset().left - $popover.width() / 2 + 11
|
||||
});
|
||||
},
|
||||
render: function () {
|
||||
|
|
@ -87,6 +136,7 @@ var ContainerModal = React.createClass({
|
|||
} else {
|
||||
name = <span>{r.name}</span>;
|
||||
}
|
||||
|
||||
return (
|
||||
<li key={r.name}>
|
||||
<div className="info">
|
||||
|
|
@ -100,8 +150,11 @@ var ContainerModal = React.createClass({
|
|||
</div>
|
||||
<div className="action">
|
||||
<div className="btn-group">
|
||||
<a className="btn btn-action" name={r.name} onClick={self.handleClick}>Create</a>
|
||||
<a className="btn btn-action with-icon dropdown-toggle"><span className="icon-dropdown icon icon-arrow-58"></span></a>
|
||||
<button type="button" className="btn btn-primary" onClick={self.handleClick.bind(self, r.name)}>Create</button>
|
||||
<button type="button" className="btn btn-primary dropdown-toggle" onClick={self.handleDropdownClick.bind(self, r.name)} data-name={r.name}>
|
||||
<span className="caret"></span>
|
||||
<span className="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
|
@ -137,26 +190,50 @@ var ContainerModal = React.createClass({
|
|||
'search-icon': true
|
||||
});
|
||||
|
||||
var question = (
|
||||
<div className="question">
|
||||
<OverlayTrigger trigger="hover" placement="bottom" overlay={<Popover>An image is a template for a container.</Popover>}>
|
||||
<span>What's an image?</span>
|
||||
</OverlayTrigger>
|
||||
</div>
|
||||
);
|
||||
|
||||
var tagData = self.state.tags[this.state.active];
|
||||
if (tagData) {
|
||||
var list = tagData.map(function (t) {
|
||||
return <li key={t.name} onClick={self.handleTagClick.bind(self, t.name, self.state.active)}>{t.name}</li>;
|
||||
});
|
||||
tags = (
|
||||
<ul>
|
||||
{list}
|
||||
</ul>
|
||||
);
|
||||
} else {
|
||||
tags = <RetinaImage className="tags-loading" src="loading.png"/>;
|
||||
}
|
||||
|
||||
var popoverClasses = React.addons.classSet({
|
||||
popover: true,
|
||||
hidden: !this.state.active
|
||||
});
|
||||
|
||||
return (
|
||||
<Modal {...this.props} animation={false} className="create-modal">
|
||||
<div className="modal-body">
|
||||
<div className="modal-body" onClick={this.handleModalClick}>
|
||||
<section className="search">
|
||||
<div className="search-bar">
|
||||
<input type="search" ref="searchInput" className="form-control" placeholder="Find an existing image" onChange={this.handleChange}/>
|
||||
<div className={magnifierClasses}></div>
|
||||
<RetinaImage className={loadingClasses} src="loading.png"/>
|
||||
</div>
|
||||
<div className="question">
|
||||
<a href="#"><span>What's an image?</span></a>
|
||||
</div>
|
||||
<div className="results">
|
||||
<div className="title">{title}</div>
|
||||
{results}
|
||||
</div>
|
||||
</section>
|
||||
<aside className="custom">
|
||||
<h4 className="title">Create a Custom Container</h4>
|
||||
</aside>
|
||||
<Popover placement="bottom" className={popoverClasses}>
|
||||
{tags}
|
||||
</Popover>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -269,12 +269,13 @@ var ContainerStore = assign(EventEmitter.prototype, {
|
|||
async.map(recommended, function (repository, callback) {
|
||||
$.get('https://registry.hub.docker.com/v1/search?q=' + repository, function (data) {
|
||||
var results = data.results;
|
||||
console.log(repository, data);
|
||||
callback(null, _.find(results, function (r) {
|
||||
return r.name === repository;
|
||||
}));
|
||||
});
|
||||
}, function (err, results) {
|
||||
_recommended = results;
|
||||
_recommended = results.filter(function(r) { return !!r; });
|
||||
callback();
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
var React = require('react/addons');
|
||||
var Router = require('react-router');
|
||||
var Modal = require('react-bootstrap/Modal');
|
||||
var RetinaImage = require('react-retina-image');
|
||||
var ModalTrigger = require('react-bootstrap/ModalTrigger');
|
||||
var ContainerModal = require('./ContainerModal.react');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,217 @@
|
|||
.create-modal {
|
||||
@modal-padding: 32px;
|
||||
@search-width: 372px;
|
||||
@custom-width: 270px;
|
||||
.modal-dialog {
|
||||
margin-top: 80px;
|
||||
width: calc(@modal-padding + @search-width + 2 * @modal-padding + @custom-width);
|
||||
}
|
||||
.modal-content {
|
||||
//box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.10);
|
||||
border: none; //1px solid #ccc;
|
||||
height: 650px;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
.modal-body {
|
||||
flex: 1 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 32px 32px;
|
||||
|
||||
aside.custom {
|
||||
flex: 0 auto;
|
||||
padding-left: 32px;
|
||||
min-width: 270px;
|
||||
}
|
||||
|
||||
.popover {
|
||||
width: 180px;
|
||||
text-align: center;
|
||||
|
||||
.popover-content {
|
||||
max-height: 300px;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
li {
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
background: @brand-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tags-loading {
|
||||
text-align: center;
|
||||
margin: 14px auto;
|
||||
text-align: center;
|
||||
-webkit-animation-name: spin;
|
||||
-webkit-animation-duration: 1.8s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-webkit-animation-timing-function: linear;
|
||||
}
|
||||
}
|
||||
|
||||
section.search {
|
||||
min-width: 404px;
|
||||
padding-right: 32px;
|
||||
border-right: 1px solid #eee;
|
||||
|
||||
.question {
|
||||
color: @gray-lightest;
|
||||
font-size: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
position: relative;
|
||||
.loading {
|
||||
position: absolute;
|
||||
left: 13px;
|
||||
top: 10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
-webkit-animation-name: spin;
|
||||
-webkit-animation-duration: 1.8s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-webkit-animation-timing-function: linear;
|
||||
}
|
||||
.search-icon {
|
||||
font-size: 20px;
|
||||
color: @gray-lighter;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 14px;
|
||||
}
|
||||
input {
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
height: 38px;
|
||||
padding: 8px 16px 8px 40px;
|
||||
color: @gray-darkest;
|
||||
margin-bottom: 3px;
|
||||
border-color: @gray-lightest;
|
||||
box-shadow: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border-color: @gray-lighter;
|
||||
}
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: #ddd;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.results {
|
||||
overflow: auto;
|
||||
padding-bottom: 80px;
|
||||
|
||||
.no-results {
|
||||
text-align: center;
|
||||
h3 {
|
||||
color: #ABC0C0;
|
||||
font-size: 16px;
|
||||
margin-top: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 0 auto;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 10px;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
&:hover {
|
||||
background-color: lighten(@gray-lightest, 17.5%);
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 8px 14px 5px 14px;
|
||||
//margin: 12px;
|
||||
border-bottom: 1px solid #eee;
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.info {
|
||||
.name {
|
||||
color: @gray-darkest;
|
||||
max-width: 278px;
|
||||
img {
|
||||
margin-right: 6px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.properties {
|
||||
color: @gray-lighter;
|
||||
margin-top: 2px;
|
||||
|
||||
.star-count {
|
||||
font-size: 10px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
left: 1px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
font-size: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
flex: 0 auto;
|
||||
}
|
||||
.action {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
text-align: right;
|
||||
flex: 1 auto;
|
||||
ul {
|
||||
text-align: center;
|
||||
ul {
|
||||
overflow: auto;
|
||||
max-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.icon {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-backdrop.in {
|
||||
background: rgba(227,230,230,0.95);
|
||||
opacity: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1,12 +1,15 @@
|
|||
@import "bootstrap/bootstrap.less";
|
||||
@import "variables.less";
|
||||
@import "clearsans.less";
|
||||
@import "theme.less";
|
||||
@import "icons.less";
|
||||
@import "icons-filled.less";
|
||||
@import "retina.less";
|
||||
@import "setup.less";
|
||||
@import "radial.less";
|
||||
@import "header.less";
|
||||
@import "containers.less";
|
||||
@import "container-modal.less";
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
|
|
@ -41,177 +44,14 @@ html, body {
|
|||
background-color: rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.create-modal {
|
||||
@modal-padding: 32px;
|
||||
@search-width: 372px;
|
||||
@custom-width: 270px;
|
||||
.modal-dialog {
|
||||
margin-top: 8%;
|
||||
width: calc(@modal-padding + @search-width + 2 * @modal-padding + @custom-width);
|
||||
}
|
||||
.modal-content {
|
||||
//box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.10);
|
||||
border: none; //1px solid #ccc;
|
||||
height: 610px;
|
||||
display: flex;
|
||||
}
|
||||
.modal-body {
|
||||
flex: 1 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 32px 32px;
|
||||
.popover {
|
||||
font-family: 'Clear Sans', sans-serif;
|
||||
|
||||
aside.custom {
|
||||
flex: 0 auto;
|
||||
padding-left: 32px;
|
||||
min-width: 270px;
|
||||
}
|
||||
|
||||
section.search {
|
||||
min-width: 404px;
|
||||
padding-right: 32px;
|
||||
border-right: 1px solid #eee;
|
||||
|
||||
.question {
|
||||
a {
|
||||
color: @gray-lightest;
|
||||
&:hover {
|
||||
color: darken(@gray-lightest, 10%);
|
||||
}
|
||||
}
|
||||
font-size: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
position: relative;
|
||||
.loading {
|
||||
position: absolute;
|
||||
left: 13px;
|
||||
top: 10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
-webkit-animation-name: spin;
|
||||
-webkit-animation-duration: 1.8s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-webkit-animation-timing-function: linear;
|
||||
}
|
||||
.search-icon {
|
||||
font-size: 20px;
|
||||
color: @gray-lighter;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 14px;
|
||||
}
|
||||
input {
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
height: 38px;
|
||||
padding: 8px 16px 8px 40px;
|
||||
color: @gray-darkest;
|
||||
margin-bottom: 3px;
|
||||
border-color: @gray-lightest;
|
||||
box-shadow: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border-color: @gray-lighter;
|
||||
}
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: #ddd;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.results {
|
||||
overflow: auto;
|
||||
|
||||
.no-results {
|
||||
text-align: center;
|
||||
h3 {
|
||||
color: #ABC0C0;
|
||||
font-size: 16px;
|
||||
margin-top: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 0 auto;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 10px;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
&:hover {
|
||||
background-color: lighten(@gray-lightest, 17.5%);
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 8px 14px 5px 14px;
|
||||
//margin: 12px;
|
||||
border-bottom: 1px solid #eee;
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.info {
|
||||
.name {
|
||||
color: @gray-darkest;
|
||||
max-width: 278px;
|
||||
img {
|
||||
margin-right: 6px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.properties {
|
||||
color: @gray-lighter;
|
||||
margin-top: 2px;
|
||||
|
||||
.star-count {
|
||||
font-size: 10px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
left: 1px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
font-size: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
flex: 0 auto;
|
||||
}
|
||||
.action {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
text-align: right;
|
||||
flex: 1 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-backdrop.in {
|
||||
background: rgba(227,230,230,0.95);
|
||||
opacity: 1;
|
||||
height: 100%;
|
||||
color: @gray-normal;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.10);
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@ h4 {
|
|||
color: darken(@btn-color, 10%);
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
|
|
|||
Loading…
Reference in New Issue