Merge pull request #40 from LCOGT/frontend-tweaks

Frontend tweaks

static/css/main.css

@@ -307,10 +307,8 @@ a:hover {
     padding: 0 !important;
 }
 
-.btn-outline-secondary{
-    color: black;
-}
 
-.btn-outline-secondary:hover {
-    color:white;
+ .btn-outline-secondary {
+    border-color: #bababa;
+    color: #000000;
 }

static/js/components/archivetable.vue

@@ -4,24 +4,26 @@
       <b-button
         @click="downloadSelected"
         variant="outline-secondary"
+        size="sm"
       >
         <i class="fa fa-check"></i> Download Selected
       </b-button>
       <b-button
         @click="downloadAll"
         variant="outline-secondary"
+        size="sm"
       >
         <i class="fa fa-download"></i> Download All
       </b-button>
       <b-link
         :href="archiveLink"
         target="_blank"
-        class="btn btn-outline-secondary"
+        class="btn btn-sm btn-outline-secondary"
       >
         <i class="fa fa-arrow-right"></i> View on Archive
       </b-link>
     </div>
-    <table id="archive-table"></table>
+    <table id="archive-table" class="table-sm"></table>
   </div>
 </template>
 <script>
@@ -84,6 +86,8 @@
         idField: 'id',
         pagination: true,
         pageSize: 10,
+        buttonsClass: 'outline-secondary',
+        classes: 'table table-hover',
         sortName: 'filename',
         sortOrder: 'asc',
         maintainSelected: true,

static/js/components/observationhistory.vue

@@ -181,15 +181,7 @@
       buildPlot: function () {
         // Set a unique name for the plot element, since vis.js needs this to separate plots
         this.$el.setAttribute('class', _.uniqueId(this.$el.className));
-        let plot = new vis.Timeline(document.getElementById('plot'), new vis.DataSet([]), this.options);
-        let that = this;
-        plot.on('changed', function () {
-          //HAX
-          $(that.$el).find('.vis-group').mouseover(function () {
-            $(that.$el).find('.vis-item').tooltip({container: 'body', 'placement': 'top'});
-          });
-        });
-        return plot;
+        return new vis.Timeline(document.getElementById('plot'), new vis.DataSet([]), this.options);
       }
     }
   };

static/js/components/telescope_states.vue

@@ -150,15 +150,6 @@
         this.$el.setAttribute('class', _.uniqueId(this.$el.className));
         let plot = new vis.Timeline(this.$el, new vis.DataSet([]), this.options);
         let that = this;
-        plot.on('changed', function () {
-          $(that.$el).find('.vis-label').each(function () {
-            $(this).tooltip({'container': 'body', 'placement': 'top'});
-          });
-          //HAX
-          $(that.$el).find('.vis-group').mouseover(function () {
-            $(that.$el).find('.vis-item').tooltip({container: 'body'});
-          });
-        });
         plot.on('rangechanged', function () {
           that.$emit('rangechanged', that.plot.getWindow());
         });

static/js/request_detail.vue

@@ -404,26 +404,27 @@
             // Add in some top level fields that make plotting easier
             let time_completed = 0.0;
             let total_time = 0.0;
-            for(let configurationIdx in that.observationData[observationIdx].request.configurations){
-              let configuration = that.observationData[observationIdx].request.configurations[configurationIdx];
-              if (!_.isEmpty(configuration.summary)) {
-                time_completed += configuration.summary.time_completed;
-              }
-              for (let inst_configIdx in configuration.instrument_configs) {
-                let inst_config = configuration.instrument_configs[inst_configIdx];
-                total_time += inst_config.exposure_time * inst_config.exposure_count;
+            let fail_reason = '';
+            for (let csIndex in that.observationData[observationIdx].configuration_statuses) {
+              let configurationStatus = that.observationData[observationIdx].configuration_statuses[csIndex];
+              if (!_.isEmpty(configurationStatus.summary)) {
+                time_completed += configurationStatus.summary.time_completed;
+                if (fail_reason === '' && configurationStatus.summary.reason !== 'N/A') {
+                  fail_reason = configurationStatus.summary.reason;
+                }
               }
-            }
-            that.observationData[observationIdx].percent_completed = (time_completed / total_time) * 100.0;
-            that.observationData[observationIdx].fail_reason = '';
-            if (that.observationData[observationIdx].state === 'FAILED'){
-              for (let configurationIdx in that.observationData[observationIdx].request.configurations) {
-                let configuration = that.observationData[observationIdx].request.configurations[configurationIdx];
-                if (configuration.state ==='FAILED' && !_.isEmpty(configuration.summary)) {
-                  that.observationData[observationIdx].fail_reason = configuration.summary.reason;
+              for (let cIndex in that.request.configurations) {
+                if (that.request.configurations[cIndex].id === configurationStatus.configuration) {
+                  for (let icIndex in that.request.configurations[cIndex].instrument_configs) {
+                    let instConfig = that.request.configurations[cIndex].instrument_configs[icIndex];
+                    total_time += instConfig.exposure_time * instConfig.exposure_count;
+                  }
+                  break;
                 }
               }
             }
+            that.observationData[observationIdx].percent_completed = (time_completed / total_time) * 100.0;
+            that.observationData[observationIdx].fail_reason = fail_reason;
           }
         });
       },

static/js/telescope_availability_chart.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="telescopeAvailability">
     {{ error }}
-    <table class="availability_chart table table-bordered table-condensed" v-show="sortedTelescopes.length">
+    <table class="availability_chart table table-bordered table-sm" v-show="sortedTelescopes.length">
       <thead class="thead-default">
       <th>Telescope</th>
       <th v-for="(dateLabel, dataLabelIdx) in dateLabels" :key="dataLabelIdx">{{ dateLabel }}</th>

templates/index.html

@@ -44,6 +44,7 @@ <h3>Need more information?</h3>
                 Check out the  <a href="{% url 'help' %}">help page.</a>
             </div>
         </div>
+        <br>
         <h3>Telescope availability history</h3>
         <p>This chart shows the percent of operational science time for each telescope over the last 4 days. View the <a href="https://lco.global/observatory/status/">detailed operational status.</a></p>
         <div id="telescope_availability_chart"></div>