start switch to react-admin

yvesago · May 31, 2018 · 496398f · 496398f
1 parent df01000
commit 496398f
Show file tree

Hide file tree

Showing 19 changed files with 657 additions and 380 deletions.
diff --git a/reactviews/package.json b/reactviews/package.json
@@ -3,15 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "admin-on-rest": "1.4.0",
-    "aor-rich-text-input": "^1.0.2",
     "chart.js": "^2.7.2",
     "jwt-decode": "^2.2.0",
     "leaflet": "^1.3.1",
     "leaflet.markercluster": "^1.3.0",
-    "react": "^15.6.2",
+    "ra-input-rich-text": "^2.0.2",
+    "react": "^16.4.0",
+    "react-admin": "^2.0.2",
     "react-chartjs-2": "^2.7.0",
-    "react-dom": "^15.6.2",
+    "react-dom": "^16.4.0",
     "react-leaflet": "1.1.7",
     "react-leaflet-markercluster": "^1.1.8",
     "react-scripts": "^1.1.1",

diff --git a/reactviews/src/ActionExtract.js b/reactviews/src/ActionExtract.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import FlatButton from 'material-ui/FlatButton';
-import { showNotification as showNotificationAction } from 'admin-on-rest';
+import { Button } from 'react-admin';
+import { showNotification as showNotificationAction } from 'react-admin';
 import { push as pushAction } from 'react-router-redux';
 import request from 'superagent';
 import { MyConfig } from './MyConfig';
@@ -28,7 +28,7 @@ class ActionExtractButton extends Component {
     }
 
     render() {
-        return <FlatButton primary label="Extract" onClick={this.handleClick} />;
+        return <Button primary label="Extract" onClick={this.handleClick} />;
     }
 }
 

diff --git a/reactviews/src/ActionFlushIP.js b/reactviews/src/ActionFlushIP.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import FlatButton from 'material-ui/FlatButton';
-import { showNotification as showNotificationAction } from 'admin-on-rest';
+import { Button } from 'react-admin';
+import { showNotification as showNotificationAction } from 'react-admin';
 import { push as pushAction } from 'react-router-redux';
 import request from 'superagent';
 import { MyConfig } from './MyConfig';
@@ -28,7 +28,7 @@ class ActionFlushIPButton extends Component {
     }
 
     render() {
-        return <FlatButton primary label="Flush IPs" onClick={this.handleClick} />;
+        return <Button primary="true" label="Flush IPs" onClick={this.handleClick} />;
     }
 }
 

diff --git a/reactviews/src/App.js b/reactviews/src/App.js
@@ -1,14 +1,14 @@
 import React from 'react';
-import { fetchUtils, Admin, Resource, Delete } from 'admin-on-rest';
+import { fetchUtils, Admin, Resource } from 'react-admin';
 //import './App.css';
 
-import AlertIcon from 'material-ui/svg-icons/action/assessment';
-import SurveyIcon from 'material-ui/svg-icons/device/wifi-tethering';
-import AgentIcon from 'material-ui/svg-icons/notification/wifi';
-import SettingsIcon from 'material-ui/svg-icons/action/settings';
-import MapIcon from 'material-ui/svg-icons/social/public';
+import AlertIcon from '@material-ui/icons/Assessment';
+import SurveyIcon from '@material-ui/icons/WifiTethering';
+import AgentIcon from '@material-ui/icons/Wifi';
+import SettingsIcon from '@material-ui/icons/Settings';
+import MapIcon from '@material-ui/icons/Public';
 
-import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import { createMuiTheme } from '@material-ui/core/styles';
 import myTheme from './myTheme';
 
 import { Dashboard } from './Dashboard';
