Merge pull request #211 from gouzouni625/lambda-instance-status

Additional Information in Lambda Instance Details Web Page

webapp/frontend/app/helpers/lambda-instance-state-flow.js

+import Ember from "ember";
+
+export default Ember.Helper.helper(function(parameters) {
+  var status_message = parameters[0];
+  switch (status_message) {
+    case "PENDING":
+      return "1/7";
+    case "CLUSTER_CREATED":
+      return "2/7";
+    case "INIT_DONE":
+      return "3/7";
+    case "COMMONS_INSTALLED":
+      return "4/7";
+    case "HADOOP_INSTALLED":
+      return "5/7";
+    case "KAFKA_INSTALLED":
+      return "6/7";
+    case "FLINK_INSTALLED":
+      return "7/7";
+  }
+  return "";
+});

webapp/frontend/app/helpers/lambda-instance-state.js

+import Ember from "ember";
+
+export default Ember.Helper.helper(function(parameters) {
+  var status_message = parameters[0];
+  switch (status_message) {
+    case "STARTED":
+      return "STARTED";
+    case "DESTROYED":
+      return "DESTROYED";
+    case "FAILED":
+    case "CLUSTER_FAILED":
+    case "INIT_FAILED":
+    case "COMMONS_FAILED":
+    case "HADOOP_FAILED":
+    case "KAFKA_FAILED":
+    case "FLINK_FAILED":
+      return "FAILED";
+    case "STOPPED":
+      return "STOPPED";
+    case "PENDING":
+    case "CLUSTER_CREATED":
+    case "INIT_DONE":
+    case "COMMONS_INSTALLED":
+    case "HADOOP_INSTALLED":
+    case "KAFKA_INSTALLED":
+    case "FLINK_INSTALLED":
+      return "BUILDING";
+    case "STOPPING":
+    case "STARTING":
+    case "DESTROYING":
+      return status_message;
+  }
+});

webapp/frontend/app/templates/lambda-instance.hbs

@@ -99,7 +99,7 @@
           </div><!-- /.row -->
 
           <div class="row">
-            <div class="col-ms-6 col-xs-5">
+            <div class="col-ms-9 col-xs-9">
               <table  class="table table-bordered table-hover table-responsive">
                 <thead>
                   <tr>
@@ -179,6 +179,114 @@
                 </tbody>
               </table>
             </div><!--col-xs-12-->
