Merge branch 'master' into purge_room

2020-07-21 19:25:12 +02:00 · 2020-07-21 19:25:12 +02:00 · eef20d4274
commit eef20d4274
parent 29703af44c 1074178e31
10 changed files with 1880 additions and 1354 deletions
--- a/README.md
+++ b/README.md
@ -4,6 +4,28 @@

 This project is built using [react-admin](https://marmelab.com/react-admin/).

-Use `yarn install` after cloning this repo.
+It needs at least Synapse v1.15.0 for all functions to work as expected!

-Use `yarn start` to launch the webserver.
+## Step-By-Step install:
+
+You have two options:
+
+1.  Download the source code from github and run using nodejs
+2.  Run the Docker container
+
+Steps for 1):
+
+- make sure you have installed the following: git, yarn, nodejs
+- download the source code: `git clone https://github.com/Awesome-Technologies/synapse-admin.git`
+- change into downloaded directory: `cd synapse-admin`
+- download dependencies: `yarn install`
+- start web server: `yarn start`
+
+Steps for 2):
+
+- run the Docker container: `docker run -p 8080:80 awesometechnologies/synapse-admin`
+- browse to http://localhost:8080
+
+## Screenshots
+
+![Screenshots](./screenshots.jpg)
--- a/package.json
+++ b/package.json
@ -12,7 +12,7 @@
  "devDependencies": {
    "@testing-library/jest-dom": "^5.1.1",
    "@testing-library/react": "^10.0.2",
-    "@testing-library/user-event": "^10.0.1",
+    "@testing-library/user-event": "^12.0.11",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "eslint": "^6.8.0",
@ -24,7 +24,7 @@
    "prop-types": "^15.7.2",
    "ra-language-german": "^2.1.2",
    "react": "^16.13.1",
-    "react-admin": "^3.4.0",
+    "react-admin": "^3.7.0",
    "react-dom": "^16.13.1",
    "react-scripts": "^3.4.1"
  },
--- a/screenshots.jpg
+++ b/screenshots.jpg
--- a/src/App.js
+++ b/src/App.js
@ -4,7 +4,7 @@ import polyglotI18nProvider from "ra-i18n-polyglot";
 import authProvider from "./synapse/authProvider";
 import dataProvider from "./synapse/dataProvider";
 import { UserList, UserCreate, UserEdit } from "./components/users";
-import { RoomList } from "./components/rooms";
+import { RoomList, RoomShow } from "./components/rooms";
 import LoginPage from "./components/LoginPage";
 import UserIcon from "@material-ui/icons/Group";
 import { ViewListIcon as RoomIcon } from "@material-ui/icons/ViewList";
@ -35,8 +35,9 @@ const App = () => (
      edit={UserEdit}
      icon={UserIcon}
    />
-    <Resource name="rooms" list={RoomList} icon={RoomIcon} />
+    <Resource name="rooms" list={RoomList} show={RoomShow} icon={RoomIcon} />
    <Resource name="connections" />
+    <Resource name="devices" />
    <Resource name="servernotices" />
  </Admin>
 );
--- a/src/components/rooms.js
+++ b/src/components/rooms.js
@ -1,17 +1,27 @@
 import React, { Fragment } from "react";
+import { connect } from "react-redux";
 import {
+  BooleanField,
  Datagrid,
+  Filter,
  List,
-  TextField,
  Pagination,
  BulkDeleteButton,
  BooleanField,
+  SelectField,
+  Show,
+  Tab,
+  TabbedShowLayout,
+  TextField,
  useTranslate,
 } from "react-admin";
 import get from "lodash/get";
-import { Tooltip, Typography } from "@material-ui/core";
+import { Tooltip, Typography, Chip } from "@material-ui/core";
 import HttpsIcon from "@material-ui/icons/Https";
 import NoEncryptionIcon from "@material-ui/icons/NoEncryption";
