Flow/browser/vue-flow/src/components/flow/node-activity.vue

<template>
  <g
    class="flow-node__activity"
    :status="activity.status"
  >
    <rect
      class="flow-node__activity-background"
      x="-12"
      y="-12"
      :width="ellapsed?65:24"
      height="24"
      rx="12"
    />

    <icon-refresh v-if="activity.status=='running'" v-bind="iconProps" class="flow-node__activity-icon" />
    <icon-wait v-else-if="activity.status=='waiting'" v-bind="iconProps" class="flow-node__activity-icon"/>
    <icon-ok v-else-if="activity.status=='finish'" v-bind="iconProps"class="flow-node__activity-icon"/>
    <icon-fail v-else-if="activity.status=='error'" v-bind="iconProps"class="flow-node__activity-icon"/>
    <icon-question v-else v-bind="iconProps" class="flow-node__activity-icon" />

    <text :class="{active:ellapsed}" class="flow-node__activity-time" x="13" y="4" fill="black">
      {{ ellapsed }}
    </text>
  </g>
</template>
<script>

import IconWait from '@/assets/icons/wait.svg'
import IconFail from '@/assets/icons/fail.svg'
import IconOk from '@/assets/icons/ok.svg'
import IconQuestion from '@/assets/icons/question.svg'
import IconRefresh from '@/assets/icons/refresh.svg'
import utils from '@/utils/utils'

export default {
  name: 'FlowNodeStatus',
  components: {IconWait, IconFail, IconOk, IconQuestion, IconRefresh},
  props: {
    activity: {type: Object, default: () => {}}
  },
  data () {
    return {
      finishTime: null
    }
  },
  computed: {
    iconProps () {
      return {
        x: -9,
        y: -9,
        viewBox: '-4 -4 72 72',
        width: 18,
        height: 18
      }
    },
    ellapsed () {
      if (!this.finishTime) return null
      const s = new Date(Date.parse(this.activity.startTime))
      if (!dateIsValid(s)) { return null }
      let intervalms = this.finishTime - s
      if (intervalms < 0) {
        intervalms = 0
      }
      const min = Math.floor(intervalms / 60000)
      const sec = (intervalms / 1000) % 60

      return utils.padStart(min.toFixed(0), 2, '0') + ':' + utils.padStart(sec.toFixed(0), 2, '0')
    }
  },
  watch: {
    activity (val, oldVal) {
      this.finishTime = null
      this.updateTime()
      /* const finish = new Date(Date.parse(val.endTime))
      if (dateIsValid(finish)) {
      } */
    }
  },
  mounted () {
    this._timeOut = setTimeout(this.updateTime, 999)
  },
  beforeDestroy () {
    clearTimeout(this._timeOut)
  },
  methods: {
    updateTime () {
      const finish = new Date(Date.parse(this.activity.endTime))
      if (dateIsValid(finish)) {
        this.finishTime = finish
        return
      }
      this.finishTime = new Date(new Date().getTime() + 1000)
      this._timeOut = setTimeout(this.updateTime, 999)
    }

  }
}
// Golang 0 date
const invalidDate = -62135596800000
function dateIsValid (d) {
  if (Object.prototype.toString.call(d) === '[object Date]') {
    if (!isNaN(d.getTime())) { // d.valueOf() could also work
      if (d.getTime() === invalidDate) {
        return false
      }
      return true
    }
  }
  return false
}
</script>

<style>
.flow-node__activity {
  font-size:12px;
  opacity:0;
  user-select: none;
  pointer-event:none;
  transition: all var(--transition-speed);
}

.flow-view.flow-node--activity .flow-node__activity {
  opacity:0.8;
}

.flow-node__activity-background {
  stroke: rgba(0,0,0,0.2);
  transition: all var(--transition-speed);
}

.flow-node__activity-icon{
  width:20px;
  height:20px;
}

.flow-node__activity-time{
  opacity:0;
  width:0;
  transition: all var(--transition-speed);
}

.flow-node__activity-time.active{
  opacity:1;
}

.flow-node__activity-icon  >* {
  transform-origin: 32px 32px;
  stroke-width: 6px;
  stroke: inherits;
}

.flow-node__activity[status=running] .flow-node__activity-icon  >* {
  -webkit-animation: spin 1s infinite linear;
  -moz-animation: spin 1s infinite linear;
  animation: spin 1s infinite linear;
  stroke: #aa0;
}

.flow-node__activity[status=error] .flow-node__activity-icon  > * {
  stroke: #f22;
}

.flow-node__activity[status=waiting] .flow-node__activity-icon  >* {
  -webkit-animation: shake 1s infinite linear;
  -moz-animation: shake 1s infinite linear;
  animation: shake 1s infinite linear;
}

.flow-node__activity[status=finish] .flow-node__activity-icon  >* {
  stroke: #2c2;
}

/*** ANIMATIONS ***/
@-moz-keyframes spin {
  from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(-360deg); }
}

@-webkit-keyframes spin {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(-360deg); }
}

@keyframes spin {
  from {transform:rotate(0deg);}
  to {transform:rotate(-360deg);}
}

@keyframes shake {
  10%, 90% {
    transform: rotate(-2deg);
  }

  20%, 80% {
    transform: rotate(4deg);
  }

  30%, 50%, 70% {
    transform: rotate(-7deg);
  }

  40%, 60% {
    transform: rotate(7deg);
  }
}

</style>