dockly 3.22.2 → 3.23.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockly",
-  "version": "3.22.2",
+  "version": "3.23.1",
   "description": "Immersive terminal interface for managing docker containers and services",
   "main": "index.js",
   "scripts": {
@@ -68,15 +68,15 @@
   "dependencies": {
     "blessed": "^0.1.81",
     "blessed-contrib": "^4.10.1",
-    "chalk": "2.4.2",
+    "chalk": "^4",
     "clipboardy": "^2.3.0",
     "command-line-args": "^5.1.2",
     "command-line-usage": "^5.0.5",
-    "dockerode": "2.5.8",
+    "dockerode": "3.3.4",
     "figures": "^2.0.0",
     "glob": "^7.2.0",
     "lockfile-lint": "^3.0.9",
-    "semver": "6.3.0"
+    "semver": "7.3.8"
   },
   "devDependencies": {
     "standard": "^12.0.1"

package/src/enum.js

@@ -0,0 +1,11 @@
+module.exports = {
+  ContainerState: {
+    created: 'created',
+    restarting: 'restarting',
+    running: 'running',
+    removing: 'removing',
+    paused: 'paused',
+    exited: 'exited',
+    dead: 'dead'
+  }
+}

package/src/screen.js

@@ -11,16 +11,17 @@ const MODES = require('../lib/modes')
 // from the user (index.js)
 const CONTAINERS_GRID_LAYOUT = {
   'actionsMenu': [4, 4, 4, 4],
-  'searchInput': [11, 0, 1, 12],
-  'actionStatus': [6, 0, 1, 10],
+  'help': [4, 4, 4, 4],
   'containerInfo': [2, 2, 8, 8],
+  'containerSortList': [4, 5, 3, 2],
   'containerList': [0, 0, 6, 10],
-  'containerLogs': [7, 0, 4, 12],
+  'actionStatus': [6, 0, 1, 10],
   'containerStatus': [0, 10, 2, 2],
   'containerUtilization': [2, 10, 3, 2],
   'containerVsImages': [5, 10, 2, 2],
-  'help': [4, 4, 4, 4],
-  'toolbar': [11, 0, 1, 12]
+  'containerLogs': [7, 0, 4, 12],
+  'toolbar': [11, 0, 1, 12],
+  'searchInput': [11, 0, 1, 12]
 }
 
 const SERVICES_GRID_LAYOUT = {
@@ -208,6 +209,7 @@ class screen {
       this.clearWidgets()
       this.toggleMode()
       this.screen.destroy()
+      // TODO refactor this so that all of the assets aren't reloaded on screen switch
       this.init()
     })
   }

package/src/widgetsTemplates/help.widget.template.js

@@ -83,6 +83,7 @@ class myWidget extends baseWidget() {
       align: 'left',
       width: '70%',
       height: '70%',
+      vi: true,
       top: 'center',
       left: 'center',
       content: 'Loading...'

package/src/widgetsTemplates/info.widget.template.js

@@ -50,7 +50,7 @@ class myWidget extends baseWidget() {
           // then show the information on the item
           this.getItemById(itemId, (err, data) => {
             if (!err) {
-              this.update(util.inspect(data))
+              this.update(util.inspect(data, { depth: null, colors: true }))
               this.screen.render()
             }
           })
@@ -97,6 +97,7 @@ class myWidget extends baseWidget() {
       align: 'left',
       width: '70%',
       height: '70%',
+      vi: true,
       top: 'center',
       left: 'center',
       content: 'Loading...'

package/src/widgetsTemplates/list.widget.template.js

@@ -90,6 +90,7 @@ class myWidget extends baseWidget(EventEmitter) {
       tags: true,
       interactive: true,
       border: 'line',
+      vi: true,
       hover: {
         bg: 'blue'
       },

package/widgets/actionStatus.widget.js

@@ -42,6 +42,7 @@ class myWidget extends baseWidget(EventEmitter) {
         fg: 'blue',
         ch: '|'
       },
+      vi: true,
       align: 'left',
       content: ''
     })

package/widgets/actionsMenu.widget.js

@@ -119,7 +119,7 @@ class myWidget extends baseWidget() {
   }
 
   getWidget () {
-    return this.grid.gridObj.set(...this.grid.gridLayout, this.blessed.list, {
+    return this.blessed.list({
       label: this.label,
       scrollable: true,
       alwaysScroll: true,
@@ -136,7 +136,12 @@ class myWidget extends baseWidget() {
         fg: 'blue',
         ch: '|'
       },
-      align: 'center'
+      vi: true,
+      align: 'center',
+      left: 'center',
+      top: 'center',
+      width: '33%',
+      height: '33%'
     })
   }
 

package/widgets/containers/containerList.widget.js

@@ -5,11 +5,14 @@ const figures = require('figures')
 
 const ListWidget = require('../../src/widgetsTemplates/list.widget.template')
 
+const ContainerState = require('../../src/enum.js').ContainerState
+
 class myWidget extends ListWidget {
   constructor ({ blessed = {}, contrib = {}, screen = {}, grid = {} }) {
     super({ blessed, contrib, screen, grid })
     this.containersList = {}
     this.containersListData = []
+    this.sortBy = ContainerState.running
   }
 
   getLabel () {
@@ -56,10 +59,20 @@ class myWidget extends ListWidget {
     }
   }
 
+  sortContainersByState (state) {
+    this.sortBy = state
+    this.refreshList()
+  }
+
+  // TODO refactor this
   formatList (containers) {
     const containerList = {}
     if (containers) {
       containers.forEach((container) => {
+        let containerPortPublic = (container.Ports[0] && container.Ports[0].PublicPort) ? String(container.Ports[0].PublicPort) : ''
+        let containerPortPrivate = (container.Ports[0] && container.Ports[0].PrivatePort) ? String(container.Ports[0].PrivatePort) : ''
+        let containerPort = containerPortPrivate + ':' + containerPortPublic
+
         containerList[container.Id] = [
           container.Id.substring(0, 5),
           container.Names[0].substring(0, 40),
@@ -67,7 +80,8 @@ class myWidget extends ListWidget {
           // remove any new lines or carriage return line feed from the string in container.Command
           container.Command.substring(0, 30).replace(/(\r\n|\n|\r)/gm, ''),
           container.State,
-          container.Status
+          container.Status,
+          containerPort
         ]
       })
     }
@@ -77,13 +91,20 @@ class myWidget extends ListWidget {
       let container = []
 
       container = containerList[key]
+      const status = container[4]
       container[4] = this.formatContainerState(container[4])
       container[5] = this.formatContainerStatus(container[5])
+      container[7] = status
 
       return container
     })
 
-    list.unshift(['Id', 'Name', 'Image', 'Command', 'State', 'Status'])
+    list.sort(this.sortContainers(this.sortBy))
+    list = list.map(a => {
+      a.pop()
+      return a
+    })
+    list.unshift(['Id', 'Name', 'Image', 'Command', 'State', 'Status', 'Ports'])
     this.containersListData = list
     this.containersList = containerList
 
@@ -136,27 +157,17 @@ class myWidget extends ListWidget {
     return this.widget.getItem(this.widget.selected).getContent().toString().trim().split(' ').shift()
   }
 
-  /**
-   * Sort containers by their state: running, created, then exited.
-   *
-   * @param item left
-   * @param item right
-   * @returns {number} for position
-   */
-  sortContainers (a, b) {
-    if (a[4] === 'running' && b[4] !== 'running') {
-      return -1
-    }
+  sortContainers (state) {
+    return (a, b) => {
+      if (a[7] === state && b[7] !== state) {
+        return -1
+      }
 
-    if (a[4] === 'paused' && b[4] !== 'paused') {
-      return -1
+      if (b[7] === state && a[7] !== state) {
+        return 1
+      }
+      return 0
     }
-
-    if (a[4] === 'exited' && b[4] !== 'exited') {
-      return 1
-    }
-
-    return 0
   }
 }
 

package/widgets/containers/containerSortList.widget.js

@@ -0,0 +1,103 @@
+const baseWidget = require('../../src/baseWidget')
+const { ContainerState } = require('../../src/enum')
+
+class ContainerSortListWidget extends baseWidget() {
+  constructor ({ blessed = {}, contrib = {}, screen = {}, grid = {} }) {
+    super()
+    this.blessed = blessed
+    this.contrib = contrib
+    this.screen = screen
+    this.grid = grid
+    this.label = 'Sort By:'
+    this.isVisible = false
+    const sortedStates = Object.keys(ContainerState)
+    sortedStates.sort((a, b) => a.length - b.length)
+    this.items = sortedStates
+      .map(state =>
+        ({
+          [`By ${state.charAt(0).toUpperCase()}${state.slice(1)}`]:
+            {
+              handler: () => this.sortContainerList(state)
+            }
+        })
+      ).reduce((accum, obj) => ({ ...accum, ...obj }), {})
+
+    this.widget = this.getWidget()
+  }
+
+  init () {
+    if (!this.widgetsRepo.has('toolbar')) {
+      return null
+    }
+
+    this.registerEscapeKey()
+    this.registerSortHandler()
+    this.registerToolbarKey()
+  }
+
+  sortContainerList (state) {
+    const containerList = this.widgetsRepo.get('containerList')
+    if (!containerList) {
+      // TODO throw error!
+      return
+    }
+    containerList.sortContainersByState(state)
+  }
+
+  registerSortHandler () {
+    this.widget.on('select', (el) => {
+      this.items[el.getText()].handler()
+      this.toggleVisibility()
+    })
+  }
+
+  registerToolbarKey () {
+    const toolbar = this.widgetsRepo.get('toolbar')
+    toolbar.on('key', (keyString) => {
+      if (keyString === 'o') {
+        this.toggleVisibility()
+      }
+    })
+  }
+
+  registerEscapeKey () {
+    this.widget.on('keypress', (ch, key) => {
+      if (key.name === 'escape' || key.name === 'return') {
+        this.toggleVisibility()
+      }
+    })
+  }
+
+  toggleVisibility () {
+    if (this.isVisible) {
+      this.screen.remove(this.widget)
+    } else {
+      this.screen.append(this.widget)
+      this.screen.render()
+      this.widget.focus()
+    }
+    this.isVisible = !this.isVisible
+  }
+
+  getWidget () {
+    return this.blessed.list({
+      label: this.label,
+      keys: true,
+      align: 'center',
+      border: {
+        type: 'line'
+      },
+      left: 'center',
+      top: 'center',
+      width: '16%',
+      height: '25%',
+      style: this.getWidgetStyle(),
+      items: Object.keys(this.items)
+    })
+  }
+
+  renderWidget () {
+  }
+}
+
+module.exports = ContainerSortListWidget

package/widgets/images/imageList.widget.js

@@ -45,11 +45,11 @@ class myWidget extends ListWidget {
 
     if (images) {
       images.forEach((image) => {
-        const getTag = (tag, part) => tag ? tag[0].split(':')[part] : 'none'
+        const getTag = (tag, part) => (tag && tag.length) ? tag[0].split(':')[part] : 'none'
 
         imageList.push([
           image.Id.substring(7, 12),
-          image.RepoDigests ? image.RepoDigests[0].split('@')[0] : getTag(image[2], 0),
+          (image.RepoDigests && image.RepoDigests.length) ? image.RepoDigests[0].split('@')[0] : getTag(image[2], 0),
           getTag(image.RepoTags, 1),
           this.timeDifference(image.Created),
           this.formatBytes(image.Size)

package/widgets/searchInput.widget.js

@@ -94,6 +94,7 @@ class myWidget extends baseWidget(EventEmitter) {
       style: this.getWidgetStyle({ bg: 'yellow', fg: 'black' }),
       align: 'left',
       inputOnFocus: true,
+      vi: true,
       value: ''
     })
   }

package/widgets/toolbar.widget.js

@@ -74,6 +74,10 @@ class myWidget extends baseWidget(EventEmitter) {
       'menu': {
         keys: ['m'],
         callback: () => { this.emit('key', 'm') }
+      },
+      'sort': {
+        keys: ['o'],
+        callback: () => { this.emit('key', 'o') }
       }
     }