Add list of client connections per user (#26)

List the result of GET /_synapse/admin/v1/whois/<user_id>.

src/App.js

@@ -36,6 +36,7 @@ const App = () => (
       icon={UserIcon}
     />
     <Resource name="rooms" list={RoomList} icon={RoomIcon} />
+    <Resource name="connections" />
   </Admin>
 );
 

src/components/users.js

@@ -1,13 +1,19 @@
 import React from "react";
+import PersonPinIcon from "@material-ui/icons/PersonPin";
+import SettingsInputComponentIcon from "@material-ui/icons/SettingsInputComponent";
 import {
   ArrayInput,
+  ArrayField,
   Datagrid,
+  DateField,
   Create,
   Edit,
   List,
   Filter,
   SimpleForm,
   SimpleFormIterator,
+  TabbedForm,
+  FormTab,
   BooleanField,
   BooleanInput,
   ImageField,
@@ -94,7 +100,8 @@ export const UserCreate = props => (
 
 export const UserEdit = props => (
   <Edit {...props}>
-    <SimpleForm>
+    <TabbedForm>
+      <FormTab label="resources.users.name" icon={<PersonPinIcon />}>
         <TextInput source="id" disabled />
         <TextInput source="displayname" />
         <PasswordInput source="password" autoComplete="new-password" />
@@ -112,6 +119,40 @@ export const UserEdit = props => (
             <TextInput source="address" />
           </SimpleFormIterator>
         </ArrayInput>
-    </SimpleForm>
+      </FormTab>
+      <FormTab
+        label="resources.connections.name"
+        icon={<SettingsInputComponentIcon />}
+      >
+        <ReferenceField reference="connections" source="id" addLabel={false}>
+          <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>
+        </ReferenceField>
+      </FormTab>
+    </TabbedForm>
   </Edit>
 );

src/i18n/de.js

@@ -14,6 +14,7 @@ export default {
   },
   resources: {
     users: {
+      backtolist: "Zurück zur Liste",
       name: "Benutzer",
       email: "E-Mail",
       msisdn: "Telefon",
@@ -44,5 +45,13 @@ export default {
         joined_members: "Mitglieder",
       },
     },
+    connections: {
+      name: "Verbindungen",
+      fields: {
+        last_seen: "Datum",
+        ip: "IP-Adresse",
+        user_agent: "User Agent",
+      },
+    },
   },
 };

src/i18n/en.js

@@ -14,6 +14,7 @@ export default {
   },
   resources: {
     users: {
+      backtolist: "Back to list",
       name: "User |||| Users",
       email: "Email",
       msisdn: "Phone",
@@ -44,5 +45,13 @@ export default {
         joined_members: "Members",
       },
     },
+    connections: {
+      name: "Connections",
+      fields: {
+        last_seen: "Date",
+        ip: "IP address",
+        user_agent: "User agent",
+      },
+    },
   },
 };

src/synapse/dataProvider.js

@@ -44,6 +44,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) {