From 1fbd77740b73f48dfcad1122a934e67b20ad5e44 Mon Sep 17 00:00:00 2001
From: Laurence Maultsby <laurence.maultsby@riftio.com>
Date: Wed, 17 May 2017 11:26:53 -0400
Subject: [PATCH] User friendly error for VIM accounts

Change-Id: Ibbe9982a5ad746f05209325b418ac3dcd097811b
Signed-off-by: Laurence Maultsby <laurence.maultsby@riftio.com>
---
 skyquake/framework/utils/utils.js             | 11 +++++++
 .../skyquake_container/skyquakeApp.scss       | 30 ++++++++++++++-----
 skyquake/framework/widgets/uptime/uptime.jsx  |  4 +--
 .../plugins/accounts/src/account/account.jsx  |  3 +-
 4 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/skyquake/framework/utils/utils.js b/skyquake/framework/utils/utils.js
index fc6b59271..7b93fd580 100644
--- a/skyquake/framework/utils/utils.js
+++ b/skyquake/framework/utils/utils.js
@@ -311,4 +311,15 @@ Utils.cleanImageDataURI = (imageString, type, id) => {
     return require('style/img/catalog-default.svg');
 }
 
+Utils.parseError = (error) => {
+    let displayMsg = JSON.parse(error);
+    if (displayMsg.errorMessage && displayMsg.errorMessage.body) {
+        displayMsg = displayMsg.errorMessage.body;
+        if(displayMsg['last-error'] && displayMsg['last-error']['rpc-error'] && displayMsg['last-error']['rpc-error']['error-message']) {
+            displayMsg = displayMsg['last-error']['rpc-error']['error-message'];
+        }
+    }
+    return displayMsg
+}
+
 module.exports = Utils;
diff --git a/skyquake/framework/widgets/skyquake_container/skyquakeApp.scss b/skyquake/framework/widgets/skyquake_container/skyquakeApp.scss
index a01f1547f..286956094 100644
--- a/skyquake/framework/widgets/skyquake_container/skyquakeApp.scss
+++ b/skyquake/framework/widgets/skyquake_container/skyquakeApp.scss
@@ -1,14 +1,21 @@
-//import a reset
+/*import a reset*/
 @import '../../style/_colors.scss';
 html, body {
     height:100%;
     width:100%;
 }
 
+.crouton {
+    span {
+        white-space: pre;
+    }
+}
 
 .skyquakeApp {
+    display: -ms-flexbox;
     display: flex;
-    flex-direction: column;
+    -ms-flex-direction: column;
+        flex-direction: column;
     height: 100%;
     background: $gray-lightest;
     h1 {
@@ -20,6 +27,7 @@ html, body {
         color: #fff!important
     }
     .skyquakeNav {
+        display: -ms-flexbox;
         display: flex;
         color:white;
         background:black;
@@ -27,17 +35,22 @@ html, body {
         z-index: 10;
         font-size:0.75rem;
         .secondaryNav {
-            flex: 1 1 auto;
+            -ms-flex: 1 1 auto;
+                flex: 1 1 auto;
+            display: -ms-flexbox;
             display: flex;
-            justify-content: flex-end;
+            -ms-flex-pack: end;
+                justify-content: flex-end;
         }
         .app {
             position:relative;
             h2 {
                 font-size:0.75rem;
                 border-right: 1px solid black;
+                display: -ms-flexbox;
                 display: flex;
-                align-items: center;
+                -ms-flex-align: center;
+                    align-items: center;
                 .oi {
                     padding-right: 0.5rem;
                 }
@@ -102,18 +115,19 @@ html, body {
     .titleBar {
         padding: 1rem 0 0;
         h1 {
-        // background: url('../../style/img/header-logo.png') no-repeat;
+        /* background: url('../../style/img/header-logo.png') no-repeat;*/
         background-size:contain;
         height: 51px;
         line-height: 51px;
         margin-left: 20px;
-        // padding-left: 100px;
+        /* padding-left: 100px;*/
         left: 0;
         font-size: 1.625rem;
         font-weight: 400;
         text-align:left;
         position:relative;
-        flex: 1 0 auto;
+        -ms-flex: 1 0 auto;
+            flex: 1 0 auto;
         }
     }
     .corner-accent {
diff --git a/skyquake/framework/widgets/uptime/uptime.jsx b/skyquake/framework/widgets/uptime/uptime.jsx
index 39b5faf7a..ee4ad0e16 100644
--- a/skyquake/framework/widgets/uptime/uptime.jsx
+++ b/skyquake/framework/widgets/uptime/uptime.jsx
@@ -1,5 +1,5 @@
 /*
- * 
+ *
  *   Copyright 2016 RIFT.IO Inc
  *
  *   Licensed under the Apache License, Version 2.0 (the "License");
@@ -79,7 +79,7 @@ export default class UpTime extends React.Component {
       }
       let timeNow = args.timeNow ? args.timeNow : Date.now();
       if (initialTime) {
-        return Math.floor((timeNow/ 1000)) - initialTime;
+        return Math.floor((timeNow / 1000)) - initialTime;
       } else {
         return 0;
       }
diff --git a/skyquake/plugins/accounts/src/account/account.jsx b/skyquake/plugins/accounts/src/account/account.jsx
index 4f011cb1a..41a3046ab 100644
--- a/skyquake/plugins/accounts/src/account/account.jsx
+++ b/skyquake/plugins/accounts/src/account/account.jsx
@@ -23,6 +23,7 @@ import SkyquakeComponent from 'widgets/skyquake_container/skyquakeComponent.jsx'
 import Crouton from 'react-crouton';
 import TextInput from 'widgets/form_controls/textInput.jsx';
 import {AccountConnectivityStatus} from '../account_sidebar/accountSidebar.jsx';
+import Utils from 'utils/utils.js';
 import 'style/common.scss';
 import './account.scss';
 class Account extends React.Component {
@@ -107,7 +108,7 @@ class Account extends React.Component {
             self.props.flux.actions.global.hideScreenLoader.defer();
         },
          function(error) {
-            self.props.flux.actions.global.showNotification(error);
+            self.props.flux.actions.global.showNotification(Utils.parseError(error));
             self.props.flux.actions.global.hideScreenLoader.defer();
          });
     }
-- 
2.25.1