feat(metric): update to depin scan iframe

.env.tmpl

@@ -7,6 +7,7 @@
 DATABASE_URL=postgresql://w3badmin:PaSsW0Rd@127.0.0.1/w3bstream
 ADMIN_KEY=iotex.W3B.admin
 JWT_SIGN_KEY=xxxx
+NEXT_PUBLIC_DEPIN_SCAN_URL=https://depinscan.io/
 NEXT_PUBLIC_API_URL=http://localhost:8888
 NEXT_PUBLIC_EVENT_URL=http://localhost:8889
 NEXT_PUBLIC_METRICS_URL=http://23.251.148.128:4000

docker-compose-dev.yaml

@@ -51,6 +51,7 @@ services:
       NEXT_PUBLIC_EVENT_URL: http://w3bapp:8889
       NEXT_PUBLIC_MQTT_URL: mqtt://mqtt_server:1883
       NEXT_PUBLIC_METRICS_URL: http://prometheus:9090
+      NEXT_PUBLIC_DEPIN_SCAN_URL: ${NEXT_PUBLIC_DEPIN_SCAN_URL:-https://metrics-staging.w3bstream.com}
       ADMIN_KEY: ${ADMIN_KEY:-iotex.W3B.admin}
       JWT_SIGN_KEY: ${JWT_SIGN_KEY:-xxxx}
 

docker-compose.yaml

@@ -50,6 +50,7 @@ services:
       NEXT_PUBLIC_EVENT_URL: ${NEXT_PUBLIC_EVENT_URL:-http://w3bapp:8889}
       NEXT_PUBLIC_MQTT_URL: ${NEXT_PUBLIC_MQTT_URL:-mqtt://mqtt_server:1883}
       NEXT_PUBLIC_METRICS_URL: ${NEXT_PUBLIC_METRICS_URL:-http://prometheus:9090}
+      NEXT_PUBLIC_DEPIN_SCAN_URL: ${NEXT_PUBLIC_DEPIN_SCAN_URL:-https://depinscan.io}
       ADMIN_KEY: ${ADMIN_KEY:-iotex.W3B.admin}
       JWT_SIGN_KEY: ${JWT_SIGN_KEY:-xxxx}
 

src/components/IDE/Metrics/index.tsx

@@ -3,16 +3,12 @@ import { Flex, Box, Icon, Text } from '@chakra-ui/react';
 import { observer } from 'mobx-react-lite';
 import { useStore } from '@/store/index';
 import { JSONMetricsView } from '@/components/JSONMetricsView';
-import { getSelectedStyles } from '../ToolBar';
-import { HiOutlineDatabase } from 'react-icons/hi';
-import { TbApi } from 'react-icons/tb';
-import { TimeRangePick } from '@/components/JSONMetricsView/TimeRangePick';
+import Link from 'next/link';
 
 const Metrics = () => {
   const {
-    w3s: { metrics }
+    w3s: { metrics, project }
   } = useStore();
-
   metrics.use();
 
   return (
@@ -23,50 +19,20 @@ const Metrics = () => {
             Summary
           </Text>
           <Text color={'#7A7A7A'} fontSize="14px">
-            Metrics aggregated across all custom and workers.dev routes invoking this Worker.
+            metrics aggregated from  <Link style={{ fontSize: "14px", color: "#855eff" }} href={`${process.env.NEXT_PUBLIC_DEPIN_SCAN_URL}`}>[DePIN scan]</Link>
           </Text>
+
         </Box>
-        {/* <Flex
-          p="6px 20px"
-          alignItems="center"
-          cursor="pointer"
-          color="rgba(15, 15, 15, 0.75)"
-          boxSize="border-box"
-          borderRadius={'8px'}
-          {...getSelectedStyles(metrics.showContent === 'API')}
-          onClick={(e) => {
-            metrics.showContent = 'API';
-          }}
-        >
-          <Icon as={TbApi} boxSize={6} />
-          <Box ml="15px" fontSize="14px">
-            API
-          </Box>
-        </Flex>
-        <Flex
-          ml="10px"
-          p="6px 20px"
-          alignItems="center"
-          cursor="pointer"
-          boxSize="border-box"
-          color="rgba(15, 15, 15, 0.75)"
-          borderRadius={'8px'}
-          {...getSelectedStyles(metrics.showContent === 'DATABASE')}
-          onClick={(e) => {
-            metrics.dbState.call();
-            metrics.showContent = 'DATABASE';
-          }}
-        >
-          <Icon as={HiOutlineDatabase} boxSize={6} />
-          <Box ml="15px" fontSize="14px">
-            Database
-          </Box>
-        </Flex> */}
       </Flex>
-      <Box mb="10px">
-        <TimeRangePick {...metrics.timeRangePick.data} />
+      <Box mt={2}>
+        <JSONMetricsView data={metrics.metricsData} />
+      </Box>
+      <Box style={{ marginLeft: '-10px', marginRight: "-10px" }}>
+
+        <iframe
+          src={`${process.env.NEXT_PUBLIC_DEPIN_SCAN_URL}/widget/metrics/${project.curProject.f_name}?coin=IOTX`}
+          style={{ width: "100%", minHeight: '1100px' }}></iframe>
       </Box>
-      <JSONMetricsView data={metrics.metricsData} />
     </Box>
   );
 };

src/components/IDE/Projects/index.tsx

@@ -149,9 +149,6 @@ const Projects = observer(() => {
                   e.stopPropagation();
                   if (instance) {
                     router.push(`/project/${project.f_name}?tab=METRICS`);
-                    // w3s.showContent = 'METRICS';
-                    // allProjects.onSelect(index);
-                    // projectDetail.call();
                   } else {
                     await w3s.applet.uploadWASM({
                       projectName: project.name,

src/components/IDE/ToolBar/index.tsx

@@ -10,7 +10,7 @@ import { ChevronDownIcon } from '@chakra-ui/icons';
 import { INSTANCE_STATUS } from '@/components/JSONTable/FieldRender';
 import toast from 'react-hot-toast';
 import { useRouter } from 'next/router';
-interface ToolBar extends BoxProps {}
+interface ToolBar extends BoxProps { }
 
 const ToolBar = (props: ToolBar) => {
   const {
@@ -119,25 +119,27 @@ const ToolBar = (props: ToolBar) => {
             })}
           </PopoverContent>
         </Popover>
-        <Flex
-          w="100%"
-          p="14px 18px"
-          alignItems="center"
-          cursor="pointer"
-          color="rgba(15, 15, 15, 0.75)"
-          borderRadius="8px"
-          {...getSelectedStyles(router.query.tab === 'METRICS')}
-          onClick={(e) => {
-            // w3s.showContent = 'METRICS';
-            console.log(router);
-            jumpTab('METRICS');
-          }}
-        >
-          <Icon as={BiBarChartSquare} boxSize={5} />
-          <Box ml="15px" fontSize="14px">
-            Metrics
-          </Box>
-        </Flex>
+        {
+          process.env.NEXT_PUBLIC_DEPIN_SCAN_URL && <Flex
+            w="100%"
+            p="14px 18px"
+            alignItems="center"
+            cursor="pointer"
+            color="rgba(15, 15, 15, 0.75)"
+            borderRadius="8px"
+            {...getSelectedStyles(router.query.tab === 'METRICS')}
+            onClick={(e) => {
+              // w3s.showContent = 'METRICS';
+              console.log(router);
+              jumpTab('METRICS');
+            }}
+          >
+            <Icon as={BiBarChartSquare} boxSize={5} />
+            <Box ml="15px" fontSize="14px">
+              Metrics
+            </Box>
+          </Flex>
+        }
         <Flex
           w="100%"
           mt="14px"
@@ -241,29 +243,29 @@ const ToolBar = (props: ToolBar) => {
 export function getSelectedStyles(selected: boolean) {
   return selected
     ? {
-        sx: {
-          background: 'rgba(148, 111, 255, 0.1)',
+      sx: {
+        background: 'rgba(148, 111, 255, 0.1)',
+        '& > svg': {
+          color: '#946FFF'
+        },
+        '& > div': {
+          color: '#946FFF'
+        }
+      }
+    }
+    : {
+      sx: {
+        ':hover': {
           '& > svg': {
             color: '#946FFF'
           },
           '& > div': {
             color: '#946FFF'
-          }
+          },
+          background: 'rgba(148, 111, 255, 0.1)'
         }
       }
-    : {
-        sx: {
-          ':hover': {
-            '& > svg': {
-              color: '#946FFF'
-            },
-            '& > div': {
-              color: '#946FFF'
-            },
-            background: 'rgba(148, 111, 255, 0.1)'
-          }
-        }
-      };
+    };
 }
 
 export default observer(ToolBar);

src/components/JSONMetricsView/index.tsx

@@ -16,7 +16,7 @@ const components = {
 
 export const JSONMetricsView = ({ data }: { data: JSONMetricsView[] }) => {
   return (
-    <Grid numItems={1} numItemsSm={1} numItemsLg={2} numItemsMd={2} className="gap-2">
+    <Grid numItems={1} numItemsSm={1} numItemsLg={1} numItemsMd={1} className="gap-2">
       {data.map((item) => {
         let Component = components[item.type];
         //@ts-ignore

src/pages/project/[id].tsx

@@ -16,6 +16,9 @@ const Page = observer(() => {
   const router = useRouter();
   useEffect(() => {
     if (router.query.tab) {
+      if (router.query.tab == 'METRICS' && !process.env.NEXT_PUBLIC_DEPIN_SCAN_URL) {
+        router.query.tab = 'CURRENT_PUBLISHERS';
+      }
       //@ts-ignore
       w3s.showContent = router.query.tab;
     }
@@ -31,7 +34,7 @@ const Page = observer(() => {
       } else {
         w3s.project.allProjects.call().then((res) => {
           w3s.project.allProjects.onSelect(res?.findIndex((i) => String(i.f_name) == String(router.query.id)) ?? 0);
-          console.log(w3s.project.allProjects.currentIndex,' w3s.project.allProjects');
+          console.log(w3s.project.allProjects.currentIndex, ' w3s.project.allProjects');
         });
         w3s.project.projectDetail.call(String(router.query.id));
       }

src/store/lib/w3bstream/schema/metrics.ts

@@ -254,15 +254,13 @@ export default class MetricsModule {
   showContent: 'DATABASE' | 'API' = 'API';
 
   get metricsData() {
-    if (this.showContent === 'DATABASE') {
-      return [this.dataBaseMetrics];
-    }
-
-    if (this.showContent === 'API') {
-      return [this.activeDevicesMetrics, this.dataMessagesMetrics, this.blockchainTransactionMetrics, this.dataBaseMetrics];
-    }
-
-    return [];
+    // if (this.showContent === 'DATABASE') {
+    //   return [this.dataBaseMetrics];
+    // }
+    // if (this.showContent === 'API') {
+    //   return [this.activeDevicesMetrics, this.dataMessagesMetrics, this.blockchainTransactionMetrics, this.dataBaseMetrics];
+    // }
+    return [this.dataBaseMetrics];
   }
 
   constructor() {