Add list of client connections per user

src/App.js

@@ -5,6 +5,7 @@ import authProvider from "./synapse/authProvider";
 import dataProvider from "./synapse/dataProvider";
 import { UserList, UserCreate, UserEdit } from "./components/users";
 import { RoomList } from "./components/rooms";
+import { ConnectionsShow } from "./components/connections";
 import LoginPage from "./components/LoginPage";
 import UserIcon from "@material-ui/icons/Group";
 import { ViewListIcon as RoomIcon } from "@material-ui/icons/ViewList";
@@ -36,6 +37,7 @@ const App = () => (
       icon={UserIcon}
     />
     <Resource name="rooms" list={RoomList} icon={RoomIcon} />
+    <Resource name="connections" show={ConnectionsShow} />
   </Admin>
 );
 

src/components/connections.js

@@ -0,0 +1,44 @@
+import React from "react";
+import {
+  Datagrid,
+  Show,
+  SimpleForm,
+  TextField,
+  ArrayField,
+  DateField,
+} from "react-admin";
+
+
+export const ConnectionsShow = props => (
+  <Show {...props} >
+    <SimpleForm toolbar={false} >
+      <TextField source="user_id" label="resources.users.fields.id" />
+      <ArrayField
+        source="devices[].sessions[0].connections"
+        label="resources.connections.name"
+      >
+        <Datagrid style={{width: "100%"}}>
+            <TextField source="ip" sortable={false} />
+            <DateField
+              source="last_seen"
+              showTime
+              options={{
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit',
+              }}
+              sortable={false}
+            />
+            <TextField 
+              source="user_agent" 
+              sortable={false}
+              style={{width: "100%"}}
+            />
+        </Datagrid>
+      </ArrayField>
+    </SimpleForm>
+  </Show>
+);

src/components/users.js

@@ -14,6 +14,7 @@ import {
   TextInput,
   ReferenceField,
   regex,
+  ShowButton,
 } from "react-admin";
 
 const UserFilter = props => (
@@ -56,6 +57,7 @@ export const UserList = props => (
       <BooleanField source="is_guest" sortable={false} />
       <BooleanField source="admin" sortable={false} />
       <BooleanField source="deactivated" sortable={false} />
+      <ShowButton basePath="connections" data="id" />
     </Datagrid>
   </List>
 );
@@ -87,4 +89,4 @@ export const UserEdit = props => (
       <BooleanInput source="deactivated" />
     </SimpleForm>
   </Edit>
-);
+);

src/i18n/de.js

@@ -38,5 +38,13 @@ export default {
         joined_members: "Mitglieder",
       },
     },
+    connections: {
+      name: "Verbindungen",
+      fields: {
+        last_seen: "Datum",
+        ip: "IP-Adresse",
+        user_agent: "User Agent",
+      },
+    },
   },
 };

src/i18n/en.js

@@ -38,5 +38,13 @@ export default {
         joined_members: "Members",
       },
     },
+    connections: {
+      name: "Connections",
+      fields: {
+        last_seen: "Date",
+        ip: "IP address",
+        user_agent: "User agent",
+      },
+    },
   },
 };

src/synapse/dataProvider.js

@@ -42,6 +42,14 @@ const resourceMap = {
       return json.total_rooms;
     },
   },
+  connections: {
+    path: "/_synapse/admin/v1/whois",
+    map: c => ({
+      ...c,
+      id: c.user_id,
+    }),
+    data: "connections",
+  },
 };
 
 function filterNullValues(key, value) {