From 1cf45a2cae9c1855e9f205b5f48c29d9090178c8 Mon Sep 17 00:00:00 2001
From: Markus Grigull <web@grigull.me>
Date: Thu, 7 Jun 2018 19:52:51 +0200
Subject: [PATCH 1/4] Sort simulators by last state update

---
 src/containers/simulators.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/containers/simulators.js b/src/containers/simulators.js
index 4c92992..3105755 100644
--- a/src/containers/simulators.js
+++ b/src/containers/simulators.js
@@ -44,10 +44,13 @@ class Simulators extends Component {
   }
 
   static calculateState() {
+    const simulators = SimulatorStore.getState().sort((a, b) => {
+      return a.stateUpdatedAt < b.stateUpdatedAt;
+    });
+
     return {
       sessionToken: UserStore.getState().token,
-      simulators: SimulatorStore.getState(),
-
+      simulators,
       modalSimulator: {},
       deleteModal: false,
 

From 609fd6249e5446585cc8eeb369faf18effa6522f Mon Sep 17 00:00:00 2001
From: Markus Grigull <web@grigull.me>
Date: Thu, 7 Jun 2018 20:33:58 +0200
Subject: [PATCH 2/4] Add simulator state label

---
 src/containers/simulators.js | 38 +++++++++++++++++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/containers/simulators.js b/src/containers/simulators.js
index 3105755..48c9b2b 100644
--- a/src/containers/simulators.js
+++ b/src/containers/simulators.js
@@ -165,6 +165,42 @@ class Simulators extends Component {
     }
   }
 
+  labelSimulatorState = state => {
+    if (state === 'unknown' || state === 'shutdown') {
+      return <span>
+        <Label>offline</Label>
+
+        {state}
+      </span>;
+    }
+
+    return <span>
+      <Label>online</Label>
+      
+      {state}
+    </span>;
+  }
+
+  isSimulatorOnline(state) {
+    return state !== 'shutdown' && state !== 'unknown';
+  }
+
+  stateLabelStyle = state => {
+    if (this.isSimulatorOnline(state)) {
+      return 'success';
+    }
+
+    return 'danger';
+  }
+
+  stateLabelModifier = state => {
+    if (this.isSimulatorOnline(state)) {
+      return 'online';
+    }
+
+    return 'offline';
+  }
+
   render() {
     const buttonStyle = {
       marginLeft: '10px'
@@ -177,7 +213,7 @@ class Simulators extends Component {
         <Table data={this.state.simulators}>
           <TableColumn checkbox onChecked={(index, event) => this.onSimulatorChecked(index, event)} width='30' />
           <TableColumn title='Name' dataKeys={['properties.name', 'rawProperties.name']} />
-          <TableColumn title='State' dataKey='state' />
+          <TableColumn title='State' dataKey='state' labelKey='state' labelModifier={this.stateLabelModifier} labelStyle={this.stateLabelStyle} />
           <TableColumn title='Model' dataKey='model' />
           <TableColumn title='Endpoint' dataKeys={['properties.endpoint', 'rawProperties.endpoint']} />
           <TableColumn title='Host' dataKey='host' />

From d3364ed010544928b553b253b0a9b70f8eb4c667 Mon Sep 17 00:00:00 2001
From: Markus Grigull <web@grigull.me>
Date: Thu, 7 Jun 2018 21:10:30 +0200
Subject: [PATCH 3/4] Add labels to simulator state

---
 src/components/table.js      |  4 ++--
 src/containers/simulators.js | 28 +++++++++++++---------------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/components/table.js b/src/components/table.js
index 9d593fe..1c1910d 100644
--- a/src/components/table.js
+++ b/src/components/table.js
@@ -85,10 +85,10 @@ class CustomTable extends Component {
       var labelContent = data[labelKey];
 
       if (child.props.labelModifier) {
-        labelContent = child.props.labelModifier(labelContent);
+        labelContent = child.props.labelModifier(labelContent, data);
       }
 
-      cell.push(<span>&nbsp;<Label bsStyle={child.props.labelStyle(data[labelKey])}>{labelContent.toString()}</Label></span>);
+      cell.push(<span>&nbsp;<Label bsStyle={child.props.labelStyle(data[labelKey], data)}>{labelContent.toString()}</Label></span>);
     }
 
     if (child.props.dataIndex) {
diff --git a/src/containers/simulators.js b/src/containers/simulators.js
index 48c9b2b..c8e5140 100644
--- a/src/containers/simulators.js
+++ b/src/containers/simulators.js
@@ -165,27 +165,21 @@ class Simulators extends Component {
     }
   }
 
-  labelSimulatorState = state => {
-    if (state === 'unknown' || state === 'shutdown') {
-      return <span>
-        <Label>offline</Label>
+  isSimulatorOutdated(simulator) {
+    const fiveMinutes = 5 * 60 * 1000;
 
-        {state}
-      </span>;
-    }
-
-    return <span>
-      <Label>online</Label>
-      
-      {state}
-    </span>;
+    return Date.now() - new Date(simulator.stateUpdatedAt) > fiveMinutes;
   }
 
   isSimulatorOnline(state) {
     return state !== 'shutdown' && state !== 'unknown';
   }
 
-  stateLabelStyle = state => {
+  stateLabelStyle = (state, simulator) => {
+    if (this.isSimulatorOutdated(simulator)) {
+      return 'default';
+    }
+
     if (this.isSimulatorOnline(state)) {
       return 'success';
     }
@@ -193,7 +187,11 @@ class Simulators extends Component {
     return 'danger';
   }
 
-  stateLabelModifier = state => {
+  stateLabelModifier = (state, simulator) => {
+    if (this.isSimulatorOutdated(simulator)) {
+      return 'unknown';
+    }
+
     if (this.isSimulatorOnline(state)) {
       return 'online';
     }

From 3e1edcd2a35d96b76e58038c57c55a591d98fa52 Mon Sep 17 00:00:00 2001
From: Markus Grigull <web@grigull.me>
Date: Thu, 7 Jun 2018 21:17:13 +0200
Subject: [PATCH 4/4] Add state updated column to simulator table

---
 src/containers/simulators.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/containers/simulators.js b/src/containers/simulators.js
index c8e5140..76cc3e4 100644
--- a/src/containers/simulators.js
+++ b/src/containers/simulators.js
@@ -199,6 +199,12 @@ class Simulators extends Component {
     return 'offline';
   }
 
+  stateUpdateModifier = updatedAt => {
+    const date = new Date(updatedAt);
+
+    return date.toLocaleString('de-DE');
+  }
+
   render() {
     const buttonStyle = {
       marginLeft: '10px'
@@ -212,7 +218,7 @@ class Simulators extends Component {
           <TableColumn checkbox onChecked={(index, event) => this.onSimulatorChecked(index, event)} width='30' />
           <TableColumn title='Name' dataKeys={['properties.name', 'rawProperties.name']} />
           <TableColumn title='State' dataKey='state' labelKey='state' labelModifier={this.stateLabelModifier} labelStyle={this.stateLabelStyle} />
-          <TableColumn title='Model' dataKey='model' />
+          <TableColumn title='State Update' dataKey='stateUpdatedAt' modifier={this.stateUpdateModifier} />
           <TableColumn title='Endpoint' dataKeys={['properties.endpoint', 'rawProperties.endpoint']} />
           <TableColumn title='Host' dataKey='host' />
           <TableColumn title='UUID' dataKey='uuid' />