-
-
+ buttons = (
+
);
}
+
+ let username;
+ if (this.props.hideLogin) {
+ username = null;
+ } else if (this.state.username) {
+ username = (
+
+ {this.state.username} {this.state.verified ? null : '(Unverified)'}
+
+ );
+ } else {
+ username = (
+
+ Log In
+
+ );
+ }
+
+ let headerClasses = classNames({
+ bordered: !this.props.hideLogin,
+ header: true,
+ 'no-drag': true
+ });
+
+ return (
+
+ {buttons}
+
+ {updateWidget}
+
+
+ {username}
+
+
+ );
}
});
diff --git a/src/components/ImageCard.react.js b/src/components/ImageCard.react.js
index 67a0a0a229..5a94d48859 100644
--- a/src/components/ImageCard.react.js
+++ b/src/components/ImageCard.react.js
@@ -1,13 +1,15 @@
var $ = require('jquery');
var React = require('react/addons');
var Router = require('react-router');
+var shell = require('shell');
var RetinaImage = require('react-retina-image');
var metrics = require('../utils/MetricsUtil');
var OverlayTrigger = require('react-bootstrap').OverlayTrigger;
var Tooltip = require('react-bootstrap').Tooltip;
-var util = require('../utils/Util');
var containerActions = require('../actions/ContainerActions');
var containerStore = require('../stores/ContainerStore');
+var tagStore = require('../stores/TagStore');
+var tagActions = require('../actions/TagActions');
var ImageCard = React.createClass({
mixins: [Router.Navigation],
@@ -17,6 +19,23 @@ var ImageCard = React.createClass({
chosenTag: 'latest'
};
},
+ componentDidMount: function () {
+ tagStore.listen(this.update);
+ },
+ componentWillUnmount: function () {
+ tagStore.unlisten(this.update);
+ },
+ update: function () {
+ let repo = this.props.image.namespace + '/' + this.props.image.name;
+ let state = tagStore.getState();
+ if (this.state.tags.length && !state.tags[repo]) {
+ $(this.getDOMNode()).find('.tag-overlay').fadeOut(300);
+ }
+ this.setState({
+ loading: tagStore.getState().loading[repo] || false,
+ tags: tagStore.getState().tags[repo] || []
+ });
+ },
handleTagClick: function (tag) {
this.setState({
chosenTag: tag
@@ -25,72 +44,55 @@ var ImageCard = React.createClass({
$tagOverlay.fadeOut(300);
metrics.track('Selected Image Tag');
},
- handleClick: function (repository) {
+ handleClick: function () {
metrics.track('Created Container', {
- from: 'search'
+ from: 'search',
+ private: this.props.image.is_private,
+ official: this.props.image.namespace === 'library',
+ userowned: this.props.image.is_user_repo,
+ recommended: this.props.image.is_recommended
});
- let name = containerStore.generateName(repository);
- containerActions.run(name, repository, this.state.chosenTag);
+ let name = containerStore.generateName(this.props.image.name);
+ let repo = this.props.image.namespace === 'library' ? this.props.image.name : this.props.image.namespace + '/' + this.props.image.name;
+ containerActions.run(name, repo, this.state.chosenTag);
this.transitionTo('containerHome', {name});
},
- handleTagOverlayClick: function (name) {
- var $tagOverlay = $(this.getDOMNode()).find('.tag-overlay');
+ handleTagOverlayClick: function () {
+ let $tagOverlay = $(this.getDOMNode()).find('.tag-overlay');
$tagOverlay.fadeIn(300);
- $.get('https://registry.hub.docker.com/v1/repositories/' + name + '/tags', result => {
- this.setState({
- tags: result
- });
- });
+ tagActions.tags(this.props.image.namespace + '/' + this.props.image.name);
},
handleCloseTagOverlay: function () {
var $tagOverlay = $(this.getDOMNode()).find('.tag-overlay');
$tagOverlay.fadeOut(300);
},
handleRepoClick: function () {
- var $repoUri = 'https://registry.hub.docker.com/';
- if (this.props.image.is_official) {
- $repoUri = $repoUri + "_/";
+ var repoUri = 'https://registry.hub.docker.com/';
+ if (this.props.image.namespace === 'library') {
+ repoUri = repoUri + '_/' + this.props.image.name;
} else {
- $repoUri = $repoUri + "u/";
+ repoUri = repoUri + 'u/' + this.props.image.namespace + '/' + this.props.image.name;
}
- util.exec(['open', $repoUri + this.props.image.name]);
- },
- componentDidMount: function() {
- $.get('https://registry.hub.docker.com/v1/repositories/' + this.props.image.name + '/tags', result => {
- this.setState({
- tags: result,
- chosenTag: result[0].name
- });
- });
+ shell.openExternal(repoUri);
},
render: function () {
var self = this;
- var name;
- var imageNameTokens = this.props.image.name.split('/');
- var namespace;
- var repo;
- if (imageNameTokens.length > 1) {
- namespace = imageNameTokens[0];
- repo = imageNameTokens[1];
- } else {
- namespace = "official";
- repo = imageNameTokens[0];
- }
- if (this.props.image.is_official) {
+ let name;
+ if (this.props.image.namespace === 'library') {
name = (
-
{namespace}
+
official
View on Docker Hub}>
- {repo}
+ {this.props.image.name}
);
} else {
name = (
-
{namespace}
+
{this.props.image.namespace}
View on Docker Hub}>
- {repo}
+ {this.props.image.name}
);
@@ -111,12 +113,16 @@ var ImageCard = React.createClass({
imgsrc = 'http://kitematic.com/recommended/kitematic_html.png';
}
var tags;
- if (self.state.tags.length > 0) {
+ if (self.state.loading) {
+ tags =
;
+ } else if (self.state.tags.length === 0) {
+ tags =
No Tags;
+ } else {
var tagDisplay = self.state.tags.map(function (t) {
- if (t.name === self.state.chosenTag) {
- return
{t.name}
;
+ if (t === self.state.chosenTag) {
+ return
{t}
;
} else {
- return
{t.name}
;
+ return
{t}
;
}
});
tags = (
@@ -124,13 +130,15 @@ var ImageCard = React.createClass({
{tagDisplay}
;
}
- var officialBadge;
- if (this.props.image.is_official) {
- officialBadge = (
-
+ var badge = null;
+ if (this.props.image.namespace === 'library') {
+ badge = (
+
+ );
+ } else if (this.props.image.is_private) {
+ badge = (
+
);
}
return (
@@ -143,7 +151,7 @@ var ImageCard = React.createClass({