+import PageviewIcon from "@material-ui/icons/Pageview";
+import ViewListIcon from "@material-ui/icons/ViewList";
+import VisibilityIcon from "@material-ui/icons/Visibility";

 const RoomPagination = props => (
  <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
@ -56,28 +66,175 @@ const EncryptionField = ({ source, record = {}, emptyText }) => {
  );
 };

-export const RoomList = props => (
-  <List
-    {...props}
-    pagination={<RoomPagination />}
-    bulkActionButtons={<RoomBulkActionButtons />}
-    sort={{ field: "name", order: "ASC" }}
-  >
-    <Datagrid>
-      <EncryptionField
-        source="is_encrypted"
-        sortBy="encryption"
-        label={<HttpsIcon />}
+const RoomTitle = ({ record }) => {
+  const translate = useTranslate();
+  var name = "";
+  if (record) {
+    name = record.name !== "" ? record.name : record.id;
+  }
+
+  return (
+    <span>
+      {translate("resources.rooms.name", 1)} {name}
+    </span>
+  );
+};
+
+export const RoomShow = props => {
+  const translate = useTranslate();
+  return (
+    <Show {...props} title={<RoomTitle />}>
+      <TabbedShowLayout>
+        <Tab label="synapseadmin.rooms.tabs.basic" icon={<ViewListIcon />}>
+          <TextField source="room_id" />
+          <TextField source="name" />
+          <TextField source="canonical_alias" />
+          <TextField source="creator" />
+        </Tab>
+
+        <Tab
+          label="synapseadmin.rooms.tabs.detail"
+          icon={<PageviewIcon />}
+          path="detail"
+        >
+          <TextField source="joined_members" />
+          <TextField source="joined_local_members" />
+          <TextField source="state_events" />
+          <TextField source="version" />
+          <TextField
+            source="encryption"
+            emptyText={translate("resources.rooms.enums.unencrypted")}
+          />
+        </Tab>
+
+        <Tab
+          label="synapseadmin.rooms.tabs.permission"
+          icon={<VisibilityIcon />}
+          path="permission"
+        >
+          <BooleanField source="federatable" />
+          <BooleanField source="public" />
+          <SelectField
+            source="join_rules"
+            choices={[
+              { id: "public", name: "resources.rooms.enums.join_rules.public" },
+              { id: "knock", name: "resources.rooms.enums.join_rules.knock" },
+              { id: "invite", name: "resources.rooms.enums.join_rules.invite" },
+              {
+                id: "private",
+                name: "resources.rooms.enums.join_rules.private",
+              },
+            ]}
+          />
+          <SelectField
+            source="guest_access"
+            choices={[
+              {
+                id: "can_join",
+                name: "resources.rooms.enums.guest_access.can_join",
+              },
+              {
+                id: "forbidden",
+                name: "resources.rooms.enums.guest_access.forbidden",
+              },
+            ]}
+          />
+          <SelectField
+            source="history_visibility"
+            choices={[
+              {
+                id: "invited",
+                name: "resources.rooms.enums.history_visibility.invited",
+              },
+              {
+                id: "joined",
+                name: "resources.rooms.enums.history_visibility.joined",
+              },
+              {
+                id: "shared",
+                name: "resources.rooms.enums.history_visibility.shared",
+              },
+              {
+                id: "world_readable",
+                name: "resources.rooms.enums.history_visibility.world_readable",
+              },
+            ]}
+          />
+        </Tab>
+      </TabbedShowLayout>
+    </Show>
+  );
+};
+const RoomFilter = ({ ...props }) => {
+  const translate = useTranslate();
+  return (
+    <Filter {...props}>
+      <Chip
+        label={translate("resources.rooms.fields.joined_local_members")}
+        source="joined_local_members"
+        defaultValue={false}
+        style={{ marginBottom: 8 }}
      />
-      <TextField source="room_id" sortable={false} />
-      <TextField source="name" />
-      <TextField source="canonical_alias" />
-      <TextField source="joined_members" />
-      <TextField source="joined_local_members" />
-      <TextField source="state_events" />
-      <TextField source="version" />
-      <BooleanField source="federatable" />
-      <BooleanField source="public" />
-    </Datagrid>
-  </List>
-);
+      <Chip
+        label={translate("resources.rooms.fields.state_events")}
+        source="state_events"
+        defaultValue={false}
+        style={{ marginBottom: 8 }}
+      />
+      <Chip
+        label={translate("resources.rooms.fields.version")}
+        source="version"
+        defaultValue={false}
+        style={{ marginBottom: 8 }}
+      />
+      <Chip
+        label={translate("resources.rooms.fields.federatable")}
+        source="federatable"
+        defaultValue={false}
+        style={{ marginBottom: 8 }}
+      />
+    </Filter>
+  );
+};
+
+const FilterableRoomList = ({ ...props }) => {
+  const filter = props.roomFilters;
+  const localMembersFilter =
+    filter && filter.joined_local_members ? true : false;
+  const stateEventsFilter = filter && filter.state_events ? true : false;
+  const versionFilter = filter && filter.version ? true : false;
+  const federateableFilter = filter && filter.federatable ? true : false;
+
+  return (
+    <List
+      {...props}
+      pagination={<RoomPagination />}
+      sort={{ field: "name", order: "ASC" }}
+      filters={<RoomFilter />}
+      bulkActionButtons={<RoomBulkActionButtons />}
+    >
+      <Datagrid rowClick="show">
+        <EncryptionField
+          source="is_encrypted"
+          sortBy="encryption"
+          label={<HttpsIcon />}
+        />
+        <TextField source="name" />
+        <TextField source="joined_members" />
+        {localMembersFilter && <TextField source="joined_local_members" />}
+        {stateEventsFilter && <TextField source="state_events" />}
+        {versionFilter && <TextField source="version" />}
+        {federateableFilter && <BooleanField source="federatable" />}
+        <BooleanField source="public" />
+      </Datagrid>
+    </List>
+  );
+};
+
+function mapStateToProps(state) {
+  return {
+    roomFilters: state.admin.resources.rooms.list.params.displayedFilters,
+  };
+}
+
+export const RoomList = connect(mapStateToProps)(FilterableRoomList);
--- a/src/components/users.js
+++ b/src/components/users.js
@ -1,6 +1,8 @@
-import React, { Fragment } from "react";
+import React, { cloneElement, Fragment } from "react";
+import Avatar from "@material-ui/core/Avatar";
 import PersonPinIcon from "@material-ui/icons/PersonPin";
 import ContactMailIcon from "@material-ui/icons/ContactMail";