@@ -43,15 +43,15 @@ const restClient = mySimpleRest( MyConfig.API_URL  + '/admin/api/v1', httpClient
 
 
 const App = () => (
-    <Admin title='Distributed IOC manager' theme={getMuiTheme(myTheme)} 
-        loginPage={authLoginPage} authClient={authClient(MyConfig.AUTH_URL)}
+    <Admin title='Distributed IOC manager' theme={ createMuiTheme(myTheme) }
+        loginPage={authLoginPage} authProvider={authClient(MyConfig.AUTH_URL)}
         customRoutes={customRoutes} dashboard={Dashboard} 
-        restClient={restClient}>
-        <Resource name="alertes" list={AlertList} edit={AlertEdit} remove={Delete} icon={AlertIcon} />
-        <Resource name="surveys" list={SurveyList}  edit={SurveyEdit} create={SurveyCreate} remove={Delete} icon={SurveyIcon} />
-        <Resource name="agents" list={AgentList}  edit={AgentEdit} create={AgentCreate} remove={Delete} icon={AgentIcon} />
-        <Resource name="extracts" list={ExtractList}  edit={ExtractEdit} create={ExtractCreate} remove={Delete} icon={SettingsIcon} />
-        <Resource name="ips" options={{ label: '‣ Extract > IPs'}} list={IPList}  edit={IPEdit} create={IPCreate} remove={Delete} icon={AgentIcon} />
+        dataProvider={restClient}>
+        <Resource name="alertes" list={AlertList} edit={AlertEdit} icon={AlertIcon} />
+        <Resource name="surveys" list={SurveyList}  edit={SurveyEdit} create={SurveyCreate} icon={SurveyIcon} />
+        <Resource name="agents" list={AgentList}  edit={AgentEdit} create={AgentCreate} icon={AgentIcon} />
+        <Resource name="extracts" list={ExtractList}  edit={ExtractEdit} create={ExtractCreate} icon={SettingsIcon} />
+        <Resource name="ips" options={{ label: '‣ Extract > IPs'}} list={IPList}  edit={IPEdit} create={IPCreate} icon={AgentIcon} />
         <Resource name='Map' options={{ label: '‣ Extract > Map'}} list={Mapview} icon={MapIcon} />
         <Resource name="board" edit={BoardEdit} />
     </Admin>

diff --git a/reactviews/src/DashTables.js b/reactviews/src/DashTables.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import { Card, CardHeader } from 'material-ui/Card';
-//import { List, ListItem } from 'material-ui/List';
-import TableIcon from 'material-ui/svg-icons/action/assessment';
+import Card from '@material-ui/core/Card';
+import CardHeader from '@material-ui/core/CardHeader';
+import TableIcon from '@material-ui/icons/Assessment';
 
 import ChartDoghnut from './ChartDoghnut.js';
 
@@ -11,7 +11,7 @@ const styles = {
     dognut: { float: 'left', display: 'inline-block', marginLeft: 15 },
 };
 
-export default ({ nbagents = [], nbsurveys = [], nbalerts = [], subtitle }) => (
+export const DashTables = ({ nbagents = [], nbsurveys = [], nbalerts = [], subtitle }) => (
     <Card style={styles.card}>
         <TableIcon style={styles.icon} />
         <CardHeader title="Tables" subtitle={subtitle} />

diff --git a/reactviews/src/DashText.js b/reactviews/src/DashText.js
@@ -1,8 +1,11 @@
 import React from 'react';
-import { Card, CardHeader, CardText } from 'material-ui/Card';
-import { EditButton, RichTextField } from 'admin-on-rest';
+import Card from '@material-ui/core/Card';
+import CardHeader from '@material-ui/core/CardHeader';
+import CardContent from '@material-ui/core/CardContent';
 
-import InfoIcon from 'material-ui/svg-icons/action/info';
+import { EditButton, RichTextField } from 'react-admin';
+
+import InfoIcon from '@material-ui/icons/Info';
 
 export const DashText = ({...props}) => {
     const { name, style, subtitle, txt } = props;
@@ -14,10 +17,10 @@ export const DashText = ({...props}) => {
                 title={name}
                 subtitle={subtitle}
             />
-            <CardText>  
+            <CardContent>
                 <RichTextField source={txt} {...props} />
                 <EditButton { ...props} />
-            </CardText>
+            </CardContent>
         </Card>
     );
 };
diff --git a/reactviews/src/DashboardCmp.js b/reactviews/src/DashboardCmp.js
@@ -3,10 +3,10 @@ import { MyConfig } from './MyConfig';
 import request from 'superagent';
 import jwt_decode from 'jwt-decode';
 
-import withWidth from 'material-ui/utils/withWidth';
-import { AppBarMobile } from 'admin-on-rest';
+import withWidth from '@material-ui/core/withWidth';
+import { AppBarMobile } from 'react-admin';
 
-import DashTables from './DashTables';
+import { DashTables } from './DashTables';
 import { DashText } from './DashText';
 
 const styles = {

diff --git a/reactviews/src/Mapview.js b/reactviews/src/Mapview.js
@@ -1,12 +1,13 @@
 import React from 'react';
-import { Card, CardText } from 'material-ui/Card';
-import { ViewTitle } from 'admin-on-rest/lib/mui';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import { ViewTitle } from 'react-admin';
 import MyLeaflet from './Leaflet';
 
 export default () => (
     <Card>
         <ViewTitle title="IP map" />
-        <CardText>From active Extracts</CardText>
+        <CardContent>From active Extracts</CardContent>
         <div id="mapContainer">
             <MyLeaflet zoom={4} />
         </div>

diff --git a/reactviews/src/agent.js b/reactviews/src/agent.js
@@ -3,9 +3,9 @@ import { List, Datagrid, TextField, Edit, Create, SimpleForm,
     TextInput, DisabledInput, required, EditButton, DateField, 
     RichTextField, SelectInput, LongTextInput, Filter, Responsive,
     SimpleList
-} from 'admin-on-rest';
-import RichTextInput from 'aor-rich-text-input';
-
+} from 'react-admin';
+import RichTextInput from 'ra-input-rich-text';
+import { withStyles } from '@material-ui/core/styles';
 import { roles } from './MyConfig';
 
 
@@ -38,8 +38,12 @@ const AgentFilter = (props) => (
     </Filter>
 );
 
+const styles = {
+    field: {
+        width: '200px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}
+};
 
-export const AgentList = (props) => (
+export const AgentList = withStyles(styles)(({ classes, ...props }) => (
     <List filters={<AgentFilter />} {...props}>
         <Responsive
             small={
@@ -55,7 +59,7 @@ export const AgentList = (props) => (
                     <TextField source="filesurvey" />
                     <ColoredTextField source="status" />
                     <TextField source="role" />
-                    <RichTextField source="lines" elStyle={{width: '200px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}} />
+                    <RichTextField source="lines" className={classes.field} />
                     <RichTextField source="comment" stripTags />
                     <TextField source="cmd" />
                     <DateField label="updated" source="updated" showTime />
@@ -64,13 +68,13 @@ export const AgentList = (props) => (
             }
         />
     </List>
-);
+));
 
 
 export const AgentCreate = (props) => (
     <Create {...props}>
         <SimpleForm>
-            <TextInput source="ip" validate={required} />
+            <TextInput source="ip" validate={required()} />
             <TextInput source="filesurvey" />
             <TextInput source="status" />
             <SelectInput source="role" choices={roles} allowEmpty />

diff --git a/reactviews/src/alert.js b/reactviews/src/alert.js
@@ -2,9 +2,9 @@ import React from 'react';
 import { List, Datagrid, TextField, DateField, EditButton,
     Edit, SimpleForm, Filter, TextInput, SelectInput, DeleteButton,
     RichTextField, Responsive, SimpleList
-} from 'admin-on-rest';
-import RichTextInput from 'aor-rich-text-input';
-
+} from 'react-admin';
+import RichTextInput from 'ra-input-rich-text';
+import { withStyles } from '@material-ui/core/styles';
 import { roles } from './MyConfig';
 
 const colored = WrappedComponent => props => props.record.level === 'critic' ?
@@ -23,8 +23,12 @@ const AlertFilter = (props) => (
     </Filter>
 );
 
+const styles = {
+    field: {
+        width: '250px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}
+};
 
-export const AlertList = (props) => (
+export const AlertList = withStyles(styles)(({ classes, ...props }) => (
     <List filters={<AlertFilter />}  sort={{ field: 'updated', order: 'DESC' }} perPage={30} {...props}>
         <Responsive
             small={
@@ -40,15 +44,15 @@ export const AlertList = (props) => (
                     <TextField source="role" />
                     <ColoredTextField source="level" />
                     <TextField source="line" />
-                    <RichTextField source="comment" stripTags elStyle={{width: '250px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}} />
+                    <RichTextField source="comment" className={styles.field} stripTags />
                     <DateField label="updated" source="updated" showTime />
                     <EditButton />
                     <DeleteButton />
                 </Datagrid>
             }
         />
     </List>
-);
+));
 
 export const AlertEdit = (props) => (
     <Edit {...props}>

diff --git a/reactviews/src/authClient.js b/reactviews/src/authClient.js
@@ -1,4 +1,4 @@
-import { AUTH_LOGIN, AUTH_LOGOUT, AUTH_ERROR, AUTH_CHECK } from 'admin-on-rest';
+import { AUTH_LOGIN, AUTH_LOGOUT, AUTH_ERROR, AUTH_CHECK } from 'react-admin';
 import request from 'superagent';
 import { MyConfig } from './MyConfig';
 

diff --git a/reactviews/src/authLoginPage.js b/reactviews/src/authLoginPage.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { userLogin } from 'admin-on-rest';
+import { userLogin } from 'react-admin';
 import { MyConfig } from './MyConfig';
 
 class authLoginPage extends Component {

diff --git a/reactviews/src/boarddocs.js b/reactviews/src/boarddocs.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Edit, SimpleForm  } from 'admin-on-rest';
-import RichTextInput from 'aor-rich-text-input';
+import { Edit, SimpleForm  } from 'react-admin';
+import RichTextInput from 'ra-input-rich-text';
 
 export const BoardEdit = (props) => (
     <Edit title="Docs" {...props}>

diff --git a/reactviews/src/extract.js b/reactviews/src/extract.js
@@ -1,12 +1,12 @@
 import React from 'react';
+import CardActions from '@material-ui/core/CardActions';
 import { List, Datagrid, TextField, Edit, Create, SimpleForm,
     TextInput, required, EditButton, DateField, CreateButton,
     RichTextField, SelectInput, Filter, Responsive, SimpleList,
     BooleanInput, BooleanField, DateInput, RefreshButton
-} from 'admin-on-rest';
-import RichTextInput from 'aor-rich-text-input';
-
-import { CardActions } from 'material-ui/Card';
+} from 'react-admin';
+import RichTextInput from 'ra-input-rich-text';
+import { withStyles } from '@material-ui/core/styles';
 
 
 import ActionExtractButton from './ActionExtract';
@@ -49,8 +49,12 @@ const ExtractFilter = (props) => (
     </Filter>
 );
 
+const styles = {
+    field: {
+        width: '250px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}
+};
 
-export const ExtractList = (props) => (
+export const ExtractList = withStyles(styles)(({ classes, ...props }) => (
     <List filters={<ExtractFilter />} perPage={30} actions={<ExtractActions />} {...props}>
         <Responsive
             small={
@@ -66,20 +70,20 @@ export const ExtractList = (props) => (
                     <TextField source="role" />
                     <ColoredTextField source="action" />
                     <BooleanField source="active" />
-                    <RichTextField source="comment" stripTags elStyle={{width: '200px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}} />
+                    <RichTextField source="comment" className={styles.field} stripTags />
                     <DateField label="updated" source="updated" showTime />
                     <EditButton />
                 </Datagrid>
             }
         />
     </List>
-);
+));
 
 
 export const ExtractCreate = (props) => (
     <Create {...props}>
         <SimpleForm>
-            <TextInput source="search" validate={required} />
+            <TextInput source="search" validate={required()} />
             <SelectInput source="role" choices={roles} allowEmpty />
             <DateInput label="From" source="fromdate"
                 options={{
@@ -108,7 +112,7 @@ export const ExtractCreate = (props) => (
 export const ExtractEdit = (props) => (
     <Edit  {...props}>
         <SimpleForm>
-            <TextInput source="search" validate={required} />
+            <TextInput source="search" validate={required()} />
             <SelectInput source="role" choices={roles} allowEmpty />
             <DateInput label="From" source="fromdate"
                 options={{