feat(ui): Task stop + console output

Author: Guillaume Chau

packages/@vue/cli-ui/package.json

@@ -28,6 +28,7 @@
     "semver": "^5.5.0",
     "shortid": "^2.2.8",
     "subscriptions-transport-ws": "^0.9.5",
+    "terminate": "^2.1.0",
     "vue": "^2.5.13",
     "vue-apollo": "^3.0.0-beta.5",
     "vue-i18n": "^7.6.0",

packages/@vue/cli-ui/src/components/ItemLogo.vue

@@ -118,6 +118,23 @@ export default {
         >>> svg
           fill $vue-ui-color-light
 
+  &.danger
+    .vue-ui-icon
+      >>> svg
+        fill $vue-ui-color-danger
+  &.warning
+    .vue-ui-icon
+      >>> svg
+        fill $vue-ui-color-warning
+  &.info
+    .vue-ui-icon
+      >>> svg
+        fill $vue-ui-color-info
+  &.success
+    .vue-ui-icon
+      >>> svg
+        fill $vue-ui-color-success
+
 @keyframes zoom
   0%
     transform scale(0)

packages/@vue/cli-ui/src/components/StatusBar.vue

@@ -46,16 +46,6 @@
           :message="consoleLogLast"
         />
         <div v-else class="last-message">{{ $t('components.status-bar.log.empty') }}</div>
-        <!-- <TerminalView
-          :cols="100"
-          :rows="1"
-          :content="consoleLogLast"
-          auto-size
-          :options="{
-            scorllback: 0,
-            disableStdin: true
-          }"
-        /> -->
       </div>
     </div>
   </div>

packages/@vue/cli-ui/src/components/TaskItem.vue

@@ -7,7 +7,8 @@
   >
     <div class="content">
       <ItemLogo
-        icon="assignment"
+        :icon="iconData.icon"
+        :class="iconData.class"
         v-tooltip="status"
       />
 
@@ -21,6 +22,14 @@
 </template>
 
 <script>
