Add a new tab to rooms with state events

src/App.js

@@ -63,6 +63,7 @@ const App = () => (
     <Resource name="joined_rooms" />
     <Resource name="pushers" />
     <Resource name="servernotices" />
+    <Resource name="room_state" />
   </Admin>
 );
 

src/components/rooms.js

@@ -3,6 +3,7 @@ import { connect } from "react-redux";
 import {
   BooleanField,
   BulkDeleteWithConfirmButton,
+  DateField,
   Datagrid,
   DeleteButton,
   Filter,
@@ -27,6 +28,7 @@ import PageviewIcon from "@material-ui/icons/Pageview";
 import UserIcon from "@material-ui/icons/Group";
 import ViewListIcon from "@material-ui/icons/ViewList";
 import VisibilityIcon from "@material-ui/icons/Visibility";
+import EventIcon from "@material-ui/icons/Event";
 
 const RoomPagination = props => (
   <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
@@ -97,7 +99,9 @@ export const RoomShow = props => {
           <TextField source="room_id" />
           <TextField source="name" />
           <TextField source="canonical_alias" />
-          <TextField source="creator" />
+          <ReferenceField source="creator" reference="users">
+            <TextField source="id" />
+          </ReferenceField>
         </Tab>
 
         <Tab
@@ -197,6 +201,42 @@ export const RoomShow = props => {
             ]}
           />
         </Tab>
+        <Tab
+          label={translate("resources.room_state.name", { smart_count: 2 })}
+          icon={<EventIcon />}
+          path="state"
+        >
+          <ReferenceManyField
+            reference="room_state"
+            target="room_id"
+            addLabel={false}
+          >
+            <Datagrid style={{ width: "100%" }}>
+              <TextField source="type" sortable={false} />
+              <DateField
+                source="origin_server_ts"
+                showTime
+                options={{
+                  year: "numeric",
+                  month: "2-digit",
+                  day: "2-digit",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  second: "2-digit",
+                }}
+                sortable={false}
+              />
+              <TextField source="content" sortable={false} />
+              <ReferenceField
+                source="sender"
+                reference="users"
+                sortable={false}
+              >
+                <TextField source="id" />
+              </ReferenceField>
+            </Datagrid>
+          </ReferenceManyField>
+        </Tab>
       </TabbedShowLayout>
     </Show>
   );

src/i18n/de.js

@@ -143,7 +143,7 @@ export default {
         canonical_alias: "Alias",
         joined_members: "Mitglieder",
         joined_local_members: "Lokale Mitglieder",
-        state_events: "Ereignisse",
+        state_events: "Zustandsereignisse / Komplexität",
         version: "Version",
         is_encrypted: "Verschlüsselt",
         encryption: "Verschlüsselungs-Algorithmus",
@@ -273,6 +273,15 @@ export default {
         media_length: "Größe der Dateien",
       },
     },
+    room_state: {
+      name: "Zustandsereignisse",
+      fields: {
+        type: "Typ",
+        content: "Inhalt",
+        origin_server_ts: "Sendezeit",
+        sender: "Absender",
+      },
+    },
   },
   ra: {
     ...germanMessages.ra,

src/i18n/en.js

@@ -140,7 +140,7 @@ export default {
         canonical_alias: "Alias",
         joined_members: "Members",
         joined_local_members: "local members",
-        state_events: "State events",
+        state_events: "State events / Complexity",
         version: "Version",
         is_encrypted: "Encrypted",
         encryption: "Encryption",
@@ -270,5 +270,14 @@ export default {
         media_length: "Media length",
       },
     },
+    room_state: {
+      name: "State events",
+      fields: {
+        type: "Type",
+        content: "Content",
+        origin_server_ts: "time of send",
+        sender: "Sender",
+      },
+    },
   },
 };

src/synapse/dataProvider.js

@@ -117,6 +117,19 @@ const resourceMap = {
       return json.total;
     },
   },
+  room_state: {
+    map: rs => ({
+      ...rs,
+      id: rs.event_id,
+    }),
+    reference: id => ({
+      endpoint: `/_synapse/admin/v1/rooms/${id}/state`,
+    }),
+    data: "state",
+    total: json => {
+      return json.state.length;
+    },
+  },
   pushers: {
     map: p => ({
       ...p,