// @flow
'use strict'

import React from 'react' /* eslint no-unused-vars: 0 */
import { render } from 'react-dom'
import { BrowserRouter, Match, browserHistory, Link } from 'react-router'

import { ProcessList } from './components/ProcessList.jsx'
import { ServiceMap } from './components/ServiceMap.jsx'
import { ConnectedWidget } from './components/ConnectedWidget.jsx'

import './socket'

render(
  <BrowserRouter history={ browserHistory }>
    <div style={{ textAlign: 'center', width: '100%' }}>
      <h2>
        <Link style={{
          color: 'black'
        }} to='/'>SQLSidecar</Link>
      </h2>
      <ConnectedWidget />
      <ServiceMap />
      <Match pattern='/processlist' component={ ProcessList } />
    </div>
  </BrowserRouter>, document.getElementById('ui')
)