Fix: Add stable sorting for service logs

jsalonen · Jun 20, 2017 · c395372 · c395372
1 parent a4a7757
commit c395372
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 40 deletions.
diff --git a/client/src/components/Dashboard.js b/client/src/components/Dashboard.js
@@ -2,28 +2,9 @@ import React, { Component } from "react";
 import Services from "./Services";
 import Tasks from "./Tasks";
 import ServiceLogs from "./ServiceLogs";
-/*
-import { Link } from 'react-router';
-
-const styles = {
-  button: {
-    margin: 0.6 + 'rem'
-  }
-};
-*/
 
 class Dashboard extends Component {
   render() {
-    /*
-        <FlatButton
-          label="Create Service"
-          containerElement={<Link to="/services/create" />}
-          primary={true}
-          style={styles.button}
-          icon={<i className="material-icons">add</i>}
-        />
-    */
-
     return (
       <div>
         <Services />

diff --git a/client/src/components/LogWindow.js b/client/src/components/LogWindow.js
@@ -23,7 +23,6 @@ class LogWindow extends Component {
 
   render() {
     const { logs } = this.props;
-    console.log(logs);
 
     if (!logs) {
       return <div />;
@@ -32,14 +31,14 @@ class LogWindow extends Component {
         <pre style={styles} ref={pre => (this.preElem = pre)}>
           {logs.map(([type, line], index) => {
             return (
-              <span
+              <div
                 key={index}
                 style={{
                   color: type === "stderr" ? COLOR_STDERR : COLOR_STDOUT
                 }}
               >
                 {line}
-              </span>
+              </div>
             );
           })}
         </pre>

diff --git a/client/src/components/Services/index.js b/client/src/components/Services/index.js
@@ -1,8 +1,6 @@
 import React, { Component } from "react";
 import { inject, observer } from "mobx-react";
 import Subheader from "material-ui/Subheader";
-import Chip from "material-ui/Chip";
-import { orange100 } from "material-ui/styles/colors";
 import {
   Table,
   TableBody,
@@ -11,8 +9,6 @@ import {
   TableRow,
   TableRowColumn
 } from "material-ui/Table";
-import IdField from "../IdField";
-//import ServiceUpdateStatus from "../ServiceUpdateStatus";
 import ServiceReplicaStatus from "../ServiceReplicaStatus";
 
 const Services = inject("nodeStore")(
@@ -54,7 +50,7 @@ const Services = inject("nodeStore")(
                   </TableRow>
                 </TableHeader>
                 <TableBody displayRowCheckbox={false}>
-                  {nodeStore.services.map((service, index) => (
+                  {nodeStore.services.map((service, index) =>
                     <TableRow
                       key={
                         index
@@ -77,15 +73,15 @@ const Services = inject("nodeStore")(
                           })}
                       </TableRowColumn>
                       <TableRowColumn>
-                        {(service.Endpoint.Ports || []).map((port, index) => (
+                        {(service.Endpoint.Ports || []).map((port, index) =>
                           <div key={index} style={{ padding: "1px 0" }}>
                             {port.Protocol}
                             {" "}
                             {port.PublishedPort}
                             :
                             {port.TargetPort}
                           </div>
-                        ))}
+                        )}
                       </TableRowColumn>
                       <TableRowColumn>
                         {service.Spec.TaskTemplate.ContainerSpec.Image}
@@ -99,7 +95,7 @@ const Services = inject("nodeStore")(
                           running={service.ReplicasRunning}
                           desired={
                             service.Spec.Mode.Replicated &&
-                              service.Spec.Mode.Replicated.Replicas
+                            service.Spec.Mode.Replicated.Replicas
                           }
                         />
                       </TableRowColumn>
@@ -112,15 +108,10 @@ const Services = inject("nodeStore")(
                               {key} = {value}
                             </div>
                           );
-                          /*
-                            <Chip backgroundColor={orange100} key={key}>
-                              {value}
-                            </Chip>
-                            */
                         })}
                       </TableRowColumn>
                     </TableRow>
-                  ))}
+                  )}
                 </TableBody>
               </Table>
             </div>

diff --git a/server/index.js b/server/index.js
@@ -73,9 +73,9 @@ app.get("/api/services/:id/logs", (req, res) => {
     const opts = {
       stdout: 1,
       stderr: 1,
-      follow: 0
-      //tail: 25
-      //timestamps: 1
+      follow: 0,
+      timestamps: 1,
+      tail: 100
       //since: [UNIX timestamp]
     };
 
@@ -97,6 +97,16 @@ app.get("/api/services/:id/logs", (req, res) => {
       return items;
     }
 
+    function orderByTimestamp(items) {
+      const itemsWithTimestamp = items.map(([type, payload]) => {
+        const [timestamp, logline] = payload.split(/ (.+)?/, 2);
+        return [type, logline, timestamp];
+      });
+      return itemsWithTimestamp.sort((a, b) => {
+        return a[2].localeCompare(b[2]);
+      });
+    }
+
     service.logs(opts, (err, stream) => {
       if (err) {
         return res.status(500).send(err);
@@ -107,7 +117,7 @@ app.get("/api/services/:id/logs", (req, res) => {
         });
         stream.on("end", function() {
           var buffer = Buffer.concat(chunks);
-          return res.status(200).send(demux(buffer));
+          return res.status(200).send(orderByTimestamp(demux(buffer)));
         });
       }
     });