+import DevicesIcon from "@material-ui/icons/Devices";
 import SettingsInputComponentIcon from "@material-ui/icons/SettingsInputComponent";
 import {
  ArrayInput,
@ -18,11 +20,11 @@ import {
  FormTab,
  BooleanField,
  BooleanInput,
-  ImageField,
  PasswordInput,
  TextField,
  TextInput,
  ReferenceField,
+  ReferenceManyField,
  SelectInput,
  BulkDeleteButton,
  DeleteButton,
@ -30,8 +32,64 @@ import {
  regex,
  useTranslate,
  Pagination,
+  CreateButton,
+  ExportButton,
+  TopToolbar,
+  sanitizeListRestProps,
 } from "react-admin";
 import { ServerNoticeButton, ServerNoticeBulkButton } from "./ServerNotices";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles({
+  small: {
+    height: "40px",
+    width: "40px",
+  },
+  large: {
+    height: "120px",
+    width: "120px",
+    float: "right",
+  },
+});
+
+const UserListActions = ({
+  currentSort,
+  className,
+  resource,
+  filters,
+  displayedFilters,
+  exporter, // you can hide ExportButton if exporter = (null || false)
+  filterValues,
+  permanentFilter,
+  hasCreate, // you can hide CreateButton if hasCreate = false
+  basePath,
+  selectedIds,
+  onUnselectItems,
+  showFilter,
+  maxResults,
+  total,
+  ...rest
+}) => (
+  <TopToolbar className={className} {...sanitizeListRestProps(rest)}>
+    {filters &&
+      cloneElement(filters, {
+        resource,
+        showFilter,
+        displayedFilters,
+        filterValues,
+        context: "button",
+      })}
+    <CreateButton basePath={basePath} />
+    <ExportButton
+      disabled={total === 0}
+      resource={resource}
+      sort={currentSort}
+      filter={{ ...filterValues, ...permanentFilter }}
+      exporter={exporter}
+      maxResults={maxResults}
+    />
+  </TopToolbar>
+);

 const UserPagination = props => (
  <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
@ -62,40 +120,37 @@ const UserBulkActionButtons = props => {
  );
 };

-export const UserList = props => (
-  <List
-    {...props}
-    filters={<UserFilter />}
-    filterDefaultValues={{ guests: true, deactivated: false }}
-    bulkActionButtons={<UserBulkActionButtons />}
-    pagination={<UserPagination />}
-  >
-    <Datagrid rowClick="edit">
-      <ReferenceField
-        source="Avatar"
-        reference="users"
-        link={false}
-        sortable={false}
-      >
-        <ImageField source="avatar_url" title="displayname" />
-      </ReferenceField>
-      <TextField source="id" sortable={false} />
-      {/* Hack since the users endpoint does not give displaynames in the list*/}
-      <ReferenceField
-        source="name"
-        reference="users"
-        link={false}
-        sortable={false}
-      >
-        <TextField source="displayname" />
-      </ReferenceField>
-      <BooleanField source="is_guest" sortable={false} />
-      <BooleanField source="admin" sortable={false} />
-      <BooleanField source="deactivated" sortable={false} />
-    </Datagrid>
-  </List>
+const AvatarField = ({ source, className, record = {} }) => (
+  <Avatar src={record[source]} className={className} />
 );

+export const UserList = props => {
+  const classes = useStyles();
+  return (
+    <List
+      {...props}
+      filters={<UserFilter />}
+      filterDefaultValues={{ guests: true, deactivated: false }}
+      actions={<UserListActions maxResults={10000} />}
+      bulkActionButtons={<UserBulkActionButtons />}
+      pagination={<UserPagination />}
+    >
+      <Datagrid rowClick="edit">
+        <AvatarField
+          source="avatar_src"
+          sortable={false}
+          className={classes.small}
+        />
+        <TextField source="id" sortable={false} />
+        <TextField source="displayname" sortable={false} />
+        <BooleanField source="is_guest" sortable={false} />
+        <BooleanField source="admin" sortable={false} />
+        <BooleanField source="deactivated" sortable={false} />
+      </Datagrid>
+    </List>
+  );
+};
+
 // https://matrix.org/docs/spec/appendices#user-identifiers
 const validateUser = regex(
  /^@[a-z0-9._=\-/]+:.*/,
@ -143,74 +198,81 @@ const UserTitle = ({ record }) => {
  const translate = useTranslate();
  return (
    <span>
-      {translate("resources.users.name")}{" "}
+      {translate("resources.users.name", {
+        smart_count: 1,
+      })}{" "}
      {record ? `"${record.displayname}"` : ""}
    </span>
  );
 };
-export const UserEdit = props => (
-  <Edit {...props} title={<UserTitle />}>
-    <TabbedForm toolbar={<UserEditToolbar />}>
-      <FormTab label="resources.users.name" icon={<PersonPinIcon />}>
-        <TextInput source="id" disabled />
-        <TextInput source="displayname" />
-        <PasswordInput source="password" autoComplete="new-password" />
-        <BooleanInput source="admin" />
-        <BooleanInput
-          source="deactivated"
-          helperText="resources.users.helper.deactivate"
-        />
-        <DateField
-          source="creation_ts_ms"
-          showTime
-          options={{
-            year: "numeric",
-            month: "2-digit",
-            day: "2-digit",
-            hour: "2-digit",
-            minute: "2-digit",
-            second: "2-digit",
-          }}
-        />
-        <TextField source="consent_version" />
-      </FormTab>
-      <FormTab
-        label="resources.users.threepid"
-        icon={<ContactMailIcon />}
-        path="threepid"
-      >
-        <ArrayInput source="threepids">
-          <SimpleFormIterator>
-            <SelectInput
-              source="medium"
-              choices={[
-                { id: "email", name: "resources.users.email" },
-                { id: "msisdn", name: "resources.users.msisdn" },
-              ]}
-            />
-            <TextInput source="address" />
-          </SimpleFormIterator>
-        </ArrayInput>
-      </FormTab>
-      <FormTab
-        label="resources.connections.name"
-        icon={<SettingsInputComponentIcon />}
-        path="connections"
-      >
-        <ReferenceField
-          reference="connections"
-          source="id"
-          addLabel={false}
-          link={false}
+export const UserEdit = props => {
+  const classes = useStyles();
+  const translate = useTranslate();
+  return (
+    <Edit {...props} title={<UserTitle />}>
+      <TabbedForm toolbar={<UserEditToolbar />}>
+        <FormTab label="resources.users.name" icon={<PersonPinIcon />}>
+          <AvatarField
+            source="avatar_src"
+            sortable={false}
+            className={classes.large}
+          />
+          <TextInput source="id" disabled />
+          <TextInput source="displayname" />
+          <PasswordInput source="password" autoComplete="new-password" />
+          <BooleanInput source="admin" />
+          <BooleanInput
+            source="deactivated"
+            helperText="resources.users.helper.deactivate"
+          />
+          <DateField
+            source="creation_ts_ms"
+            showTime
+            options={{
+              year: "numeric",
+              month: "2-digit",
+              day: "2-digit",
+              hour: "2-digit",
+              minute: "2-digit",
+              second: "2-digit",
+            }}
+          />
+          <TextField source="consent_version" />
+        </FormTab>
+        <FormTab
+          label="resources.users.threepid"
+          icon={<ContactMailIcon />}
+          path="threepid"
        >
-          <ArrayField
-            source="devices[].sessions[0].connections"
-            label="resources.connections.name"
+          <ArrayInput source="threepids">
+            <SimpleFormIterator>
+              <SelectInput
+                source="medium"
+                choices={[
+                  { id: "email", name: "resources.users.email" },
+                  { id: "msisdn", name: "resources.users.msisdn" },
+                ]}
+              />
+              <TextInput source="address" />
+            </SimpleFormIterator>
+          </ArrayInput>
+        </FormTab>
+        <FormTab
+          label={translate("resources.devices.name", { smart_count: 2 })}
+          icon={<DevicesIcon />}
+          path="devices"
+        >
+          <ReferenceManyField
+            reference="devices"
+            target="user_id"
+            addLabel={false}
          >
            <Datagrid style={{ width: "100%" }}>
-              <TextField source="ip" sortable={false} />
+              <TextField source="device_id" sortable={false} />
+              <TextField source="display_name" sortable={false} />
+              <TextField source="last_seen_ip" sortable={false} />
              <DateField
-                source="last_seen"
+                source="last_seen_ts"
                showTime
                options={{
                  year: "numeric",
@ -222,15 +284,49 @@ export const UserEdit = props => (
                }}
                sortable={false}
              />
-              <TextField
-                source="user_agent"
-                sortable={false}
-                style={{ width: "100%" }}
-              />
            </Datagrid>
-          </ArrayField>
-        </ReferenceField>
-      </FormTab>
-    </TabbedForm>
-  </Edit>
-);
+          </ReferenceManyField>
+        </FormTab>
+        <FormTab
+          label="resources.connections.name"
+          icon={<SettingsInputComponentIcon />}
+          path="connections"
+        >
+          <ReferenceField
+            reference="connections"
+            source="id"
+            addLabel={false}
+            link={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>
+  );
+};
--- a/src/i18n/de.js
+++ b/src/i18n/de.js
@ -15,6 +15,15 @@ export default {
      invalid_user_id:
        "Muss eine vollständige Matrix Benutzer-ID sein, z.B. @benutzer_id:homeserver",
    },
+    rooms: {
+      details: "Raumdetails",
+      tabs: {
+        basic: "Allgemein",
+        members: "Mitglieder",
+        detail: "Details",
+        permission: "Berechtigungen",
+      },
+    },
  },
  resources: {
    users: {
@ -28,7 +37,7 @@ export default {
        id: "Benutzer-ID",
        name: "Name",
        is_guest: "Gast",
-        admin: "Admin",
+        admin: "Server Administrator",
        deactivated: "Deaktiviert",
        guests: "Zeige Gäste",
        show_deactivated: "Zeige deaktivierte Benutzer",
@ -36,6 +45,7 @@ export default {
        displayname: "Anzeigename",
        password: "Passwort",
        avatar_url: "Avatar URL",
+        avatar_src: "Avatar",
        medium: "Medium",
        threepids: "3PIDs",
        address: "Adresse",
@ -57,12 +67,36 @@ export default {
        name: "Name",
        canonical_alias: "Alias",
        joined_members: "Mitglieder",
-        joined_local_members: "lokale Mitglieder",
+        joined_local_members: "Lokale Mitglieder",
        state_events: "Ereignisse",
        version: "Version",
        is_encrypted: "Verschlüsselt",
-        federatable: "Föderiert",
+        encryption: "Verschlüsselungs-Algorithmus",
+        federatable: "Föderierbar",
        public: "Öffentlich",
+        creator: "Ersteller",
+        join_rules: "Beitrittsregeln",
+        guest_access: "Gastzugriff",
+        history_visibility: "Historie-Sichtbarkeit",
+      },
+      enums: {
+        join_rules: {
+          public: "Öffentlich",
+          knock: "Auf Anfrage",
+          invite: "Nur auf Einladung",
+          private: "Privat",
+        },
+        guest_access: {
+          can_join: "Gäste können beitreten",
+          forbidden: "Gäste können nicht beitreten",
+        },
+        history_visibility: {
+          invited: "Ab Einladung",
+          joined: "Ab Beitritt",
+          shared: "Ab Setzen der Einstellung",
+          world_readable: "Jeder",
+        },
+        unencrypted: "Nicht verschlüsselt",
      },
      helper: {
        purge:
@ -80,6 +114,15 @@ export default {
        user_agent: "User Agent",
      },
    },
+    devices: {
+      name: "Gerät |||| Geräte",
+      fields: {
+        device_id: "Geräte-ID",
+        display_name: "Anzeigename",
+        last_seen_ts: "Zeitstempel",
+        last_seen_ip: "IP-Adresse",
+      },
+    },
    servernotices: {
      name: "Serverbenachrichtigungen",
      send: "Servernachricht versenden",
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@ -14,6 +14,14 @@ export default {
      invalid_user_id:
        "Must be a fully qualified Matrix user-id, e.g. @user_id:homeserver",
    },
+    rooms: {
+      tabs: {
+        basic: "Basic",
+        members: "Members",
+        detail: "Details",
+        permission: "Permissions",
+      },
+    },
  },
  resources: {
    users: {
@ -27,7 +35,7 @@ export default {
        id: "User-ID",
        name: "Name",
        is_guest: "Guest",
-        admin: "Admin",
+        admin: "Server Administrator",
        deactivated: "Deactivated",
        guests: "Show guests",
        show_deactivated: "Show deactivated users",
@ -35,6 +43,7 @@ export default {
        displayname: "Displayname",
        password: "Password",
        avatar_url: "Avatar URL",
+        avatar_src: "Avatar",
        medium: "Medium",
        threepids: "3PIDs",
        address: "Address",
@ -60,8 +69,32 @@ export default {
        state_events: "State events",
        version: "Version",
        is_encrypted: "Encrypted",
+        encryption: "Encryption",
        federatable: "Federatable",
        public: "Public",
+        creator: "Creator",
+        join_rules: "Join rules",
+        guest_access: "Guest access",
+        history_visibility: "History visibility",
+      },
+      enums: {
+        join_rules: {
+          public: "Public",
+          knock: "Knock",
+          invite: "Invite",
+          private: "Private",
+        },
+        guest_access: {
+          can_join: "Guests can join",
+          forbidden: "Guests can not join",
+        },
+        history_visibility: {
+          invited: "Since invited",
+          joined: "Since joined",
+          shared: "Since shared",
+          world_readable: "Anyone",
+        },
+        unencrypted: "Unencrypted",
      },
      helper: {
        purge:
@ -79,6 +112,15 @@ export default {
        user_agent: "User agent",
      },
    },
+    devices: {
+      name: "Device |||| Devices",
+      fields: {
+        device_id: "Device-ID",
+        display_name: "Displayname",
+        last_seen_ts: "Timestamp",
+        last_seen_ip: "IP address",
+      },
+    },
    servernotices: {
      name: "Server Notices",
      send: "Send server notices",
--- a/src/synapse/dataProvider.js
+++ b/src/synapse/dataProvider.js
@ -14,12 +14,24 @@ const jsonClient = (url, options = {}) => {
  return fetchUtils.fetchJson(url, options);
 };

+const mxcUrlToHttp = mxcUrl => {
+  const homeserver = localStorage.getItem("base_url");
+  const re = /^mxc:\/\/([^/]+)\/(\w+)/;
+  var ret = re.exec(mxcUrl);
+  console.log("mxcClient " + ret);
+  if (ret == null) return null;
+  const serverName = ret[1];
+  const mediaId = ret[2];
+  return `${homeserver}/_matrix/media/r0/thumbnail/${serverName}/${mediaId}?width=24&height=24&method=scale`;
+};
+
 const resourceMap = {
  users: {
    path: "/_synapse/admin/v2/users",
    map: u => ({
      ...u,
      id: u.name,
+      avatar_src: mxcUrlToHttp(u.avatar_url),
      is_guest: !!u.is_guest,
      admin: !!u.admin,
      deactivated: !!u.deactivated,
@ -27,11 +39,7 @@ const resourceMap = {
      creation_ts_ms: u.creation_ts * 1000,
    }),
    data: "users",
-    total: (json, from, perPage) => {
-      return json.next_token
-        ? parseInt(json.next_token, 10) + perPage
-        : from + json.users.length;
-    },
+    total: json => json.total,
    create: data => ({
      endpoint: `/_synapse/admin/v2/users/${data.id}`,
      body: data,
@ -64,6 +72,16 @@ const resourceMap = {
      method: "POST",
    }),
  },
+  devices: {
+    map: d => ({
+      ...d,
+      id: d.device_id,
+    }),
+    data: "devices",
+    reference: id => ({
+      endpoint: `/_synapse/admin/v2/users/${id}/devices`,
+    }),
+  },
  connections: {
    path: "/_synapse/admin/v1/whois",
    map: c => ({
@ -163,30 +181,18 @@ const dataProvider = {
  },

  getManyReference: (resource, params) => {
-    // FIXME
    console.log("getManyReference " + resource);
-    const { page, perPage } = params.pagination;
-    const { field, order } = params.sort;
-    const query = {
-      sort: JSON.stringify([field, order]),
-      range: JSON.stringify([(page - 1) * perPage, page * perPage - 1]),
-      filter: JSON.stringify({
-        ...params.filter,
-        [params.target]: params.id,
-      }),
-    };

    const homeserver = localStorage.getItem("base_url");
    if (!homeserver || !(resource in resourceMap)) return Promise.reject();

    const res = resourceMap[resource];

-    const endpoint_url = homeserver + res.path;
-    const url = `${endpoint_url}?${stringify(query)}`;
+    const ref = res["reference"](params.id);
+    const endpoint_url = homeserver + ref.endpoint;

-    return jsonClient(url).then(({ headers, json }) => ({
-      data: json,
-      total: parseInt(headers.get("content-range").split("/").pop(), 10),
+    return jsonClient(endpoint_url).then(({ headers, json }) => ({
+      data: json[res.data].map(res.map),
    }));
  },

--- a/yarn.lock
+++ b/yarn.lock