feat(#14): fetching data and creating db list

app/main/db/index.js

@@ -1,8 +1,9 @@
 const ipc = require('electron-better-ipc')
 const { connect } = require('./driver')
 const { startLiveStats } = require('./models/stats')
+const queryResolver = require('./resolver')
 const url = require('../helpers/url')
-const { CONNECT_CHANNEL_NAME } = require('../../shared/channels')
+const { CONNECT_CHANNEL_NAME, QUERIES_CHANNEL_NAME } = require('../../shared/channels')
 
 ipc.answerRenderer(CONNECT_CHANNEL_NAME, async ({ name, address }) => {
   const { host, port } = url.extract(address)
@@ -11,3 +12,7 @@ ipc.answerRenderer(CONNECT_CHANNEL_NAME, async ({ name, address }) => {
   startLiveStats()
   return connectResult
 })
+
+ipc.answerRenderer(QUERIES_CHANNEL_NAME, async (query, args) => {
+  return queryResolver(query, args)
+})

app/main/db/models/table.js

@@ -1,12 +1,8 @@
-const { tableList } = require('../queries/table')
+const { tablesByDb } = require('../queries/table')
 
 const table = {
-  getTables() {
-    return tableList()
-  },
-
-  getTable(matchers = {}) {
-
+  tablesByDb() {
+    return tablesByDb()
   }
 }
 

app/main/db/queries/table.js

@@ -1,12 +1,44 @@
 const { r } = require('rebirthdb-ts')
+const driver = require('../driver')
+const { SYSTEM_DB } = require('../../helpers/constants')
 
-const tableList = () => {
+const connection = () => driver.getConnection()
+
+const tablesByDb = () => {
   return r
-    .db('rethinkdb')
-    .table('table_config')
-    .coerceTo('array')
+    .db(SYSTEM_DB)
+    .table('db_config')
+    .filter(db => db('name').ne(SYSTEM_DB))
+    .map(db => ({
+      name: db('name'),
+      id: db('id'),
+      tables: r
+        .db(SYSTEM_DB)
+        .table('table_status')
+        .orderBy(table => table('name'))
+        .filter({ db: db('name') })
+        .merge(table => ({
+          shards: table('shards')
+            .count()
+            .default(0),
+          replicas: table('shards')
+            .default([])
+            .map(shard => shard('replicas').count())
+            .sum(),
+          replicasReady: table('shards')
+            .default([])
+            .map(shard =>
+              shard('replicas')
+                .filter(replica => replica('state').eq('ready'))
+                .count()
+            )
+            .sum(),
+          status: table('status'),
+          id: table('id')
+        }))
+    })).run(connection())
 }
 
 module.exports = {
-  tableList
-}
+  tablesByDb
+}

app/main/db/resolver.js

@@ -0,0 +1,13 @@
+const table = require('./models/table')
+
+const queries = {
+  'tablesByDb': table.tablesByDb
+}
+const queryResolver = (query='query', args) => {
+  if (!queries[query]) {
+    throw new Error(`Could not resolve query "${query}"`)
+  }
+  return queries[query](args)
+}
+
+module.exports = queryResolver

app/renderer/components/ActionsBar/index.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { StyledActionsBar } from './styles.js'
+
+const ActionsBar = ({ title, children }) => {
+  return (
+    <StyledActionsBar>
+      <h3>{title}</h3>
+      {children}
+    </StyledActionsBar>
+  )
+}
+
+export default ActionsBar

app/renderer/components/ActionsBar/styles.js

@@ -0,0 +1,14 @@
+import styled from 'react-emotion'
+import theme from '@/style/common'
+
+export const StyledActionsBar = styled('header')(props => ({
+
+  width: '100%',
+  backgroundColor: theme.contrastColor,
+  borderBottom: `1px solid ${theme.mainBorderColor}`,
+  height: '50px',
+  padding: '15px',
+  'h3': {
+    fontWeight: 500
+  }
+}))

app/renderer/components/AppHeader/styles.js

@@ -5,7 +5,7 @@ export const StyledAppHeader = styled('header')(props => ({
   position: 'fixed',
   width: '100%',
   top: 0,
-  backgroundColor: theme.mainLightColor,
+  backgroundColor: theme.secColor,
   borderBottom: `1px solid ${theme.mainBorderColor}`,
   zIndex: 2,
   height: theme.appHeaderHeight,

app/renderer/components/Page/Header.js

@@ -6,7 +6,7 @@ import theme from '@/style/common'
 const Container = styled.header`
   background: ${theme.mainColor};
   display: flex;
-  padding: 1rem 10%;
+  padding: 10px 10%;
   align-items: center;
 
   nav {
@@ -26,7 +26,6 @@ const Container = styled.header`
         font-size: 1rem;
         text-decoration: none;
         font-weight: bolder;
-
         &.active {
           color: white;
         }
@@ -39,11 +38,11 @@ const Logo = styled(Link)`
   font-family: 'Quicksand';
   color: ${theme.mainColorLight};
   text-decoration: none;
-  font-size: 1.5rem;
+  font-size: 18px;
   font-weight: bolder;
 
   span {
-    color: ${theme.mainLightColor};
+    color: ${theme.secColor};
   }
 `
 

app/renderer/contexts/StatsContext.js

@@ -1,5 +1,5 @@
 import React, { Component, createContext } from 'react'
-import query from '../service/query'
+import { liveStats } from '../service/ipc'
 
 export const StatsContext = createContext()
 const StatsContextProvider = StatsContext.Provider
@@ -14,7 +14,7 @@ class StatsProvider extends Component {
   }
 
   componentDidMount() {
-    query.subscribeToLiveStats(this.onLiveStats)
+    liveStats(this.onLiveStats)
   }
 
   render() {

app/renderer/service/ipc.js

@@ -1,7 +1,8 @@
 const ipc = require('electron-better-ipc')
 const {
   CONNECT_CHANNEL_NAME,
-  STATS_CHANNEL_NAME
+  STATS_CHANNEL_NAME,
+  QUERIES_CHANNEL_NAME
 } = require('../../shared/channels')
 
 // ToDo: instead of hard coding the channels, we should create a channel factory
@@ -17,6 +18,10 @@ export const connect = ({ name, address }) => {
   return ipc.callMain(CONNECT_CHANNEL_NAME, { name, address })
 }
 
+export const query = (query='', args={}) => {
+  return ipc.callMain(QUERIES_CHANNEL_NAME, query, args)
+}
+
 // the following channels are for "push" updates from main to renderer
 // answerMain is not really answering anything here...just handling the event sent from main
 // each time the main will "push" a message the callback will be executed

app/renderer/style/common.js

@@ -4,7 +4,7 @@ export default {
   mainColorDark: '#321353',
   mainColorLight: '#ad8cd1',
   secColor: '#F1F0F9',
-  mainLightColor: '#f7f7f7',
+  contrastColor: '#FDFDFD',
   mainGradient: 'linear-gradient(180deg, #FF6FD8 10%, #3813C2 100%)',
   mainBorderColor: '#d9d8ff',
   headerBackground: '#272729',

app/renderer/views/Connection/NewConnection/index.js

@@ -3,7 +3,6 @@ import { withRouter } from 'react-router'
 import connection from '../../../service/connection'
 import AppHeader from '../../../components/AppHeader'
 import SideBar from '../../../components/SideBar'
-import MainContent from '../../../components/MainContent'
 import ConnectionList from '../Connections/ConnectionList'
 import NewConnectionForm from './NewConnectionForm'
 
@@ -13,7 +12,7 @@ import {
   CONNECTION_DEFAULT_PORT
 } from '../../../helpers/constants'
 
-import { ConnectionInfo, ConnectionError, Connecting, Logo } from './styles'
+import { MainContent, ConnectionInfo, ConnectionError, Connecting, Logo } from './styles'
 import logoImg from '../../../static/png/rebirth_logo.png'
 
 class NewConnection extends PureComponent {

app/renderer/views/Connection/NewConnection/styles.js

@@ -1,6 +1,13 @@
 import styled from 'react-emotion'
 import theme from '@/style/common'
 
+export const MainContent = styled('main')(props => ({
+  position: 'relative',
+  margin: `0 0 0 ${theme.sideBarWidth}`,
+  top: theme.appHeaderHeight,
+  height: `calc(100vh - ${theme.appHeaderHeight})`
+}))
+
 export const Title = styled('h2')({
   textAlign: 'center',
   position: 'absolute',

app/renderer/views/Tables/Database/DatabaseItem.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { StyledDatabaseItem, DBLabel} from './styles'
+
+const DatabaseItem = props => {
+  const { name } = props.item
+  return (
+    <StyledDatabaseItem>
+      <header>
+        <DBLabel>Database</DBLabel>
+        <span className="db-name">{name}</span>
+      </header>
+      <section>tables list</section>
+    </StyledDatabaseItem>
+  )
+}
+
+export default DatabaseItem

app/renderer/views/Tables/Database/DatabaseList.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { StyledDatabaseList} from './styles'
+import DatabaseItem from './DatabaseItem'
+
+const DatabaseList = props => {
+  const { list } = props
+  return (
+    <StyledDatabaseList>
+      {list.map(db => (
+        <DatabaseItem key={db.id} item={db} />
+      ))}
+    </StyledDatabaseList>
+  )
+}
+
+export default DatabaseList

app/renderer/views/Tables/Database/styles.js

@@ -0,0 +1,39 @@
+import styled from 'react-emotion'
+import theme from '@/style/common'
+
+export const StyledDatabaseList = styled('ul')({
+  padding: '15px',
+  listStyle: 'none'
+})
+
+export const StyledDatabaseItem = styled('li')({
+  border: `1px solid ${theme.mainBorderColor}`,
+  marginBottom: '10px',
+  'header': {
+    background: theme.contrastColor,
+    padding: '8px',
+    borderBottom: `1px solid ${theme.mainBorderColor}`,
+    '.db-name': {
+      paddingLeft: '20px',
+      fontWeight: 500,
+      fontSize: '16px'
+    }
+  },
+  'section': {
+    padding: '8px',
+    background: '#fff'
+  }
+})
+
+export const DBLabel = styled('span')({
+  display: 'inline-block',
+  padding: '0 7px',
+  height: '22px',
+  lineHeight: '20px',
+  textAlign: 'center',
+  color: '#eb2f96',
+  background: '#fff0f6',
+  border: '1px solid #ffadd2',
+  fontSize: '12px'
+
+})