feat: add a help page (#28)

* feat: add icon and background image

* feat: delete the unused image

* feat: help page

* feat: add header comment and renumber the variant ids in help page

* feat: point troubleshooting to the corresponding wiki page

* feat: add period to the sentence

webui/src/components/Help/Help.vue

@@ -0,0 +1,78 @@
+<!-- Copyright (c) 2024 Seagate Technology LLC and/or its Affiliates -->
+<template>
+  <v-container>
+    <h2>CFM Help Center</h2>
+    <br />
+    <v-row>
+      <v-col v-for="(variant, i) in variants" :key="i" cols="6" md="3">
+        <v-card
+          class="mx-auto custom-size"
+          max-width="344"
+          :href="variant.url"
+          target="_blank"
+          rel="noopener"
+          variant="tonal"
+        >
+          <v-card-title>
+            <v-icon left>{{ variant.icon }}</v-icon>
+            {{ variant.title }}
+          </v-card-title>
+          <v-card-text>{{ variant.content }}</v-card-text>
+          <template v-slot:append>
+            <v-icon icon="mdi-open-in-new"></v-icon>
+          </template>
+        </v-card>
+      </v-col>
+    </v-row>
+    <br />
+
+    <h3>Contact Support</h3>
+    <p>
+      If you need further assistance, please contact your local Seagate
+      representative or our support team.
+    </p>
+    <v-icon color="#6ebe4a">mdi-email-outline</v-icon>
+    Email:
+    <a href="mailto:[email protected]">[email protected]</a>
+  </v-container>
+</template>
+
+<style scoped>
+.custom-size {
+  height: 150px;
+}
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      variants: [
+        {
+          id: 0,
+          title: "WebUI User Guide",
+          content:
+            "For instructions on our product, please refer to the CFM User Guide.",
+          url: "https://github.com/Seagate/cfm/wiki/WebUI-User-Guide",
+          icon: "mdi-book-open-page-variant",
+        },
+        {
+          id: 1,
+          title: "CFM GitHub Repository",
+          content: "For more details, please visit our GitHub repository.",
+          url: "https://github.com/Seagate/cfm",
+          icon: "mdi-github",
+        },
+        {
+          id: 2,
+          title: "Troubleshooting",
+          content:
+            "For solutions to common issues, please see our troubleshooting.",
+          url: "https://github.com/Seagate/cfm/wiki/Troubleshooting",
+          icon: "mdi-tools",
+        },
+      ],
+    };
+  },
+};
+</script>

webui/src/components/SideBar.vue

@@ -21,6 +21,12 @@
       title="CXL-Hosts"
       value="CXL-Hosts"
     ></v-list-item>
+    <v-list-item
+      prepend-avatar="@/assets/icons/Icons-Questions--Web-Green.png"
+      to="/help"
+      title="Help"
+      value="Help"
+    ></v-list-item>
     <!--  
     <v-list-item
       prepend-avatar="@/assets/icons/Icons-Lightbulb-Web-Green.png"

webui/src/router/index.ts

@@ -47,6 +47,11 @@ const routes = [
   //  name: 'Alerts',
   //  component: () => import(/* webpackChunkName: "blades" */ '@/views/Alerts.vue'),
   // },
+  {
+    path: '/help',
+    name: 'Help',
+    component: () => import(/* webpackChunkName: "blades" */ '@/views/Help.vue'),
+   },
   {
     path: '/:pathMatch(.*)*',
     name: 'NotFoundPage',

webui/src/views/Help.vue

@@ -0,0 +1,8 @@
+<!-- Copyright (c) 2024 Seagate Technology LLC and/or its Affiliates -->
+<template>
+  <Help />
+</template>
+
+<script lang="ts" setup>
+  import Help from '@/components/Help/Help.vue'
+</script>