Commit 21b150b8 authored by Joel Collins's avatar Joel Collins
Browse files

Added logger tab

parent 46120ea6

openflexure_microscope/api/static/src/assets/less/theme.less

+51 −1
Original line number Diff line number Diff line
@@ -266,6 +266,43 @@ 
    border: 1px solid @notification-message-success-color

}





/*

 * Alert

 */

.uk-alert {

    position: relative;

    margin-bottom: 20px;

    padding: 15px 29px 15px 15px;

    border-radius: @paper-border-radius;

    border: 1px solid @global-border

}



.uk-alert-danger {

    border: 1px solid @notification-message-danger-color

}



.uk-alert-warning {

    border: 1px solid @notification-message-warning-color

}



.hook-inverse() {

    .uk-alert {

        background-color: rgba(180, 180, 180, 0.15);

        color: @inverse-global-color;

        border-color: @inverse-global-color;

    }

    .uk-alert-danger {

        color: @notification-message-danger-color;

        border-color: @notification-message-danger-color

    }

    

    .uk-alert-warning {

        color: @notification-message-warning-color;

        border-color: @notification-message-warning-color

    }

}



/*

 * Links

 */
@@ -372,3 +409,16 @@ a:hover { 
    }



}



/*

 * Pagination

 */



.uk-pagination > * > :hover, .uk-pagination > * > :focus {

    color: @global-primary-background;

    text-decoration: none;

}



.uk-pagination > .uk-active > * {

    color: @global-primary-background;

}

openflexure_microscope/api/static/src/components/tabContentComponents/loggingContent.vue

0 → 100644
+144 −0
Original line number Diff line number Diff line 
<template>

  <div

    v-observe-visibility="visibilityChanged"

    class="uk-padding uk-padding-remove-top"

  >

    <!-- Logging nav bar -->

    <nav

      class="logging-navbar uk-navbar-container uk-navbar-transparent"

      uk-navbar="mode: click"

    >

      <!-- Left side controls -->

      <div

        class="uk-navbar-left uk-padding-remove-top uk-padding-remove-bottom"

      ></div>



      <!-- Right side buttons -->

      <div class="uk-navbar-right">

        <div class="uk-grid">

          <div>

            <button

              class="uk-button uk-button-default uk-width-1-1"

              type="button"

              @click="updateLogs()"

            >

              Refresh Logs

            </button>

          </div>

          <div>

            <a class="uk-button uk-button-default" :href="logFileURI"

              >Download Log File</a

            >

          </div>

        </div>

      </div>

    </nav>



    <!-- Logging items -->

    <div class="uk-width-xlarge uk-align-center">

      <div

        v-for="item in pagedItems"

        :key="item.timestamp"

        uk-alert

        :class="{

          'uk-alert-warning uk-alert': item.data.levelname == 'WARNING',

          'uk-alert-danger uk-alert': item.data.levelname == 'ERROR'

        }"

      >

        <p>

          <b>{{ formatDateTime(item.data.created) }}</b>

        </p>

        {{ item.data.levelname }}: {{ item.data.message }}

      </div>



      <Paginate

        v-model="page"

        :page-count="numberOfPages"

        :page-range="3"

        :margin-pages="1"

        :container-class="'uk-pagination uk-flex-center'"

        :prev-text="'Prev'"

        :next-text="'Next'"

        :page-class="'page-item'"

        :active-class="'uk-active'"

        :disabled-class="'uk-disabled'"

      >

      </Paginate>

    </div>

  </div>

</template>



<script>

import axios from "axios";

import Paginate from "vuejs-paginate";



export default {

  name: "LoggingContent",



  components: {

    Paginate

  },



  data: function() {

    return {

      maxitems: 20,

      page: 1,

      logs: []

    };

  },



  computed: {

    loggingUri: function() {

      return `${this.$store.getters.baseUri}/api/v2/events/logging`;

    },

    logFileURI: function() {

      return `${this.$store.getters.baseUri}/api/v2/log`;

    },

    pagedItems: function() {

      let startIndex = (this.page - 1) * this.maxitems;

      return this.logs.slice(startIndex, startIndex + this.maxitems);

    },

    numberOfPages: function() {

      return Math.floor(this.logs.length / this.maxitems);

    }

  },



  mounted() {

    // Update on mount (does nothing if not connected)

    this.updateLogs();

  },



  methods: {

    visibilityChanged(isVisible) {

      if (isVisible) {

        this.updateLogs();

      }

    },

    updateLogs: function() {

      console.log("Updating logs...");

      axios

        .get(this.loggingUri)

        .then(response => {

          this.logs = response.data.reverse();

        })

        .catch(error => {

          this.modalError(error); // Let mixin handle error

        });

    },

    formatDateTime: function(isoDateTimeString) {

      let date = new Date(isoDateTimeString);

      return date.toLocaleDateString() + " " + date.toLocaleTimeString();

    }

  }

};

</script>



<style lang="less" scoped>

.logging-navbar {

  border-width: 0 0 1px 0;

  border-style: solid;

  border-color: rgba(180, 180, 180, 0.25);

  margin-bottom: 30px;

  height: 80px;

}

</style>