add tags table and filters logic

src/components/metrics/HostsTable.tsx

@@ -25,7 +25,7 @@ export function HostsTable(props: MetricsTableProps) {
         {...props}
         title={formatMessage(labels.hosts)}
         type="host"
-        metric={formatMessage(labels.views)}
+        metric={formatMessage(labels.visitors)}
         renderLabel={renderLink}
       />
     </>

src/components/metrics/TagsTable.tsx

@@ -0,0 +1,30 @@
+import MetricsTable, { MetricsTableProps } from './MetricsTable';
+import FilterLink from 'components/common/FilterLink';
+import { useMessages } from 'components/hooks';
+import { Flexbox } from 'react-basics';
+
+export function TagsTable(props: MetricsTableProps) {
+  const { formatMessage, labels } = useMessages();
+
+  const renderLink = ({ x: tag }) => {
+    return (
+      <Flexbox alignItems="center">
+        <FilterLink id="tag" value={tag} label={!tag && formatMessage(labels.none)} />
+      </Flexbox>
+    );
+  };
+
+  return (
+    <>
+      <MetricsTable
+        {...props}
+        title={formatMessage(labels.tags)}
+        type="tag"
+        metric={formatMessage(labels.views)}
+        renderLabel={renderLink}
+      />
+    </>
+  );
+}
+
+export default TagsTable;