From 4b447426912de3d313cc3a7e91f87efd285b91dd Mon Sep 17 00:00:00 2001
From: Mengling Ding <mengling.ding@seagate.com>
Date: Mon, 9 Sep 2024 16:36:06 -0500
Subject: [PATCH] feat: help page

---
 webui/src/components/Help/Help.vue | 77 ++++++++++++++++++++++++++++++
 webui/src/components/SideBar.vue   |  6 +++
 webui/src/router/index.ts          |  5 ++
 webui/src/views/Help.vue           |  8 ++++
 4 files changed, 96 insertions(+)
 create mode 100644 webui/src/components/Help/Help.vue
 create mode 100644 webui/src/views/Help.vue

diff --git a/webui/src/components/Help/Help.vue b/webui/src/components/Help/Help.vue
new file mode 100644
index 0000000..903e99f
--- /dev/null
+++ b/webui/src/components/Help/Help.vue
@@ -0,0 +1,77 @@
+<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:Mag.Software@seagate.com">Mag.Software@seagate.com</a>
+  </v-container>
+</template>
+
+<style scoped>
+.custom-size {
+  height: 150px;
+}
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      variants: [
+        {
+          id: 1,
+          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: 2,
+          title: "CFM GitHub Repository",
+          content: "For more details, please visit our GitHub repository",
+          url: "https://github.com/Seagate/cfm",
+          icon: "mdi-github",
+        },
+        {
+          id: 3,
+          title: "Trouble Shooting",
+          content:
+            "For solutions to common issues, please see our GitHub wiki page.",
+          url: "https://github.com/Seagate/cfm/wiki",
+          icon: "mdi-tools",
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/webui/src/components/SideBar.vue b/webui/src/components/SideBar.vue
index eba643d..7e905fc 100644
--- a/webui/src/components/SideBar.vue
+++ b/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"
diff --git a/webui/src/router/index.ts b/webui/src/router/index.ts
index 20fef21..30ffea0 100644
--- a/webui/src/router/index.ts
+++ b/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',
diff --git a/webui/src/views/Help.vue b/webui/src/views/Help.vue
new file mode 100644
index 0000000..edcd18b
--- /dev/null
+++ b/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>
\ No newline at end of file