Merge pull request #109 from YANG-DB/docs-updates

Docs updates
opensearch-project · Jan 22, 2024 · 5f7a22b · 5f7a22b
2 parents 1fc5456 + 82d9ee6
commit 5f7a22b
Show file tree

Hide file tree

Showing 16 changed files with 513 additions and 122 deletions.
diff --git a/README.md b/README.md
@@ -2,9 +2,39 @@
 
 ## OpenSearch Catalog
 
-The OpenSearch Catalog is designed to make it easier for developers and community to contribute, search and install artifacts like plugins, visualization dashboards, ingestion to visualization content packs (data pipeline configurations, normalization, ingestion, dashboards). The OpenSearch Catalog does this by providing a searchable catalog of community contributed OpenSearch artifacts and [projects](https://opensearch.org/community_projects) that users can browse, rate and download from the project website, OpenSearch CLI, and OpenSearch Dashboards. Users can install and update artifacts with a single click from OpenSearch Dashboards or by running an install/update command from OpenSearch CLI. When the artifacts have updates, they are highlighted in OpenSearch Dashboards to help users discover the latest versions of artifacts.
+_For deeper dive into the catalog repository - please check our [main catalog documentation page ](docs/README.md)_
 
-We are requesting comments on our [RFC](https://github.com/opensearch-project/opensearch-catalog/issues/1).
+The OpenSearch Catalog is designed to make it easier for developers and community to contribute, search and install artifacts like:
+
+### Integrations
+ - [Integrations](https://opensearch.org/docs/latest/integrations/)
+ - [Integrations Readme](https://github.com/opensearch-project/opensearch-catalog/blob/main/docs/integrations/README.md)
+ [Integration Observability Catalog](https://htmlpreview.github.io/?https://github.com/opensearch-project/opensearch-catalog/blob/main/integrations/observability/catalog.html)
+
+The Integration catalog is a concept that focuses on grouping similar integration together to allow a meaningful way of introducing a common group into the user's working space.
+
+
+### Visualization
+- [Visualizations](https://opensearch.org/docs/latest/visualization/)
+- [Visualizations Readme](https://github.com/opensearch-project/opensearch-catalog/blob/main/docs/visualization/README.md)
+- [Visualizations catalog](https://htmlpreview.github.io/?https://github.com/opensearch-project/opensearch-catalog/blob/main/visualization/observability/catalog.html)
+
+The Visualization Catalog is a central repository for organizing and sharing visualizations used in integrations developed using the standard simple schema mapping ( structure aware visual components).
+This catalog aims to extend the usage of different data-visualization component for the benefit of delivering fast, configurable and context aware user experience. 
+
+
+### Schema
+- [Schema Readme](https://github.com/opensearch-project/opensearch-catalog/blob/main/docs/schema/README.md)
+- [Schema Instantiation](https://github.com/opensearch-project/opensearch-catalog/blob/main/docs/schema/initiation.md)
+- [Observability Schema ](https://github.com/opensearch-project/opensearch-catalog/blob/main/docs/schema/observability/README.md)
+
+The Schema catalog for OpenSearch brings the concept of organized and structured catalog data.
+A catalog of schemas is a comprehensive collection of all the possible data schemas or structures that can be used to represent information.
+
+---
+### Community
+- [Community Forums](https://forum.opensearch.org/) 
+The Catalog is also about community involvement and contribution to the making of OpenSearch into a true content driven project.
 
 ## Security
 

diff --git a/cli/catalog-web-builder.py b/cli/catalog-web-builder.py
@@ -0,0 +1,109 @@
+import json
+
+# Read JSON data
+with open('../integrations/observability/catalog.json', 'r') as file:
+ data = json.load(file)
+
+# Define a list of background colors with fade effect
+background_colors = ["#f8f9fa", "#e9ecef", "#dee2e6", "#ced4da", "#adb5bd"] # Example light shades for fade effect
+
+# Start HTML content
+html_content = f"""
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>OpenSearch Observability Integrations Catalog</title>
+ <!-- Bootstrap CSS -->
+ <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
+ <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+ <!-- Bootstrap JS -->
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+ <style>
+ font-family: Arial, sans-serif;
+ background-color: #f4f7ff; 
+ .container {{ max-width: 800px; margin: auto; }}
+ .integrations {{ padding: 10px; border: 1px solid #ddd; margin-bottom: 10px; }}
+ </style>
+</head>
+<body>
+ <div class="container">
+ <img src="{data.get('statics', {}).get('logo', {}).get('path', '')}" style="width: 750px; height: 250px; alt="Logo" />
+ <h1>{data.get('displayName', '')}</h1>
+ <p><strong>Version:</strong> {data.get('version', '')}</p>
+ <p><strong>URL:</strong> <a href="{data.get('url', '')}">{data.get('url', '')}</a></p>
+ <p><strong>Description:</strong> {data.get('description', '')}</p>
+ <p><strong>License:</strong> {data.get('license', '')}</p>
+ <p><strong>Labels:</strong> {", ".join(data.get('labels', []))}</p>
+ <p><strong>Author:</strong> {data.get('author', '')}</p>
+ <h2>Integrations</h2>
+"""
+
+# Start the grid layout with custom styles
+html_content += """
+ <style>
+ .grid-item {
+ border: 4px solid #f4f7ff;
+ padding: 10px;
+ margin-bottom: 15px; /* Space between rows */
+ }
+ .grid-item:hover {
+ background-color: #f8f8f8; /* Slight highlight on hover */
+ }
+ </style>
+ <div class="container">
+ <div class="row">
+"""
+
+# Iterate over components to create grid cells with borders and padding
+for i, component in enumerate(data.get('components', [])):
+ if i % 6 == 0 and i != 0:
+ html_content += '</div><div class="row">' # Start a new row after every 5 integrations
+
+ html_content += f"""
+ <div class="col-md-2 grid-item text-center">
+ <img src="{component.get('logo', '')}" style="width: 75px; height: 75px; cursor: pointer;" alt="{component.get('component', '')} Logo" data-toggle="modal" data-target="#modal{i}">
+ <p>{component.get('component', '')}</p>
+ </div>
+ """
+
+ # Modal with integration details
+ html_content += f"""
+ <div class="modal fade" id="modal{i}" tabindex="-1" role="dialog" aria-labelledby="modalLabel{i}" aria-hidden="true">
+ <div class="modal-dialog modal-lg" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="modalLabel{i}">{component.get('component', '')}</h5>
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">&times;</span>
+ </button>
+ </div>
+ <div class="modal-body">
+ <img src="{component.get('logo', '')}" style="width: 100px; height: 100px;" alt="{component.get('component', '')} Logo">
+ <p><strong>Description:</strong> {component.get('description', '')}</p>
+ <p><strong>Version:</strong> {component.get('version', '')}</p>
+ <p><strong>URL:</strong> <a href="{component.get('url', '')}">{component.get('url', '')}</a></p>
+ <p><strong>Tags:</strong> {", ".join(component.get('tags', []))}</p>
+ <div>
+ {"".join([f'<img src="{asset.get("image", "")}" style="width: 100%; height: auto; margin-top: 10px;" alt="dashboard" />' for asset in component.get('gallery', [])])}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ """
+html_content += """
+ </div> <!-- Closing row -->
+ </div> <!-- Closing container -->
+"""
+
+# ... write HTML content to file ...
+
+
+# Write HTML content to file
+with open('../integrations/observability/catalog.html', 'w') as file:
+ file.write(html_content)
+
+print("HTML file created successfully.")
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,41 @@
+<img src="https://opensearch.org/assets/img/opensearch-logo-themed.svg" height="64px">
+
+## OpenSearch Catalog
+
+The OpenSearch Catalog is designed to make it easier for developers and community to contribute, search and install artifacts like:
+
+### Integrations
+- [Integrations](https://opensearch.org/docs/latest/integrations/)
+- [Integrations Readme](https://github.com/opensearch-project/opensearch-catalog/blob/main/docs/integrations/README.md)
+- [Integrations Creation](https://github.com/opensearch-project/opensearch-catalog/blob/main/docs/integrations/Integration-creation.md)
+ [Integration Observability Catalog](https://htmlpreview.github.io/?https://github.com/opensearch-project/opensearch-catalog/blob/main/integrations/observability/catalog.html)
+
+
+![](img/)![integrations-observability-catalog.png](img%2Fintegrations-observability-catalog.png)
+The Integration catalog is a concept that focuses on grouping similar integration together to allow a meaningful way of introducing a common group into the user's working space.
+
+
+### Visualization
+- [Visualizations](https://opensearch.org/docs/latest/visualization/)
+- [Visualizations Readme](https://github.com/opensearch-project/opensearch-catalog/blob/main/docs/visualization/README.md)
+- [Visualizations Catalog](https://htmlpreview.github.io/?https://github.com/opensearch-project/opensearch-catalog/blob/main/visualization/observability/catalog.html)
+
+The Visualization Catalog is a central repository for organizing and sharing visualizations used in integrations developed using the standard simple schema mapping ( structure aware visual components).
+This catalog aims to extend the usage of different data-visualization component for the benefit of delivering fast, configurable and context aware user experience.
+
+![service-duration.png](img%2Fvisualization%2Fservice-duration.png)
+
+### Schema
+- [Schema Readme](https://github.com/opensearch-project/opensearch-catalog/blob/main/docs/schema/README.md)
+- [Schema Instantiation](https://github.com/opensearch-project/opensearch-catalog/blob/main/docs/schema/initiation.md)
+- [Observability Schema](https://github.com/opensearch-project/opensearch-catalog/blob/main/docs/schema/observability/README.md)
+ - [Observability Logs Schema](https://github.com/opensearch-project/opensearch-catalog/tree/main/docs/schema/observability/logs#readme)
+ - [Observability Traces Schema](https://github.com/opensearch-project/opensearch-catalog/tree/main/docs/schema/observability/traces#readme)
+ - [Observability Metrics Schema](https://github.com/opensearch-project/opensearch-catalog/tree/main/docs/schema/observability/metrics#readme)
+
+
+The Schema catalog for OpenSearch brings the concept of organized and structured catalog data.
+A catalog of schemas is a comprehensive collection of all the possible data schemas or structures that can be used to represent information.
+
+---
+
diff --git a/docs/img/visualization/data_volume.png b/docs/img/visualization/data_volume.png
diff --git a/docs/img/visualization/errors_over_time.png b/docs/img/visualization/errors_over_time.png
diff --git a/docs/img/visualization/http-network-graph.png b/docs/img/visualization/http-network-graph.png
diff --git a/docs/img/visualization/service-duration.png b/docs/img/visualization/service-duration.png
diff --git a/docs/img/visualization/service-map.png b/docs/img/visualization/service-map.png
diff --git a/docs/img/visualization/status_codes_over_time.png b/docs/img/visualization/status_codes_over_time.png
diff --git a/integrations/observability/aws_vpc_flow/static/logo.png b/integrations/observability/aws_vpc_flow/static/logo.png