Update label handling on frontend + Refactors (opensearch-project#931)

* Update label display on frontend

Signed-off-by: Simeon Widdis <[email protected]>

* Clear type errors in added_integration.tsx

Signed-off-by: Simeon Widdis <[email protected]>

* Remove unused imports

Signed-off-by: Simeon Widdis <[email protected]>

* Add missing labels

Signed-off-by: Simeon Widdis <[email protected]>

* Autoformat the whole repository

Signed-off-by: Simeon Widdis <[email protected]>

* Revert large sample data changes

Signed-off-by: Simeon Widdis <[email protected]>

* Undo _import autoescape

Signed-off-by: Simeon Widdis <[email protected]>

---------

Signed-off-by: Simeon Widdis <[email protected]>

Author: Swiddis

.husky/pre-commit

@@ -5,14 +5,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 
 import {
-  EuiBadge,
-  EuiButton,
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiGlobalToastList,
   EuiHealth,
-  EuiIcon,
   EuiInMemoryTable,
   EuiLink,
   EuiOverlayMask,
@@ -64,7 +60,7 @@ export function AddedIntegration(props: AddedIntegrationProps) {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [modalLayout, setModalLayout] = useState(<EuiOverlayMask />);
 
-  const badge = (status) => {
+  const badge = (status: string) => {
     switch (status) {
       case 'available':
         return <EuiHealth color="success">Active</EuiHealth>;
@@ -136,7 +132,6 @@ export function AddedIntegration(props: AddedIntegrationProps) {
                 <EuiButtonIcon
                   iconType="trash"
                   aria-label="Delete"
-                  size="l"
                   color="danger"
                   onClick={() => {
                     getModal();
@@ -173,7 +168,7 @@ export function AddedIntegration(props: AddedIntegrationProps) {
 
     const assets = data?.assets || [];
 
-    const renderAsset = (record) => {
+    const renderAsset = (record: any) => {
       switch (record.assetType) {
         case 'dashboard':
           return (
@@ -234,7 +229,7 @@ export function AddedIntegration(props: AddedIntegrationProps) {
       },
       filters: [
         {
-          type: 'field_value_selection',
+          type: 'field_value_selection' as const,
           field: 'assetType',
           name: 'Type',
           multiSelect: false,

public/components/integrations/components/added_integration.tsx

@@ -9,17 +9,11 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
-  EuiSearchBar,
-  EuiButton,
   EuiFieldSearch,
-  EuiSwitch,
   EuiButtonGroup,
-  EuiBadgeGroup,
-  EuiBadge,
-  EuiToolTip,
 } from '@elastic/eui';
 import _ from 'lodash';
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
 import {
   AvailableIntegrationsCardViewProps,
   AvailableIntegrationType,
@@ -54,7 +48,7 @@ export function AvailableIntegrationsCardView(props: AvailableIntegrationsCardVi
     },
   ];
 
-  const onChangeIcons = (optionId) => {
+  const onChangeIcons = (optionId: string) => {
     setToggleIconIdSelected(optionId);
     if (optionId === '0') {
       props.setCardView(false);
@@ -82,7 +76,7 @@ export function AvailableIntegrationsCardView(props: AvailableIntegrationsCardVi
                   data-test-subj={`integration_card_${i.name.toLowerCase()}`}
                   titleElement="span"
                   onClick={() => (window.location.hash = `#/available/${i.name}`)}
-                  footer={badges(i.components)}
+                  footer={badges(i.labels ?? [])}
                 />
               </EuiFlexItem>
             );

public/components/integrations/components/available_integration_card_view.tsx

@@ -25,6 +25,7 @@ import { useToast } from '../../../../public/components/common/toast';
 import { HttpStart } from '../../../../../../src/core/public';
 
 export interface AvailableIntegrationType {
+  labels?: string[];
   name: string;
   description: string;
   assetUrl?: string | undefined;
@@ -117,8 +118,7 @@ export function AvailableIntegrationOverviewPage(props: AvailableIntegrationOver
       setData(exists.data);
 
       let newItems = exists.data.hits
-        .flatMap((hit: { components: Array<{ name: string }> }) => hit.components)
-        .map((component: { name: string }) => component.name);
+        .flatMap((hit: { labels?: string[] }) => hit.labels ?? []);
       newItems = [...new Set(newItems)].sort().map((newItem) => {
         return {
           name: newItem,

public/components/integrations/components/available_integration_overview_page.tsx

@@ -5,18 +5,11 @@
 
 import {
   EuiButtonGroup,
-  EuiFieldSearch,
-  EuiFilterButton,
-  EuiFilterGroup,
-  EuiFilterSelectItem,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiIcon,
   EuiInMemoryTable,
   EuiLink,
   EuiPageContent,
-  EuiPopover,
-  EuiPopoverTitle,
   EuiSpacer,
   EuiTableFieldDataColumnType,
   EuiText,
@@ -44,7 +37,7 @@ export function AvailableIntegrationsTable(props: AvailableIntegrationsTableProp
 
   const [toggleIconIdSelected, setToggleIconIdSelected] = useState('0');
 
-  const onChangeIcons = (optionId) => {
+  const onChangeIcons = (optionId: string) => {
     setToggleIconIdSelected(optionId);
     if (optionId === '0') {
       props.setCardView(false);

public/components/integrations/components/available_integration_table.tsx

@@ -6,24 +6,24 @@
 import { EuiBadge, EuiBadgeGroup, EuiToolTip } from '@elastic/eui';
 import React from 'react';
 
-export const badges = (categories) => {
-  if (categories.length <= 3) {
+export const badges = (labels: string[]) => {
+  if (labels.length <= 3) {
     return (
       <EuiBadgeGroup>
-        {categories.map((cateogry) => {
-          return <EuiBadge>{cateogry.name}</EuiBadge>;
+        {labels.map((label) => {
+          return <EuiBadge>{label}</EuiBadge>;
         })}
       </EuiBadgeGroup>
     );
   } else {
-    const tooltip = `+${categories.length - 2} more`;
+    const tooltip = `+${labels.length - 2} more`;
     return (
       <EuiBadgeGroup>
-        <EuiBadge>{categories[0].name}</EuiBadge>
-        <EuiBadge>{categories[1].name}</EuiBadge>
+        <EuiBadge>{labels[0]}</EuiBadge>
+        <EuiBadge>{labels[1]}</EuiBadge>
         <EuiBadge>
           <EuiToolTip
-            content={categories.slice(2).map((item, index) => (index ? ', ' : '') + item.name)}
+            content={labels.slice(2).map((item: string, index: number) => (index ? ', ' : '') + item)}
           >
             <h4>{tooltip}</h4>
           </EuiToolTip>

public/components/integrations/components/integration_category_badge_group.tsx

@@ -43,8 +43,8 @@ export function IntegrationDetails(props: any) {
           </EuiText>
           <EuiSpacer size="m" />
           <EuiBadgeGroup>
-            {config.components.map((cateogry) => {
-              return <EuiBadge>{cateogry.name}</EuiBadge>;
+            {config.labels?.map((label: string) => {
+              return <EuiBadge>{label}</EuiBadge>;
             })}
           </EuiBadgeGroup>
         </EuiFlexItem>

public/components/integrations/components/integration_details_panel.tsx

@@ -1,45 +1,46 @@
 {
-    "name": "apache",
-    "version": "1.0.0",
-    "displayName": "Apache Dashboard",
-    "description": "Apache web logs collector",
-    "license": "Apache-2.0",
-    "type": "logs_apache",
-    "author": "OpenSearch",
-    "sourceUrl": "https://github.com/opensearch-project/dashboards-observability/tree/main/server/adaptors/integrations/__data__/repository/apache/info",
-    "statics": {
-        "logo": {
-            "annotation": "Apache Logo",
-            "path": "logo.png"
-        },
-        "gallery": [
-            {
-                "annotation": "Apache Dashboard",
-                "path": "dashboard1.png"
-            }
-        ]
+  "name": "apache",
+  "version": "1.0.0",
+  "displayName": "Apache Dashboard",
+  "description": "Apache web logs collector",
+  "license": "Apache-2.0",
+  "type": "logs_apache",
+  "labels": ["log", "communication", "http"],
+  "author": "OpenSearch",
+  "sourceUrl": "https://github.com/opensearch-project/dashboards-observability/tree/main/server/adaptors/integrations/__data__/repository/apache/info",
+  "statics": {
+    "logo": {
+      "annotation": "Apache Logo",
+      "path": "logo.png"
     },
-    "components": [
-        {
-            "name": "communication",
-            "version": "1.0.0"
-        },
-        {
-            "name": "http",
-            "version": "1.0.0"
-        },
-        {
-            "name": "logs_apache",
-            "version": "1.0.0"
-        }
-    ],
-    "assets": {
-        "savedObjects": {
-            "name": "apache",
-            "version": "1.0.0"
-        }
+    "gallery": [
+      {
+        "annotation": "Apache Dashboard",
+        "path": "dashboard1.png"
+      }
+    ]
+  },
+  "components": [
+    {
+      "name": "communication",
+      "version": "1.0.0"
     },
-    "sampleData": {
-        "path": "sample.json"
+    {
+      "name": "http",
+      "version": "1.0.0"
+    },
+    {
+      "name": "logs_apache",
+      "version": "1.0.0"
+    }
+  ],
+  "assets": {
+    "savedObjects": {
+      "name": "apache",
+      "version": "1.0.0"
     }
+  },
+  "sampleData": {
+    "path": "sample.json"
+  }
 }

server/adaptors/integrations/__data__/repository/apache/apache-1.0.0.json

@@ -1,10 +1,13 @@
 # Ingestion Pipeline
-To set up an ingestion pipeline, I used Docker to run Fluent-bit and an Apache fake log generator, along with an instance of OpenSearch. 
+
+To set up an ingestion pipeline, I used Docker to run Fluent-bit and an Apache fake log generator, along with an instance of OpenSearch.
 
 ## FluentBit and OpenSearch Setup
+
 First, create a `docker-compose.yml` instance like [this](https://github.com/opensearch-project/data-prepper/blob/93d06db5cad280e2e4c53e12dfb47c7cbaa7b364/examples/log-ingestion/docker-compose.yaml). This will pull FluentBit and OpenSearch Docker images and run them in `opensearch-net` Docker network.
 
 Next, use an Apache log generator to generate sample logs. I used `mingrammer/flog` in my `docker-compose.yml` file:
+
 ```
   apache:
     image: mingrammer/flog
@@ -23,6 +26,7 @@ Next, use an Apache log generator to generate sample logs. I used `mingrammer/fl
 ```
 
 Then, create a `fluent-bit.conf` as follows:
+
 ```
 [SERVICE]
     Parsers_File parsers.conf
@@ -51,9 +55,11 @@ Then, create a `fluent-bit.conf` as follows:
     Index ss4o_logs-apache-prod-sample
     Suppress_Type_Name On
 ```
+
 This creates a Fluent-Bit pipeline that forwards your generated apache logs through a parser to OpenSearch.
 
 Create a `parsers.conf` file as follows:
+
 ```
 [PARSER]
     Name   apache
@@ -66,6 +72,7 @@ Create a `parsers.conf` file as follows:
 You can also use a [GeoIP2 Filter](https://docs.fluentbit.io/manual/pipeline/filters/geoip2-filter) to enrich the data with geolocation data.
 
 Finally, I used a `otel-converter.lua` script to convert the parsed data into schema-compliant data:
+
 ```lua
 local hexCharset = "0123456789abcdef"
 local function randHex(length)
@@ -96,7 +103,7 @@ function convert_to_otel(tag, timestamp, record)
     if tag=="apache.access" then
         record.remote=record.host
     end
-    
+
     local data = {
         traceId=randHex(32),
         spanId=randHex(16),

server/adaptors/integrations/__data__/repository/apache/info/INGESTION.md

@@ -1,14 +1,17 @@
 # Apache Integration
 
 ## What is Apache ?
+
 Apache is an open source web server software for modern operating systems including UNIX and Windows.
 
 See additional details [here](https://httpd.apache.org/).
 
 ## What is Apache Integration ?
+
 An integration is a bundle of pre-canned assets which are bundled togather in a meaningful manner.
 
 Apache integration includes dashboards, visualisations, queries and an index mapping.
 
 ### Dashboards
+
 ![](../static/dashboard1.png)