Add pkg/harvester components + shell portings - 1

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>

pkg/harvester/formatters/StateWithPopover.vue

@@ -0,0 +1,59 @@
+<script>
+import State from '@shell/components/formatter/BadgeStateFormatter';
+
+export default {
+  components: { State },
+
+  props: {
+    row: {
+      type:     Object,
+      required: true
+    },
+  },
+
+  computed: {
+    warningMessages() {
+      return this.row.warningMessages;
+    },
+  },
+};
+</script>
+
+<template>
+  <span>
+    <div class="state">
+      <State
+        :row="row"
+      />
+      <v-popover
+        v-if="warningMessages.length > 0"
+        trigger="hover"
+        offset="16"
+      >
+        <span class="tooltip-target">
+          <i class="icon icon-warning icon-lg text-warning" />
+        </span>
+
+        <template v-slot:popover>
+          <p
+            v-for="(message, index) in warningMessages"
+            :key="message.text"
+          >
+            {{ index + 1 }}.
+            {{ message.text }}
+          </p>
+        </template>
+      </v-popover>
+    </div>
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.state {
+  display: flex;
+
+  .icon-warning {
+    margin-top: 2px;
+  }
+}
+</style>