Add button to show service statistics

components/visualize/NodeOverview/NodeOverview.tsx

@@ -2,13 +2,10 @@ import { FC, HTMLProps } from 'react'
 import { EnrichedEntity } from '../../../src/types'
 import cx from 'classnames'
 import styles from './NodeOverview.module.css'
-import Link from 'next/link'
 import { EntityIcon } from '../../home/EntityIcon/EntityIcon'
 import { GraphNode } from '../../../src/graph-untangle/types'
-import { fixedEncodeURIComponent } from '../../../src/utils'
-import { useRouter } from 'next/router'
-import { GraphIcon } from '../../icons/GraphIcon'
 import { I18n } from '../../shared/I18n/I18n'
+import { ButtonVisualize } from '../../shared/ButtonVisualize/ButtonVisualize'
 
 export type OverviewGraphNode = GraphNode<{
   icons: (EnrichedEntity | string)[]
@@ -19,20 +16,10 @@ interface Props extends HTMLProps<HTMLDivElement> {
 }
 
 export const NodeOverview: FC<Props> = ({ node, className, ...props }) => {
-  const { query } = useRouter()
   return (
     <div {...props} className={cx(className, styles.root)}>
       <h3>
-        <span className={styles.linkOut}>
-          <Link
-            href={{
-              pathname: `/visualize/${fixedEncodeURIComponent(node.name)}`,
-              query
-            }}
-          >
-            <GraphIcon />
-          </Link>
-        </span>
+        <ButtonVisualize groupId={node.name} />
         {node.name}
       </h3>
       {node.icons?.length ? (