From b9c9b3a3e4fa5fcb22663c065a1b2251126322cb Mon Sep 17 00:00:00 2001
From: zhourun <12264651+zrzrzzr@user.noreply.gitee.com>
Date: Mon, 23 Oct 2023 22:38:40 +0800
Subject: [PATCH] update developer network metrics

---
 config/routes.ts                     | 11 +++-
 src/pages/DeveloperMetrics/index.tsx | 93 ++++++++++++++++++++++++++++
 src/pages/PrivilegeEvents/index.tsx  | 89 ++++++++++++++++++++++++++
 3 files changed, 192 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/DeveloperMetrics/index.tsx
 create mode 100644 src/pages/PrivilegeEvents/index.tsx

diff --git a/config/routes.ts b/config/routes.ts
index 65957df..73d26cc 100644
--- a/config/routes.ts
+++ b/config/routes.ts
@@ -30,7 +30,16 @@
     icon: 'Github',
     component: './RepositoriesManager',
   },
-
+  {
+    path: '/privilege_events',
+    name: 'privilege_events',
+    component: './PrivilegeEvents/index.tsx'
+  },
+  {
+    path: '/developer_events',
+    name: 'developer_events',
+    component: './DeveloperMetrics/index.tsx'
+  },
   {
     path: '/networkmetrics',
     name: 'networkmetrics',
diff --git a/src/pages/DeveloperMetrics/index.tsx b/src/pages/DeveloperMetrics/index.tsx
new file mode 100644
index 0000000..14bab4e
--- /dev/null
+++ b/src/pages/DeveloperMetrics/index.tsx
@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from 'react';  
+  
+interface ICountMetricsData {  
+  author_name: string;  
+  commit_num: number;  
+  line_of_code: number;  
+}  
+  
+interface IDeveloperNetworkMetricsData {  
+  author_name: string;  
+  degree_centrality: number;  
+  eigenvector_centrality: number;  
+}  
+  
+const DataComponent: React.FC = () => {  
+  const [countMetricsData, setCountMetricsData] = useState<ICountMetricsData[]>([]);  
+  const [developerNetworkMetricsData, setDeveloperNetworkMetricsData] = useState<IDeveloperNetworkMetricsData[]>([]);  
+  
+  useEffect(() => {  
+    fetchCountMetricsData();  
+    fetchDeveloperNetworkMetricsData();  
+  }, []);  
+  
+  const fetchCountMetricsData = async () => {  
+    try {  
+      const response = await fetch('http://127.0.0.1:5000/metrics/api/count_metrics', {  
+        method: 'GET'  
+      });  
+      const jsonData = await response.json();  
+      setCountMetricsData(jsonData);  
+    } catch (error) {  
+      console.log(error);  
+    }  
+  };  
+  
+  const fetchDeveloperNetworkMetricsData = async () => {  
+    try {  
+      const response = await fetch('http://127.0.0.1:5000/metrics/api/developer_network_metrics', {  
+        method: 'GET'  
+      });  
+      const jsonData = await response.json();  
+      setDeveloperNetworkMetricsData(jsonData);  
+    } catch (error) {  
+      console.log(error);  
+    }  
+  };  
+  
+  return (  
+    <div>  
+      <h2>Count Metrics</h2>  
+      <table>  
+        <thead>  
+          <tr>  
+            <th>Author Name</th>  
+            <th>Commit Num</th>  
+            <th>Line of Code</th>  
+          </tr>  
+        </thead>  
+        <tbody>  
+          {countMetricsData.map((item, index) => (  
+            <tr key={index}>  
+              <td>{item.author_name}</td>  
+              <td>{item.commit_num}</td>  
+              <td>{item.line_of_code}</td>  
+            </tr>  
+          ))}  
+        </tbody>  
+      </table>  
+  
+      <h2>Developer Network Metrics</h2>  
+      <table>  
+        <thead>  
+          <tr>  
+            <th>Author Name</th>  
+            <th>Degree Centrality</th>  
+            <th>Eigenvector Centrality</th>  
+          </tr>  
+        </thead>  
+        <tbody>  
+          {developerNetworkMetricsData.map((item, index) => (  
+            <tr key={index}>  
+              <td>{item.author_name}</td>  
+              <td>{item.degree_centrality}</td>  
+              <td>{item.eigenvector_centrality}</td>  
+            </tr>  
+          ))}  
+        </tbody>  
+      </table>  
+    </div>  
+  );  
+};  
+  
+export default DataComponent;  
\ No newline at end of file
diff --git a/src/pages/PrivilegeEvents/index.tsx b/src/pages/PrivilegeEvents/index.tsx
new file mode 100644
index 0000000..9fc4a79
--- /dev/null
+++ b/src/pages/PrivilegeEvents/index.tsx
@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from 'react';  
+  
+interface IDataItem {  
+  actor_login: string;  
+  added_to_project: string;  
+  converted_note_to_issue: string;  
+  deployed: string;  
+  deployment_environment_changed: string;  
+  locked: string;  
+  merged: string;  
+  moved_columns_in_project: string;  
+  pinned: string;  
+  removed_from_project: string;  
+  review_dismissed: string;  
+  transferred: string;  
+  unlocked: string;  
+  unpinned: string;  
+  user_blocked: string;  
+}  
+  
+const DataComponent: React.FC = () => {  
+  const [data, setData] = useState<IDataItem[]>([]);  
+  
+  useEffect(() => {  
+    fetchData();  
+  }, []);  
+  
+  const fetchData = async () => {  
+    try {  
+      const response = await fetch('http://127.0.0.1:5000/metrics/api/privilege_events', {  
+        method: 'GET'  
+      });  
+      const jsonData = await response.json();  
+      setData(jsonData);  
+    } catch (error) {  
+      console.log(error);  
+    }  
+  };  
+  
+  return (  
+    <div>  
+      <h2>Data Component</h2>  
+      <table>  
+        <thead>  
+          <tr>  
+            <th>actor_login</th>  
+            <th>added_to_project</th>  
+            <th>converted_note_to_issue</th>  
+            <th>deployed</th>  
+            <th>deployment_environment_changed</th>  
+            <th>locked</th>  
+            <th>merged</th>  
+            <th>moved_columns_in_project</th>  
+            <th>pinned</th>  
+            <th>removed_from_project</th>  
+            <th>review_dismissed</th>  
+            <th>transferred</th>  
+            <th>unlocked</th>  
+            <th>unpinned</th>  
+            <th>user_blocked</th>  
+          </tr>  
+        </thead>  
+        <tbody>  
+          {data.map((item, index) => (  
+            <tr key={index}>  
+              <td>{item.actor_login}</td>  
+              <td>{item.added_to_project}</td>  
+              <td>{item.converted_note_to_issue}</td>  
+              <td>{item.deployed}</td>  
+              <td>{item.deployment_environment_changed}</td>  
+              <td>{item.locked}</td>  
+              <td>{item.merged}</td>  
+              <td>{item.moved_columns_in_project}</td>  
+              <td>{item.pinned}</td>  
+              <td>{item.removed_from_project}</td>  
+              <td>{item.review_dismissed}</td>  
+              <td>{item.transferred}</td>  
+              <td>{item.unlocked}</td>  
+              <td>{item.unpinned}</td>  
+              <td>{item.user_blocked}</td>  
+            </tr>  
+          ))}  
+        </tbody>  
+      </table>  
+    </div>  
+  );  
+};  
+  
+export default DataComponent;  
\ No newline at end of file