}
export default withRouter(Instance)
diff --git a/maubot/management/frontend/src/pages/dashboard/InstanceDatabase.js b/maubot/management/frontend/src/pages/dashboard/InstanceDatabase.js
new file mode 100644
index 0000000..18b5816
--- /dev/null
+++ b/maubot/management/frontend/src/pages/dashboard/InstanceDatabase.js
@@ -0,0 +1,101 @@
+// maubot - A plugin-based Matrix bot system.
+// Copyright (C) 2018 Tulir Asokan
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
+import React, { Component } from "react"
+import { NavLink, Link, Route } from "react-router-dom"
+import { ReactComponent as ChevronLeft } from "../../res/chevron-left.svg"
+import { ReactComponent as OrderDesc } from "../../res/sort-down.svg"
+import { ReactComponent as OrderAsc } from "../../res/sort-up.svg"
+import api from "../../api"
+import Spinner from "../../components/Spinner"
+
+class InstanceDatabase extends Component {
+ constructor(props) {
+ super(props)
+ this.state = {
+ tables: null,
+ sortBy: null,
+ }
+ }
+
+ async componentWillMount() {
+ const tables = new Map(Object.entries(await api.getInstanceDatabase(this.props.instanceID)))
+ for (const table of tables.values()) {
+ table.columns = new Map(Object.entries(table.columns))
+ for (const column of table.columns.values()) {
+ column.sort = "desc"
+ }
+ }
+ this.setState({ tables })
+ }
+
+ toggleSort(column) {
+ column.sort = column.sort === "desc" ? "asc" : "desc"
+ this.forceUpdate()
+ }
+
+ renderTable = ({ match }) => {
+ const table = this.state.tables.get(match.params.table)
+ console.log(table)
+ return
diff --git a/maubot/management/frontend/src/res/chevron-left.svg b/maubot/management/frontend/src/res/chevron-left.svg
new file mode 100644
index 0000000..0cdead5
--- /dev/null
+++ b/maubot/management/frontend/src/res/chevron-left.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/maubot/management/frontend/src/res/sort-down.svg b/maubot/management/frontend/src/res/sort-down.svg
new file mode 100644
index 0000000..23f0fdd
--- /dev/null
+++ b/maubot/management/frontend/src/res/sort-down.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/maubot/management/frontend/src/res/sort-up.svg b/maubot/management/frontend/src/res/sort-up.svg
new file mode 100644
index 0000000..5554514
--- /dev/null
+++ b/maubot/management/frontend/src/res/sort-up.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/maubot/management/frontend/src/style/base/elements.sass b/maubot/management/frontend/src/style/base/elements.sass
index fc0b24f..67d6d75 100644
--- a/maubot/management/frontend/src/style/base/elements.sass
+++ b/maubot/management/frontend/src/style/base/elements.sass
@@ -62,13 +62,13 @@
> button, > .button
flex: 1
- &:first-of-type
+ &:first-child
margin-right: .5rem
- &:last-of-type
+ &:last-child
margin-left: .5rem
- &:first-of-type:last-of-type
+ &:first-child:last-child
margin: 0
=vertical-button-group()
diff --git a/maubot/management/frontend/src/style/pages/dashboard.sass b/maubot/management/frontend/src/style/pages/dashboard.sass
index d04cbba..67ff779 100644
--- a/maubot/management/frontend/src/style/pages/dashboard.sass
+++ b/maubot/management/frontend/src/style/pages/dashboard.sass
@@ -76,13 +76,14 @@
@import client/index
@import instance
+ @import instance-database
@import plugin
> div
margin: 2rem 4rem
@media screen and (max-width: 50rem)
- margin: 2rem 1rem
+ margin: 1rem
> div.not-found, > div.home
text-align: center
@@ -95,10 +96,13 @@
margin: 1rem .5rem
width: calc(100% - 1rem)
- button.open-log
+ button.open-log, a.open-database
+button
+main-color-button
+ a.open-database
+ +link-button
+
div.error
+notification($error)
margin: 1rem .5rem
diff --git a/maubot/management/frontend/src/style/pages/instance-database.sass b/maubot/management/frontend/src/style/pages/instance-database.sass
new file mode 100644
index 0000000..fb0df77
--- /dev/null
+++ b/maubot/management/frontend/src/style/pages/instance-database.sass
@@ -0,0 +1,78 @@
+// maubot - A plugin-based Matrix bot system.
+// Copyright (C) 2018 Tulir Asokan
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
+
+> div.instance-database
+ margin: 0
+
+ > div.topbar
+ background-color: $primary-light
+
+ display: flex
+ justify-items: center
+ align-items: center
+
+ > a
+ display: flex
+ justify-items: center
+ align-items: center
+ text-decoration: none
+ user-select: none
+
+ height: 2.5rem
+ width: 100%
+
+ > *:not(.topbar)
+ margin: 2rem 4rem
+
+ @media screen and (max-width: 50rem)
+ margin: 1rem
+
+ > div.tables
+ display: flex
+ flex-wrap: wrap
+
+ > a
+ +link-button
+ color: black
+ flex: 1
+
+ border-bottom: 2px solid $primary
+
+ padding: .25rem
+ margin: .25rem
+
+ &:hover
+ background-color: $primary-light
+ border-bottom: 2px solid $primary-dark
+
+ &.active
+ background-color: $primary
+
+ > div.table
+ table
+ font-family: "Fira Code", monospace
+ width: 100%
+ box-sizing: border-box
+
+ > thead
+ font-weight: bold
+
+ > tr > td > span
+ align-items: center
+ justify-items: center
+ display: flex
+ cursor: pointer
+ user-select: none
diff --git a/maubot/management/frontend/src/style/pages/topbar.sass b/maubot/management/frontend/src/style/pages/topbar.sass
index c241974..26618e2 100644
--- a/maubot/management/frontend/src/style/pages/topbar.sass
+++ b/maubot/management/frontend/src/style/pages/topbar.sass
@@ -14,7 +14,7 @@
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see .
-.topbar
+> .topbar
background-color: $primary
display: flex
@@ -28,7 +28,10 @@
// Hamburger menu based on "Pure CSS Hamburger fold-out menu" codepen by Erik Terwan (MIT license)
// https://codepen.io/erikterwan/pen/EVzeRP
-.hamburger
+> .topbar
+ user-select: none
+
+> .topbar > .hamburger
display: block
user-select: none
cursor: pointer
@@ -42,6 +45,7 @@
background: white
border-radius: 3px
+ user-select: none
z-index: 1