[Task][OSPP] HertzBeat Official Template Marketplace (apache#2641)

Co-authored-by: Calvin <[email protected]>
Co-authored-by: aias00 <[email protected]>
Co-authored-by: shown <[email protected]>
Co-authored-by: tomsun28 <[email protected]>
Co-authored-by: Logic <[email protected]>

home/docs/help/template_marketplace.md

@@ -0,0 +1,152 @@
+---
+id: template_marketplace
+title: Template Marketplace
+sidebar_label: Template Marketplace
+---
+
+> Hertzbeat official template marketplace: users can freely upload, download, view, search and share monitoring template files.
+
+## Basic Functions
+
+### Search
+
+💡 Guest availability
+
+> Display template name, brief description, favorites, downloads, views and other information
+
+1. **No filter: displayed in order of upload**
+
+   ![search.png](template-marketplace-img/search.png)
+
+2. **Filtering by category: currently divided into six categories**
+
+   > **📋Todo:** develop tag function, subdivided within the category, such as database monitoring template can be divided into MySQL, Oracle, etc.
+
+   ![search-category.png](template-marketplace-img/search-category.png)
+
+3. **Fuzzy search by Title**
+
+   ![search-name.png](template-marketplace-img/search-name.png)
+
+4. **Hover window function: download the latest version, view details, favorite/un-favorite**
+
+   > Show if the user has favorites after logging in
+
+   ![img.png](template-marketplace-img/hover-window-guest.png)![img_1.png](template-marketplace-img/hover-window-user.png)
+
+5. **Sort: Eight Sorting Methods**
+
+   > **📋Todo:** Waiting for the actual installation
+
+### Template Detail
+
+💡 Guest availability
+
+   > Display basic information about the template, such as name, author, update time, version information, etc.
+
+1. **Info: Summary information, detailed information and other information**
+
+   > **📋Todo:** Upgrade to MarkDown format
+
+   ![img.png](template-marketplace-img/detail-info.png)
+
+2. **Version: Historical version download, sharing and basic information display**
+
+   > **📋Todo:** Set up a view function for each historical version to display information such as the version description.
+
+   ![img.png](template-marketplace-img/detail-version.png)
+
+3. **FAQ**
+
+   > **📋Todo:** Discussion or issue Q&A section
+
+   ![img.png](template-marketplace-img/detail-faq.png)
+
+4. **Download**
+
+   > The latest version can be downloaded directly from the list hover window.  
+   > The latest version can also be downloaded directly from the template detail page.  
+   > The historical version can be downloaded from the version page.  
+
+   ![img.png](template-marketplace-img/download.png)
+
+5. **Share**
+
+   > Template details page to share the latest version.  
+   > Version page to share historical versions.  
+   > Sharing will automatically copy the sharing URL to the clipboard, and the person being shared can download the file via that URL  
+   >
+   > **📋Todo:** Shared template detail page is accessed through the URL of the shared template, and the shared person is free to choose whether to download or not.
+
+   ![img.png](template-marketplace-img/share.png)
+
+### User Center
+
+💡 User availability
+
+   > Provide asset management, collection management and upload function  
+>
+   > **📋Todo:** Overview page, notification page, user settings page
+
+1. **Asset: Manage all templates uploaded by user themselves**
+
+   > Provides the ability to download the latest version and view details  
+   >
+   > **📋Todo:** Function to update template information
+
+   ![img_1.png](template-marketplace-img/user-center-asset.png)
+
+   ![img.png](template-marketplace-img/asset-detail.png)
+
+2. **Version Upgrade**
+
+   > The user defines the new version number under this template family, updates the version information, and uploads the latest version of the file
+
+   ![img.png](template-marketplace-img/asset-upgrade.png)
+
+3. **Star**
+
+   ![img.png](template-marketplace-img/user-center-star.png)
+
+   ![img.png](template-marketplace-img/user-center-star-detail.png)
+
+4. **Upload**
+
+   > Create a new template series and upload the first version of the file  
+   >
+   > Fill in the template name, select the template category, fill in the description information and version information, and upload files
+
+   ![img.png](template-marketplace-img/user-center-upload.png)
+
+### Sign Up & Login
+
+💡 Guest availability
+
+1. **Sign up**
+
+   > Usernames can be duplicated, but email addresses are unique  
+   >
+   > **📋Todo:** Captcha function, email verification function
+
+   ![img.png](template-marketplace-img/sign-up.png)
+
+2. **Login**
+
+   > **📋Todo:** Captcha function and forgot password function
+
+   ![img.png](template-marketplace-img/email-login.png)
+
+## Development Steps
+
+   > Download `template-marketplace/hertzbeat-template-hub` and `template-marketplace/hertzbeat-template-hub-web-app` projects respectively
+
+   The front-end project in accordance with README.md directly start
+
+   The back-end project steps:
+
+   1. Run the `sql` script in the `template-marketplace/hertzbeat-template-hub/sql` to create database tables
+   2. Install MinIO
+   3. Config `MySQL` and `MinIO` in the `application.yml`
+   4. Start the back-end project
+
+Other issues can be fed back through the communication group ISSUE!

home/sidebars.json

@@ -384,6 +384,13 @@
         "help/issue"
       ]
     },
+    {
+      "type": "category",
+      "label": "Template Marketplace",
+      "items": [
+        "help/template_marketplace"
+      ]
+    },
     {
       "type": "category",
       "label": "Others",

template-marketplace/hertzbeat-template-hub-web-app/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

template-marketplace/hertzbeat-template-hub-web-app/.gitignore

@@ -0,0 +1,42 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

template-marketplace/hertzbeat-template-hub-web-app/.prettierrc.js

@@ -0,0 +1,31 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+module.exports = {
+  singleQuote: true,
+  useTabs: false,
+  printWidth: 140,
+  tabWidth: 2,
+  semi: true,
+  htmlWhitespaceSensitivity: 'strict',
+  arrowParens: 'avoid',
+  bracketSpacing: true,
+  proseWrap: 'preserve',
+  trailingComma: 'none',
+  endOfLine: 'lf'
+};

template-marketplace/hertzbeat-template-hub-web-app/README.md

@@ -0,0 +1,27 @@
+# HertzbeatTemplateHubWebApp
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.5.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.