+            <!-- About Instance -->
+    <div class="col-md-3 pull-right">
+      <div class="box box-primary">
+        <div class="box-header with-border">
+          <h3 class="box-title"><i class="fa  fa-bullhorn"></i> About The Instance</h3>
+          <span style='margin-left:10px;'>
+            {{#if (compare (lambda-instance-state model.instance.status_message) "===" "BUILDING")}}
+            <i class="fa fa-circle text-warning "></i>
+            {{/if}}
+            {{#if (compare (lambda-instance-state model.instance.status_message) "===" "STARTING")}}
+            <i class="fa fa-circle text-warning "></i>
+            {{/if}}
+            {{#if (compare (lambda-instance-state model.instance.status_message) "===" "STOPPING")}}
+            <i class="fa fa-circle text-warning "></i>
+            {{/if}}
+            {{#if (compare (lambda-instance-state model.instance.status_message) "===" "DESTROYING")}}
+            <i class="fa fa-circle text-warning "></i>
+            {{/if}}
+            {{#if (compare (lambda-instance-state model.instance.status_message) "===" "STOPPED")}}
+            <i class="fa fa-circle text-danger "></i>
+            {{/if}}
+            {{#if (compare (lambda-instance-state model.instance.status_message) "===" "FAILED")}}
+            <i class="fa fa-circle text-danger "></i>
+            {{/if}}
+            {{#if (compare (lambda-instance-state model.instance.status_message) "===" "DESTROYED")}}
+            <i class="fa fa-circle text-danger "></i>
+            {{/if}}
+            {{#if (compare (lambda-instance-state model.instance.status_message) "===" "STARTED")}}
+            <i class="fa fa-circle text-success "></i>
+            {{/if}}
+            {{lambda-instance-state model.instance.status_message}}
+          </span>
+        </div>
+        <!-- /.box-header -->
+        <div class="box-body">
+          <strong><i class="fa fa-pencil margin-r-5"></i> Status</strong>
+          <p>
+            <ul class="timeline">
+              <!-- timeline time label -->
+              <li class="time-label">
+                {{#if (compare (lambda-instance-state model.instance.status_message) "===" "BUILDING")}}
+                <span class="bg-orange">Status: {{lambda-instance-state model.instance.status_message}}</span>
+                <div class="spinner-loader" style="position: absolute;top:0;bottom: 0;left: 15%;right: 0;margin: auto;"></div>
+                {{/if}}
+                {{#if (compare (lambda-instance-state model.instance.status_message) "===" "STARTING")}}
+                <span class="bg-orange">Status: {{lambda-instance-state model.instance.status_message}}</span>
+                <div class="spinner-loader" style="position: absolute;top:0;bottom: 0;left: 15%;right: 0;margin: auto;"></div>
+                {{/if}}
+                {{#if (compare (lambda-instance-state model.instance.status_message) "===" "STOPPING")}}
+                <span class="bg-orange">Status: {{lambda-instance-state model.instance.status_message}}</span>
+                <div class="spinner-loader" style="position: absolute;top:0;bottom: 0;left: 15%;right: 0;margin: auto;"></div>
+                {{/if}}
+                {{#if (compare (lambda-instance-state model.instance.status_message) "===" "DESTROYING")}}
+                <span class="bg-orange">Status: {{lambda-instance-state model.instance.status_message}}</span>
+                <div class="spinner-loader" style="position: absolute;top:0;bottom: 0;left: 15%;right: 0;margin: auto;"></div>
+                {{/if}}
+                {{#if (compare (lambda-instance-state model.instance.status_message) "===" "STOPPED")}}
+                <span class="bg-red">Status: {{lambda-instance-state model.instance.status_message}}</span>
+                {{/if}}
+                {{#if (compare (lambda-instance-state model.instance.status_message) "===" "FAILED")}}
+                <span class="bg-red">Status: {{lambda-instance-state model.instance.status_message}}</span>
+                {{/if}}
+                {{#if (compare (lambda-instance-state model.instance.status_message) "===" "DESTROYED")}}
+                <span class="bg-red">Status: {{lambda-instance-state model.instance.status_message}}</span>
+                {{/if}}
+                {{#if (compare (lambda-instance-state model.instance.status_message) "===" "STARTED")}}
+                <span class="bg-green">Status: {{lambda-instance-state model.instance.status_message}}</span>
+                {{/if}}
+              </li>
+              <li>
+                <i class="fa fa-clock-o bg-gray"></i>
+                <div class="timeline-item">
+                  <span class="time"><i class="fa fa-clock-o"></i> Now </span>
+                  <h3 class="timeline-header"><strong>{{model.instance.status_message}}</strong> </h3>
+                  <div class="timeline-body">{{lambda-instance-state-flow model.instance.status_message}} {{model.instance.status_detail}}</div> <!-- class="timeline-body"-->
+                </div> <!-- class="timeline-item" -->
+              </li>
+            </ul>
+          </p>
+          <strong><i class="fa fa-file-text-o margin-r-5"></i> Notes</strong>
+            {{#if (compare (lambda-instance-state model.instance.status_message) "===" "BUILDING")}}
+            <p>Your lambda instance is being built. This might take a while...</p>
+            {{/if}}
+            {{#if (compare (lambda-instance-state model.instance.status_message) "===" "STARTING")}}
+            <p>Your lambda instance is being started! Please wait...</p>
+            {{/if}}
+            {{#if (compare (lambda-instance-state model.instance.status_message) "===" "STOPPING")}}
+            <p>Your lambda instance is being stopped! Please wait...</p>
+            {{/if}}
+            {{#if (compare (lambda-instance-state model.instance.status_message) "===" "DESTROYING")}}
+            <p>Your lambda instance is being destroyed! Please wait...</p>
+            {{/if}}
+            {{#if (compare (lambda-instance-state model.instance.status_message) "===" "STOPPED")}}
+            <p>Your lambda instance has been stopped. You need to start it in order to run an application.</p>
+            {{/if}}
+            {{#if (compare (lambda-instance-state model.instance.status_message) "===" "FAILED")}}
+            <p>Your lambda instance has failed. You can delete it an try creating a new one.</p>
+            {{/if}}
+            {{#if (compare (lambda-instance-state model.instance.status_message) "===" "DESTROYED")}}
+            <p>Your lambda instance has been destroyed. There is nothing else you can do with it!</p>
+            {{/if}}
+            {{#if (compare (lambda-instance-state model.instance.status_message) "===" "STARTED")}}
+            <p>Your lambda instance is up and running. You can deploy an application on it.</p>
+            {{/if}}
+        </div> <!-- /.box-body -->
+      </div><!-- /.box -->
+    </div> <!--col-md-3 pull-right -->
+    <!-- About Instance -->
           </div><!--row-->
         </div><!--box-->
       </div> <!-- box-primary -->