fix: update Alibaba Cloud logo and allow optional CSS for all logos (#3059)

Author: TCL735

src/dataLoaders/components/collectorsWizard/select/TelegrafUIRefreshSelector.tsx

@@ -170,6 +170,7 @@ class TelegrafUIRefreshSelector extends PureComponent<Props, State> {
                   id={item.id}
                   name={item.name}
                   image={item.image}
+                  style={item.style}
                   url={`${item.id}`}
                   selected={this.isCardChecked(item.id)}
                   onClick={this.handleToggle}

src/perf/components/LazySVG.tsx

@@ -1,11 +1,13 @@
-import React, {FC} from 'react'
+import React, {CSSProperties, FC} from 'react'
 
 interface Props {
+  alt: string
   image: string
+  style: CSSProperties
 }
 
-const LazySVG: FC<Props> = ({image}) => {
-  return <img src={image} />
+const LazySVG: FC<Props> = ({alt, image, style}) => {
+  return <img src={image} style={style} alt={alt} />
 }
 
 export default LazySVG

src/writeData/components/TelegrafPluginSection.tsx

@@ -52,6 +52,7 @@ const TelegrafPluginSection = () => {
             id={item.id}
             name={item.name}
             image={item.image}
+            style={item.style}
             url={`${TELEGRAF_PLUGINS}/${item.id}`}
           />
         ))}

src/writeData/components/WriteDataItem.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {FC, Suspense} from 'react'
+import React, {CSSProperties, FC, Suspense} from 'react'
 import {useSelector} from 'react-redux'
 import {useHistory} from 'react-router-dom'
 
@@ -24,6 +24,7 @@ interface Props {
   name: string
   url: string
   image?: string
+  style?: CSSProperties
   selected?: boolean
   onClick?: any
   testID?: string
@@ -34,6 +35,7 @@ const WriteDataItem: FC<Props> = ({
   name,
   url,
   image,
+  style,
   selected,
   onClick,
   testID,
@@ -46,46 +48,26 @@ const WriteDataItem: FC<Props> = ({
   }
 
   let thumb = <img src={placeholderLogo} />
+  const svgStyle = style ? style : ({} as CSSProperties)
 
   if (image) {
     thumb = (
       <Suspense fallback="Loading...">
-        <LazySVG image={image} />
+        <LazySVG image={image} style={svgStyle} alt={name} />
       </Suspense>
     )
   }
 
   if (onClick) {
-    {
-      return (
-        <SquareGrid.Card key={id}>
-          <SelectableCard
-            id={id}
-            formName="load-data-cards"
-            label={name}
-            selected={selected}
-            onClick={onClick}
-            testID={testID}
-            fontSize={ComponentSize.ExtraSmall}
-            className="write-data--item"
-          >
-            <div className="write-data--item-thumb">{thumb}</div>
-          </SelectableCard>
-        </SquareGrid.Card>
-      )
-    }
-  }
-
-  {
     return (
       <SquareGrid.Card key={id}>
         <SelectableCard
           id={id}
           formName="load-data-cards"
           label={name}
-          testID={`load-data-item ${id}`}
-          selected={false}
-          onClick={handleClick}
+          selected={selected}
+          onClick={onClick}
+          testID={testID}
           fontSize={ComponentSize.ExtraSmall}
           className="write-data--item"
         >
@@ -94,6 +76,23 @@ const WriteDataItem: FC<Props> = ({
       </SquareGrid.Card>
     )
   }
+
+  return (
+    <SquareGrid.Card key={id}>
+      <SelectableCard
+        id={id}
+        formName="load-data-cards"
+        label={name}
+        testID={`load-data-item ${id}`}
+        selected={false}
+        onClick={handleClick}
+        fontSize={ComponentSize.ExtraSmall}
+        className="write-data--item"
+      >
+        <div className="write-data--item-thumb">{thumb}</div>
+      </SelectableCard>
+    </SquareGrid.Card>
+  )
 }
 
 export default WriteDataItem

src/writeData/constants/contentTelegrafPlugins.ts

@@ -404,11 +404,13 @@ import zfsLogo from 'src/writeData/graphics/zfs.svg'
 import zipkinLogo from 'src/writeData/graphics/zipkin.svg'
 import zookeeperLogo from 'src/writeData/graphics/zookeeper.svg'
 
+import {CSSProperties} from 'react'
 export interface TelegrafPluginAssets {
   id: string
   name: string
   image?: string
   markdown?: string
+  style?: CSSProperties
 }
 
 export const WRITE_DATA_TELEGRAF_PLUGINS: TelegrafPluginAssets[] = [
@@ -429,6 +431,7 @@ export const WRITE_DATA_TELEGRAF_PLUGINS: TelegrafPluginAssets[] = [
     name: 'Alibaba (Aliyun) CloudMonitor Service Statistics',
     markdown: aliyuncmsMarkdown,
     image: aliyuncmsLogo,
+    style: {maxWidth: '150%'},
   },
   {
     id: 'amd_rocm_smi',