Fixed PR review issues

Author: xingzhang-suse

pkg/neuvector-ui-ext/components/Dashboard/charts/BarChart4TopVulnerableContainers.vue

@@ -15,20 +15,23 @@
         />
       </div>
   </div>
-  
+
 </template>
 
 <script>
   import { BarChart } from 'vue-chart-3';
   import { Chart, registerables } from 'chart.js';
-  import { ref, defineComponent, computed } from 'vue';
+  import { ref, defineComponent } from 'vue';
   import EmptyDataMessage from '../contents/EmptyDataMessage';
 
   Chart.register(...registerables);
 
   export default defineComponent({
       name: 'BarChart4TopVulnerableContainers',
-      components: { BarChart, EmptyDataMessage },
+      components: {
+        BarChart,
+        EmptyDataMessage,
+      },
       props: {
           width: { type: Number, default: 400 },
           height: { type: Number, default: 300 },
@@ -130,4 +133,4 @@
     display: flex;
     justify-content: center;
   }
-</style>
+</style>

pkg/neuvector-ui-ext/components/Dashboard/contents/ScoreFactor.vue

@@ -46,14 +46,14 @@ export default {
       <div class="subtitle">
       </div>
     </div>
-    <div class="risk-section-details d-flex align-items-center justify-content-center" v-if="!riskFactor.isFactorError">
-      <div class="">
+    <div class="risk-section-details risk-factor-layout" v-if="!riskFactor.isFactorError">
+      <div class="risk-factor-rank">
         <div class="secure-rank-wrap">
           <div class="secure-rank"></div>
           <div class="empty" :style="riskFactor.subScore"></div>
         </div>
       </div>
-      <table class="">
+      <table class="table risk-factor-table">
         <tr v-for="factor in riskFactor.factors" :key="factor">
           <td>{{factor.category}}</td>
           <td style="text-align: left;">
@@ -227,6 +227,23 @@ export default {
   }
 }
 
+.risk-factor-layout {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.risk-factor-rank {
+  flex: 0 0 auto;
+  order: 2;
+}
+
+.risk-factor-table {
+  flex: 1 1 auto;
+  margin-bottom: 0;
+  order: 1;
+}
+
 .secure-rank-wrap {
   height: 90px;
   width: 10px;

pkg/neuvector-ui-ext/components/Dashboard/panels/Exposures.vue

@@ -211,7 +211,7 @@ export default {
     </div>
 </template>
 
-<style>
+<style lang="scss" scoped>
 .exposure-chart {
   width: 100%;
   max-width: 600px;

pkg/neuvector-ui-ext/components/common/contents/FlagIpFqdn.vue

@@ -18,7 +18,7 @@
 </script>
 
 <template>
-    <a :href="'https://www.whois.com/whois/' + ip" target="_blank" style="display:inline-flex;">
+    <a :href="'https://www.whois.com/whois/' + ip" target="_blank" rel="noopener noreferrer" style="display:inline-flex;">
         <country-flag v-if="countryCode !== '-'" class="mr-2" style="margin-top: -6px; position: relative; margin-right: 1em;" :country='countryCode.toLowerCase()' size='normal' v-tooltip.top="{
             content: isTooltipVisible ? countryName : '',
         }"/>