- Added favorites feature for containers. (#3419)

- Fixed side-bar width css, added cursor: pointer to containers.

Signed-off-by: Daniel Amram <danielamram0@gmail.com>

- Added favorites feature for containers.
- Fixed side-bar width css, added cursor: pointer to containers.

Signed-off-by: Daniel Amram <danielamram0@gmail.com>

src/actions/ContainerActions.js

@@ -1,5 +1,6 @@
 import alt from '../alt';
 import dockerUtil from '../utils/DockerUtil';
+import _ from "underscore";
 
 class ContainerActions {
 
@@ -42,6 +43,17 @@ class ContainerActions {
   active (name) {
     dockerUtil.active(name);
   }
+
+  toggleFavorite (name) {
+    let favorites = JSON.parse(localStorage.getItem('containers.favorites'));
+    if (favorites.includes(name)) {
+      favorites = favorites.filter(favoriteName => favoriteName !== name);
+    } else {
+      favorites = [...favorites, name];
+    }
+    localStorage.setItem('containers.favorites', JSON.stringify(favorites));
+    this.dispatch({name});
+  }
 }
 
 export default alt.createActions(ContainerActions);

src/actions/ContainerServerActions.js

@@ -17,7 +17,8 @@ class ContainerServerActions {
       'kill',
       'stopped',
       'log',
-      'logs'
+      'logs',
+      'toggleFavorite'
     );
   }
 }

src/components/ContainerListItem.react.js

@@ -9,13 +9,10 @@ import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 import containerActions from '../actions/ContainerActions';
 
 var ContainerListItem = React.createClass({
-  handleItemMouseEnter: function () {
-    var $action = $(this.getDOMNode()).find('.action');
-    $action.show();
-  },
-  handleItemMouseLeave: function () {
-    var $action = $(this.getDOMNode()).find('.action');
-    $action.hide();
+  toggleFavoriteContainer: function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    containerActions.toggleFavorite(this.props.container.Name);
   },
   handleDeleteContainer: function (e) {
     e.preventDefault();
@@ -108,6 +105,7 @@ var ContainerListItem = React.createClass({
             </div>
           </div>
           <div className="action">
+            <span className={container.Favorite ? 'btn circular favorite' : 'btn circular'} onClick={this.toggleFavoriteContainer}><span className="icon icon-favorite"></span></span>
             <span className="btn circular" onClick={this.handleDeleteContainer}><span className="icon icon-delete"></span></span>
           </div>
         </li>

src/components/Containers.react.js

@@ -32,17 +32,23 @@ var Containers = React.createClass({
 
   sorted: function (containers) {
     return _.values(containers).sort(function (a, b) {
-      if (a.State.Downloading && !b.State.Downloading) {
+      if (a.Favorite && !b.Favorite) {
         return -1;
-      } else if (!a.State.Downloading && b.State.Downloading) {
+      } else if (!a.Favorite && b.Favorite) {
         return 1;
       } else {
-        if (a.State.Running && !b.State.Running) {
+        if (a.State.Downloading && !b.State.Downloading) {
           return -1;
-        } else if (!a.State.Running && b.State.Running) {
+        } else if (!a.State.Downloading && b.State.Downloading) {
           return 1;
         } else {
-          return a.Name.localeCompare(b.Name);
+          if (a.State.Running && !b.State.Running) {
+            return -1;
+          } else if (!a.State.Running && b.State.Running) {
+            return 1;
+          } else {
+            return a.Name.localeCompare(b.Name);
+          }
         }
       }
     });

src/stores/ContainerStore.js

@@ -191,6 +191,16 @@ class ContainerStore {
     this.emitChange();
   }
 
+  toggleFavorite ({name}) {
+    let containers = this.containers;
+
+    if (containers[name]) {
+      containers[name].Favorite = !containers[name].Favorite;
+    }
+
+    this.setState({containers});
+  }
+
   static generateName (repo) {
     const base = _.last(repo.split('/'));
     const names = _.keys(this.getState().containers);

src/utils/DockerUtil.js

@@ -262,6 +262,8 @@ var DockerUtil = {
           return;
         }
         containerServerActions.allUpdated({containers: _.indexBy(containers.concat(_.values(this.placeholders)), 'Name')});
+        let favorites = JSON.parse(localStorage.getItem('containers.favorites')) || [];
+        favorites.forEach(name => containerServerActions.toggleFavorite({name}));
         this.logs();
         this.fetchAllImages();
       });

styles/left-panel.less

@@ -137,8 +137,14 @@
         height: 45px;
         border-top: 1px solid transparent;
         border-bottom: 1px solid transparent;
+        & {
+          cursor: pointer;
+        }
         &:hover {
           background-color: @color-box-button;
+          .action .btn {
+            visibility: visible;
+          }
         }
         .info {
           margin-left: 1rem;
@@ -163,17 +169,29 @@
           }
         }
         .action {
-          display: none;
+          display: block;
           flex: 1;
           position: relative;
           top: 0.4rem;
           text-align: right;
           .btn {
+            visibility: hidden;
+            cursor: pointer;
             border: 1px solid @gray-lighter;
+            margin-left: 2px;
             .icon {
               color: @gray-lighter;
             }
           }
+          .favorite {
+            visibility: visible;
+          }
+          .btn:hover {
+            border: 1px solid @gray-normal;
+            .icon {
+              color: @gray-normal;
+            }
+          }
         }
         .state {
           margin-top: 0.6rem;

styles/variables.less

@@ -28,7 +28,7 @@
 
 @border-radius:         0.2rem;
 
-@sidebar-width:                   220px;
+@sidebar-width:                   230px;
 @sidebar-text-overflow-width:     140px;
 
 @container-state-size:        20px;