Add a new tab to rooms with forward extremities

src/App.js

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

src/components/rooms.js

@@ -8,6 +8,7 @@ import {
   DeleteButton,
   Filter,
   List,
+  NumberField,
   Pagination,
   ReferenceField,
   ReferenceManyField,
@@ -23,7 +24,9 @@ import {
 } from "react-admin";
 import get from "lodash/get";
 import PropTypes from "prop-types";
+import { makeStyles } from "@material-ui/core/styles";
 import { Tooltip, Typography, Chip } from "@material-ui/core";
+import FastForwardIcon from "@material-ui/icons/FastForward";
 import HttpsIcon from "@material-ui/icons/Https";
 import NoEncryptionIcon from "@material-ui/icons/NoEncryption";
 import PageviewIcon from "@material-ui/icons/Pageview";
@@ -38,6 +41,13 @@ import {
   RoomDirectorySaveButton,
 } from "./RoomDirectory";
 
+const useStyles = makeStyles(theme => ({
+  helper_forward_extremities: {
+    fontFamily: "Roboto, Helvetica, Arial, sans-serif",
+    margin: "0.5em",
+  },
+}));
+
 const RoomPagination = props => (
   <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
 );
@@ -109,6 +119,7 @@ const RoomShowActions = ({ basePath, data, resource }) => {
 };
 
 export const RoomShow = props => {
+  const classes = useStyles({ props });
   const translate = useTranslate();
   return (
     <Show {...props} actions={<RoomShowActions />} title={<RoomTitle />}>
@@ -220,6 +231,7 @@ export const RoomShow = props => {
             ]}
           />
         </Tab>
+
         <Tab
           label={translate("resources.room_state.name", { smart_count: 2 })}
           icon={<EventIcon />}
@@ -256,6 +268,40 @@ export const RoomShow = props => {
             </Datagrid>
           </ReferenceManyField>
         </Tab>
+
+        <Tab
+          label="resources.forward_extremities.name"
+          icon={<FastForwardIcon />}
+          path="forward_extremities"
+        >
+          <div className={classes.helper_forward_extremities}>
+            {translate("resources.rooms.helper.forward_extremities")}
+          </div>
+          <ReferenceManyField
+            reference="forward_extremities"
+            target="room_id"
+            addLabel={false}
+          >
+            <Datagrid style={{ width: "100%" }}>
+              <TextField source="id" sortable={false} />
+              <DateField
+                source="received_ts"
+                showTime
+                options={{
+                  year: "numeric",
+                  month: "2-digit",
+                  day: "2-digit",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  second: "2-digit",
+                }}
+                sortable={false}
+              />
+              <NumberField source="depth" sortable={false} />
+              <TextField source="state_group" sortable={false} />
+            </Datagrid>
+          </ReferenceManyField>
+        </Tab>
       </TabbedShowLayout>
     </Show>
   );

src/i18n/de.js

@@ -152,6 +152,10 @@ const de = {
         topic: "Thema",
         avatar: "Avatar",
       },
+      helper: {
+        forward_extremities:
+          "Forward extremities are the leaf events at the end of a Directed acyclic graph (DAG) in a room, aka events that have no children. The more exist in a room, the more state resolution that Synapse needs to perform (hint: it's an expensive operation). While Synapse has code to prevent too many of these existing at one time in a room, bugs can sometimes make them crop up again. If a room has >10 forward extremities, it's worth checking which room is the culprit and potentially removing them using the SQL queries mentioned in #1760.",
+      },
       enums: {
         join_rules: {
           public: "Öffentlich",
@@ -295,6 +299,15 @@ const de = {
         media_length: "Größe der Dateien",
       },
     },
+    forward_extremities: {
+      name: "Vorderextremitäten",
+      fields: {
+        id: "Event-ID",
+        received_ts: "Zeitstempel",
+        depth: "Tiefe",
+        state_group: "Zustandsgruppe",
+      },
+    },
     room_state: {
       name: "Zustandsereignisse",
       fields: {

src/i18n/en.js

@@ -150,6 +150,10 @@ const en = {
         topic: "Topic",
         avatar: "Avatar",
       },
+      helper: {
+        forward_extremities:
+          "Forward extremities are the leaf events at the end of a Directed acyclic graph (DAG) in a room, aka events that have no children. The more exist in a room, the more state resolution that Synapse needs to perform (hint: it's an expensive operation). While Synapse has code to prevent too many of these existing at one time in a room, bugs can sometimes make them crop up again. If a room has >10 forward extremities, it's worth checking which room is the culprit and potentially removing them using the SQL queries mentioned in #1760.",
+      },
       enums: {
         join_rules: {
           public: "Public",
@@ -291,6 +295,15 @@ const en = {
         media_length: "Media length",
       },
     },
+    forward_extremities: {
+      name: "Forward Extremities",
+      fields: {
+        id: "Event ID",
+        received_ts: "Timestamp",
+        depth: "Depth",
+        state_group: "State group",
+      },
+    },
     room_state: {
       name: "State events",
       fields: {

src/synapse/dataProvider.js

@@ -208,6 +208,22 @@ const resourceMap = {
       return json.total;
     },
   },
+  forward_extremities: {
+    map: fe => ({
+      ...fe,
+      id: fe.event_id,
+    }),
+    reference: id => ({
+      endpoint: `/_synapse/admin/v1/rooms/${id}/forward_extremities`,
+    }),
+    data: "results",
+    total: json => {
+      return json.count;
+    },
+    delete: params => ({
+      endpoint: `/_synapse/admin/v1/rooms/${params.id}/forward_extremities`,
+    }),
+  },
   room_directory: {
     path: "/_matrix/client/r0/publicRooms",
     map: rd => ({