From a8e0758d1201a1610674f5fa0c251b41b0ab7897 Mon Sep 17 00:00:00 2001
From: Mengling Ding <71745861+Meng-20@users.noreply.github.com>
Date: Tue, 10 Sep 2024 15:59:56 -0600
Subject: [PATCH] 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
---
 .../icons/Icons-Questions--Web-Green.png      | Bin 0 -> 3274 bytes
 webui/src/components/Help/Help.vue            |  78 ++++++++++++++++++
 webui/src/components/SideBar.vue              |   6 ++
 webui/src/router/index.ts                     |   5 ++
 webui/src/views/Help.vue                      |   8 ++
 5 files changed, 97 insertions(+)
 create mode 100644 webui/src/assets/icons/Icons-Questions--Web-Green.png
 create mode 100644 webui/src/components/Help/Help.vue
 create mode 100644 webui/src/views/Help.vue

diff --git a/webui/src/assets/icons/Icons-Questions--Web-Green.png b/webui/src/assets/icons/Icons-Questions--Web-Green.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c703670904b8b85eb0a5899c8cdaab7d9f4b173
GIT binary patch
literal 3274
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

literal 0
HcmV?d00001

diff --git a/webui/src/components/Help/Help.vue b/webui/src/components/Help/Help.vue
new file mode 100644
index 0000000..d9675ac
--- /dev/null
+++ b/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: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: 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>
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