From 08e300cb7f0e89b3f27afd752caa0e0bf985b0ba Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 2 Jan 2023 13:59:33 +0100
Subject: [PATCH] feat(ui) - cards - icon display

---
 .../MetricListItem/MetricListItem.tsx         | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx b/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
index 097f18faf..2c14b0939 100644
--- a/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
+++ b/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Icon, Checkbox, Tooltip } from 'UI';
 import { checkForRecent } from 'App/date';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { withSiteId } from 'App/routes';
+import { TYPES, TIMESERIES, TABLE, CLICKMAP, FUNNEL, ERRORS, RESOURCE_MONITORING } from 'App/constants/card';
 
 interface Props extends RouteComponentProps {
   metric: any;
@@ -13,21 +14,16 @@ interface Props extends RouteComponentProps {
 }
 
 function MetricTypeIcon({ type }: any) {
-  const getIcon = () => {
-    switch (type) {
-      case 'funnel':
-        return 'filter';
-      case 'table':
-        return 'list-alt';
-      case 'timeseries':
-        return 'bar-chart-line';
-    }
-  };
+  const [card, setCard] = useState<any>('');
+  useEffect(() => {
+    const t = TYPES.find(i => i.slug === type);
+    setCard(t)
+  }, [type])
 
   return (
-    <Tooltip title={<div className="capitalize">{type}</div>} >
+    <Tooltip title={<div className="capitalize">{card.title}</div>} >
       <div className="w-9 h-9 rounded-full bg-tealx-lightest flex items-center justify-center mr-2">
-        <Icon name={getIcon()} size="16" color="tealx" />
+        { card.icon && <Icon name={card.icon} size="16" color="tealx" /> }
       </div>
     </Tooltip>
   );