+const icons = {
+  idle: { icon: 'assignment', class: '' },
+  running: { icon: 'more_horiz', class: 'info' },
+  done: { icon: 'check_circle', class: 'success' },
+  error: { icon: 'error', class: 'danger' },
+  terminated: { icon: 'error', class: '' }
+}
+
 export default {
   props: {
     task: {
@@ -37,6 +46,10 @@ export default {
   computed: {
     status () {
       return this.$t(`types.task.status.${this.task.status}`)
+    },
+
+    iconData () {
+      return icons[this.task.status]
     }
   }
 }

packages/@vue/cli-ui/src/components/TerminalView.vue

@@ -1,6 +1,31 @@
 <template>
   <div class="terminal-view">
-    <div ref="render" class="xterm-render"></div>
+    <div v-if="toolbar" class="toolbar">
+      <VueIcon
+        icon="dvr"
+      />
+      <div class="title">{{ title }}</div>
+      <VueButton
+        class="icon-button"
+        icon-left="delete_forever"
+        v-tooltip="$t('components.terminal-view.buttons.clear')"
+        @click="clear(); $emit('clear')"
+      />
+      <VueIcon
+        icon="lens"
+        class="separator"
+      />
+      <VueButton
+        class="icon-button"
+        icon-left="subdirectory_arrow_left"
+        v-tooltip="$t('components.terminal-view.buttons.scroll')"
+        @click="scrollToBottom()"
+      />
+    </div>
+
+    <div class="view">
+      <div ref="render" class="xterm-render"></div>
+    </div>
 
     <resize-observer v-if="autoSize" @notify="fit"/>
   </div>
@@ -62,6 +87,16 @@ export default {
     options: {
       type: Object,
       default: () => ({})
+    },
+
+    toolbar: {
+      type: Boolean,
+      default: false
+    },
+
+    title: {
+      type: String,
+      default: null
     }
   },
 
@@ -79,6 +114,10 @@ export default {
 
   mounted () {
     this.initTerminal()
+
+    if (this.autoSize) {
+      this.$nextTick(this.fit)
+    }
   },
 
   beforeDestroy () {
@@ -100,18 +139,32 @@ export default {
       term.on('focus', () => this.$emit('focus'))
     },
 
-    setContent (value) {
+    setContent (value, ln = true) {
+      if (ln && value.indexOf('\n') !== -1) {
+        value.split('\n').forEach(
+          t => this.setContent(t)
+        )
+        return
+      }
       if (typeof value === 'string') {
-        this.$_terminal.write(value)
+        this.$_terminal[ln ? 'writeln' : 'write'](value)
       } else {
         this.$_terminal.writeln('')
       }
     },
 
+    addLog (log) {
+      this.setContent(log.text, log.type === 'stdout')
+    },
+
     clear () {
       this.$_terminal.clear()
     },
 
+    scrollToBottom () {
+      this.$_terminal.scrollToBottom()
+    },
+
     handleLink (event, uri) {
       this.$emit('link', uri)
     },
@@ -148,12 +201,33 @@ export default {
 @import "~@/style/imports"
 
 .terminal-view
-  position relative
-
-.xterm-render
-  width 100%
-  height 100%
-  >>> .xterm
-    .xterm-cursor-layer
-      display none
+  v-box()
+  align-items stretch
+  background $vue-ui-color-light-neutral
+
+  .toolbar
+    h-box()
+    align-items center
+    padding 6px 6px 6px $padding-item
+    > :not(.separator)
+      space-between-x(6px)
+    > * + .separator
+      margin-left 6px
+    .title
+      flex 100% 1 1
+      width 0
+      ellipsis()
+
+  .view
+    flex 100% 1 1
+    height 0
+    position relative
+    padding-left $padding-item
+
+  .xterm-render
+    width 100%
+    height 100%
+    >>> .xterm
+      .xterm-cursor-layer
+        display none
 </style>

packages/@vue/cli-ui/src/graphql-api/connectors/tasks.js

@@ -1,4 +1,5 @@
 const execa = require('execa')
+const terminate = require('terminate')
 
 const channels = require('../channels')
 const cwd = require('./cwd')
@@ -7,6 +8,8 @@ const logs = require('./logs')
 
 const { getCommand } = require('../utils/command')
 
+const MAX_LOGS = 2000
+
 const tasks = new Map()
 
 function getTasks () {
@@ -113,25 +116,31 @@ function run (id, context) {
     }, context)
 
     child.stdout.on('data', buffer => {
-      // TODO logs
-      console.log(buffer.toString())
+      addLog({
+        taskId: task.id,
+        type: 'stdout',
+        text: buffer.toString()
+      }, context)
     })
 
     child.stderr.on('data', buffer => {
-      // TODO logs
-      console.log(buffer.toString())
+      addLog({
+        taskId: task.id,
+        type: 'stderr',
+        text: buffer.toString()
+      }, context)
     })
 
     child.on('close', (code, signal) => {
-      if (signal === 'SIGINT') {
+      if (code === null) {
         updateOne({
           id: task.id,
-          status: 'error',
+          status: 'terminated',
           child: null
         }, context)
         logs.add({
           message: `Task ${task.id} was terminated`,
-          type: 'error'
+          type: 'warn'
         }, context)
       } else if (code !== 0) {
         updateOne({
@@ -140,7 +149,7 @@ function run (id, context) {
           child: null
         }, context)
         logs.add({
-          message: `Task ${task.id} ended with error code`,
+          message: `Task ${task.id} ended with error code ${code}`,
           type: 'error'
         }, context)
       } else {
@@ -162,7 +171,28 @@ function run (id, context) {
 function stop (id, context) {
   const task = findOne(id, context)
   if (task && task.status === 'running') {
-    task.child.kill('SIGINT') // TODO not working
+    terminate(task.child.pid)
+  }
+  return task
+}
+
+function addLog (log, context) {
+  const task = findOne(log.taskId, context)
+  if (task) {
+    if (task.logs.length === MAX_LOGS) {
+      task.logs.shift()
+    }
+    task.logs.push(log)
+    context.pubsub.publish(channels.TASK_LOG_ADDED, {
+      taskLogAdded: log
+    })
+  }
+}
+
+function clearLogs (id, context) {
+  const task = findOne(id, context)
+  if (task) {
+    task.logs = []
   }
   return task
 }
@@ -172,5 +202,6 @@ module.exports = {
   findOne,
   run,
   stop,
-  updateOne
+  updateOne,
+  clearLogs
 }

packages/@vue/cli-ui/src/graphql-api/resolvers.js

@@ -72,7 +72,8 @@ module.exports = {
     pluginInvoke: (root, { id }, context) => plugins.runInvoke(id, context),
     pluginUpdate: (root, { id }, context) => plugins.update(id, context),
     taskRun: (root, { id }, context) => tasks.run(id, context),
-    taskStop: (root, { id }, context) => tasks.stop(id, context)
+    taskStop: (root, { id }, context) => tasks.stop(id, context),
+    taskLogsClear: (root, { id }, context) => tasks.clearLogs(id, context)
   },
 
   Subscription: {
@@ -84,15 +85,15 @@ module.exports = {
         // Iterator
         (parent, args, { pubsub }) => pubsub.asyncIterator(channels.PROGRESS_CHANGED),
         // Filter
-        (payload, variables) => payload.progressChanged.id === variables.id
+        (payload, vars) => payload.progressChanged.id === vars.id
       )
     },
     progressRemoved: {
       subscribe: withFilter(
         // Iterator
         (parent, args, { pubsub }) => pubsub.asyncIterator(channels.PROGRESS_REMOVED),
         // Filter
-        (payload, variables) => payload.progressRemoved.id === variables.id
+        (payload, vars) => payload.progressRemoved.id === vars.id
       )
     },
     consoleLogAdded: {
@@ -103,6 +104,12 @@ module.exports = {
     },
     taskChanged: {
       subscribe: (parent, args, { pubsub }) => pubsub.asyncIterator(channels.TASK_CHANGED)
+    },
+    taskLogAdded: {
+      subscribe: withFilter(
+        (parent, args, { pubsub }) => pubsub.asyncIterator(channels.TASK_LOG_ADDED),
+        (payload, vars) => payload.taskLogAdded.taskId === vars.id
+      )
     }
   }
 }