feat: vulnerability audit widget

Author: Guillaume Chau

packages/@vue/cli-ui-addon-widgets/src/components/StatusWidget.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="false" class="status-widget">
+  <div v-if="implemented" class="status-widget">
     <div class="header">
       <div class="icon-wrapper">
         <ItemLogo
@@ -14,9 +14,10 @@
         <div class="last-updated">
           <template v-if="status.lastUpdate">
             <div class="label">
-              {{ $t('org.vue.widgets.status-widget.last-updated') }}
+              {{ message || $t('org.vue.widgets.status-widget.last-updated') }}
             </div>
             <VueTimeago
+              v-if="!message"
               :datetime="status.lastUpdate"
               :auto-update="60"
             />
@@ -73,6 +74,17 @@ export default {
     status: {
       type: Object,
       required: true
+    },
+
+    message: {
+      type: String,
+      default: null
+    },
+
+    // TODO remove
+    implemented: {
+      type: Boolean,
+      default: false
     }
   },
 

packages/@vue/cli-ui-addon-widgets/src/components/Vulnerability.vue

@@ -2,12 +2,23 @@
   <div class="vulnerability">
     <StatusWidget
       v-if="status"
-      :icon="icons[status.status]"
-      :icon-class="iconClasses[status.status]"
+      :icon="status.status === 'attention' ? severity.icon : icons[status.status]"
+      :icon-class="status.status === 'attention' ? severity.class : iconClasses[status.status]"
       :title="$t(`org.vue.widgets.vulnerability.messages.${status.status}`, { n: status.count })"
       :status="status"
+      :message="status.message"
+      implemented
       @check="checkForUpdates()"
-    />
+    >
+      <template #more-actions>
+        <VueButton
+          v-if="status.status !== 'loading'"
+          :label="$t('org.vue.widgets.vulnerability.recheck')"
+          icon-left="refresh"
+          @click="refresh()"
+        />
+      </template>
+    </StatusWidget>
   </div>
 </template>
 
@@ -18,8 +29,28 @@ import StatusWidget from './StatusWidget.vue'
 
 const UPDATES_ICONS = {
   'ok': 'verified_user',
-  'loading': 'hourglass_full',
-  'attention': 'error'
+  'loading': 'hourglass_empty',
+  'attention': 'error',
+  'error': 'error'
+}
+
+export const SEVERITIES = {
+  critical: {
+    class: 'danger',
+    icon: 'new_releases'
+  },
+  high: {
+    class: 'danger',
+    icon: 'error'
+  },
+  moderate: {
+    class: 'warning',
+    icon: 'error'
+  },
+  low: {
+    class: '',
+    icon: 'error'
+  }
 }
 
 export default {
@@ -33,14 +64,20 @@ export default {
     })
   },
 
+  computed: {
+    severity () {
+      return this.status && SEVERITIES[this.status.severity]
+    }
+  },
+
   created () {
     this.icons = UPDATES_ICONS
     this.iconClasses = UPDATES_ICON_CLASSES
   },
 
   methods: {
-    checkForUpdates () {
-      // TODO
+    refresh () {
+      this.$callPluginAction('org.vue.widgets.actions.check-vunerability')
     }
   }
 }

packages/@vue/cli-ui-addon-widgets/src/components/VulnerabilityDetails.vue

@@ -12,22 +12,57 @@
         <div class="title">
           {{ $t('org.vue.widgets.vulnerability.messages.attention', { n: details.vulnerabilities.length }) }}
         </div>
-      </div>
 
-      <div class="items">
-        <VulnerabilityItem
-          v-for="(item, index) of details.vulnerabilities"
-          :key="index"
-          :item="item"
-        />
+        <div class="summary">
+          <div
+            v-for="(severity, key) of severities"
+            :key="key"
+            :class="`severity-${severity.class}`"
+            class="summary-item"
+          >
+            <VueIcon
+              :icon="severity.icon"
+              :class="severity.class"
+            />
+            <span class="count">{{ details.summary[key] }}</span>
+            {{ $t(`org.vue.widgets.vulnerability.severity.${key}`) }}
+          </div>
+        </div>
       </div>
+
+      <transition name="vue-ui-fade">
+        <DynamicScroller
+          v-if="showList"
+          ref="scroller"
+          class="items"
+          :items="details.vulnerabilities"
+          :min-item-size="75"
+          v-slot="{ item, active }"
+        >
+          <DynamicScrollerItem
+            :item="item"
+            :active="active"
+            :size-dependencies="[
+              showMoreParentsMap[item.id]
+            ]"
+          >
+            <VulnerabilityItem
+              :item="item"
+              :show-more-parents="showMoreParentsMap[item.id]"
+              @toggle-more-parents="$set(showMoreParentsMap, item.id, !showMoreParentsMap[item.id])"
+            />
+          </DynamicScrollerItem>
+        </DynamicScroller>
+      </transition>
     </template>
   </div>
 </template>
 
 <script>
 import VulnerabilityItem from './VulnerabilityItem.vue'
 
+import { SEVERITIES } from './Vulnerability.vue'
+
 export default {
   components: {
     VulnerabilityItem
@@ -37,6 +72,24 @@ export default {
     return mapSharedData('org.vue.widgets.vulnerability.', {
       details: 'details'
     })
+  },
+
+  data () {
+    return {
+      showList: false,
+      showMoreParentsMap: {}
+    }
+  },
+
+  created () {
+    this.severities = SEVERITIES
+  },
+
+  mounted () {
+    // Animation breaks scroller item sizes
+    setTimeout(() => {
+      this.showList = true
+    }, 200)
   }
 }
 </script>
@@ -45,9 +98,32 @@ export default {
 @import "~@vue/cli-ui/src/style/imports"
 
 .vulnerability-details
-  overflow-x hidden
-  overflow-y auto
+  v-box()
 
 .pane-toolbar
   padding-bottom $padding-item
+
+.summary
+  display flex
+  padding-right 12px
+
+.summary-item
+  display flex
+  align-items center
+  margin-left 16px
+
+  .vue-ui-icon,
+  .count
+    margin-right 3px
+
+  .count
+    font-weight bold
+
+.severity-danger
+  color $vue-ui-color-danger
+.severity-warning
+  color $vue-ui-color-warning
+
+.items
+  flex 1
 </style>