Added not found and auto tag selection for if only 1 tag is available (fixes #36)

app/components/NotFound.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const NotFound = () =>
+  <div>
+    <h3>404 page not found</h3>
+    <p>We are sorry but the page you are looking for does not exist.</p>
+  </div>
+
+export default NotFound;

app/views/AppContainer.jsx

@@ -3,7 +3,7 @@ import {
   BrowserRouter as Router,
   Route,
   Link,
-  Redirect
+  Switch
 } from 'react-router-dom'
 
 import RegistryInfo from '../api/RegistryInfo.jsx';
@@ -14,6 +14,7 @@ import LoginView from './LoginView.jsx';
 import Header from './sections/Header.jsx';
 import Footer from './sections/Footer.jsx';
 import ImageInfoView from './ImageInfoView.jsx';
+import NotFound from '../components/NotFound.jsx';
 
 export default class AppContainer extends React.Component {
   constructor(props){
@@ -43,10 +44,11 @@ export default class AppContainer extends React.Component {
           <Header registry={this.state.registry}/>
 
           <div className="container">
-            <Route exact path="/container" render={() => (<Redirect to="/"/>)} />
-            <Route path="/:container_name*/" component={HomeView}/>
-            <Route path="/:container_name*/tag/:tag_name" component={ImageInfoView}/>
-            <Route exact strict path="/login" component={LoginView}/>
+            <Switch>
+              <Route exact path="/:container_name*/" component={HomeView}/>
+              <Route exact strict path="/login" component={LoginView}/>
+              <Route component={NotFound}/>
+            </Switch>
           </div>
 
           <Footer registry={this.state.registry}/>

app/views/HomeView.jsx

@@ -6,6 +6,8 @@ import { debounce } from 'throttle-debounce';
 import queryString from 'query-string';
 import ContainerList from '../components/ContainerList.jsx';
 import TagList from '../components/TagList.jsx';
+import NotFound from '../components/NotFound.jsx'
+import Loader from 'react-loader';
 
 export default class HomeView extends Component {
   constructor(props){
@@ -31,6 +33,9 @@ export default class HomeView extends Component {
       tag: tag,
       error: undefined,
       tags_error: undefined,
+      container_not_found: false,
+      main_loaded: false,
+      active: false
     }
     // Debounce api calls
     this.updateList = debounce(250, this.updateList)
@@ -65,11 +70,14 @@ export default class HomeView extends Component {
 
   // API calls
   fetchContainerList(){
+    const loaded = this.state.container && !this.state.active ? false : true
     ContainerListAPI(this.state.container_filter)
     .then(function(response){
       this.setState({
         containers: response.data,
-        containers_loaded: true
+        containers_loaded: true,
+        main_loaded: loaded,
+        active: true
       })
     }.bind(this))
     .catch(function(response){
@@ -84,18 +92,28 @@ export default class HomeView extends Component {
 
   fetchTagsList(container=undefined, filter=undefined){
     const f = filter ? filter : this.state.tag_filter
+    if(!this.state.container){
+      return(null)
+    }
     TagsListAPI(container, f)
     .then(function(response){
+      const tag = (response.data.length === 1) ? response.data[0] : undefined
+      console.log(tag)
       this.setState({
         tags_list: response.data,
-        tags_loaded: true
+        tags_loaded: true,
+        main_loaded: true,
+        tag: tag
       })
+      if(tag){
+        this.props.history.push("/" + this.state.container + "/tag/" + tag)
+      }
     }.bind(this))
     .catch(function(response){
-      console.log("Error fetching tags list")
-      console.log(response)
       this.setState({
         tags_loaded: true,
+        main_loaded: true,
+        container_not_found: ((response.status === 404) ? true : false),
         tags_error: <div><div>Error loading data from Registry</div><div>status code: {response.status}</div></div>
       })
     }.bind(this))
@@ -221,10 +239,12 @@ export default class HomeView extends Component {
         )
     }
   }
-  // end Renderers
 
-  render() {
-    return (
+  renderPage(){
+    if(this.state.container_not_found){
+      return(<NotFound/>)
+    }
+    return(
       <div>
         <ContainerList
           filter={this.state.container_filter}
@@ -237,6 +257,15 @@ export default class HomeView extends Component {
         />
         {this.renderTagsList()}
       </div>
+    )
+  }
+  // end Renderers
+
+  render() {
+    return (
+      <Loader loaded={this.state.main_loaded} color="red">
+        {this.renderPage()}
+      </Loader>
     );
   }
 }

public/app.css

@@ -6,16 +6,6 @@ html, body{
   padding-top: 100px;
 }
 
-.loader {
-  position: relative;
-  top: 30px;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background: white;
-  z-index: 9999;
-}
-
 .col-left-border {
   min-height: 400px;
   height:100%;

server.rb

@@ -54,6 +54,7 @@ class CraneOp < Sinatra::Base
 
   def container_tags(repo, filter=nil)
     json = get("/v2/#{repo}/tags/list", conf, session)
+    return nil if json['tags'].nil?
     tags = json['tags'] || []
     if filter
       return sort_versions(tags.select{ |i| i.match(/#{filter}.*/)}).reverse