Added file discovery button

common/static/css/style.css

@@ -7,6 +7,7 @@
   width: 100%;
   z-index: 999;
   backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
   background-color: rgba(22, 22, 23, .8);
 }
 

histogram_file_manager/static/histogram_file_manager/js/components/file_discover.js

@@ -0,0 +1,189 @@
+app_discover.component('file-discover', {
+    // delimiters: ['{', '}'],
+    template:
+        /*html*/
+        `
+<!-- :class="{ hidden: !is_visible }" -->
+<div id="modal-file-discover" class="modal modal-extra" :class="{ shown: is_visible }" tabindex="-1" role="dialog">
+  <div class="modal-dialog" role="document">
+	<div class="modal-content">
+	  <div class="modal-header">
+        <h5 class="modal-title">Discover files</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" v-on:click="clicked_close"></button>
+	  </div>
+	  <div class="modal-body">
+    <success :success="success" @dismissed-success="dismiss_success"></success>
+	<errors :errors="errors" @dismissed-error="dismiss_error"></errors>
+    <div class="d-grid" style="padding: 8px">
+      Click the button below to start discovering files on EOS.
+      <button @click="discover_files()"
+          class="btn btn-primary" style="margin-top: 5pt">
+        Discover files
+      </button>
+    </div>
+      </div>
+      <div class="modal-footer">
+      </div>
+    </div>
+  </div>
+</div>
+		`,
+    data() {
+        return {
+            errors: [],
+            success: [],
+            message_id: 0,
+        };
+    },
+    props: {
+        is_visible: {
+            type: Boolean,
+            required: true,
+        }
+    },
+    methods: {
+        clicked_close() {
+            console.debug('Modal was closed');
+            this.errors = [];
+            this.success = [];
+            this.message_id = 0;
+            this.$emit('clicked-close');
+        },
+        // Callback for discovering files 
+        discover_files() {
+            console.debug('Initialising file discovery');
+            data = {};
+            console.debug('Sending the following data wtih GET request:');
+            console.debug(data);
+            console.debug(get_axios_config());
+            axios.get(
+                `/api/histogram_data_files/discover/`, data, get_axios_config(),
+            )
+            .then((response) => {
+                console.log(response);
+                this.success.push({
+                    id: this.message_id,
+                    message: `File discovery initialised.`
+                });
+                this.message_id += 1;
+            })
+            .catch((error) => {
+                console.error(error);
+                this.errors.push({
+                    id: this.message_id,
+                    message: `${error}: ${error.response.data}`
+                });
+                this.message_id += 1;
+            });
+        },
+        // Callback for error dismissal from errors component
+        dismiss_error(error) {
+            console.debug(`this.errors is ${this.errors}`)
+            console.debug(`Dismissing error alert with ID ${error.id}`);
+            for (var i = 0; i < this.errors.length; i++) {
+                if (this.errors[i].id === error.id) {
+                  this.errors.splice(i, 1);
+                  i -= 1;
+                }
+            }
+            console.debug(`Now this.errors is ${this.errors}`)
+        },
+        dismiss_success(s) {
+          console.debug(`Dismissing success alert with ID ${s.id}`);
+          for (var i = 0; i < this.success.length; i++) {
+              if (this.success[i].id === s.id) {
+                  this.success.splice(i, 1);
+                  i -= 1;
+              }
+          }
+        },
+    },
+});
+
+app_discover.component('errors', {
+    template:
+        /*html*/
+        `
+<div v-show="has_errors">
+  <div 
+	role="alert"
+	class="alert alert-danger alert-dismissable fade show"
+	v-for="error in errors">
+    <div class="row">
+      <div class="col-1">
+        <button
+        type="button"
+        class="btn-close"
+        data-bs-dismiss="alert"
+        aria-label="Close">
+        </button>
+      </div>
+      <div class="col-11">
+        {{ error.message }}
+      </div>
+    </div>
+
+  </div>
+</div>
+		`,
+    props: {
+        errors: {
+            type: Array,
+            required: true,
+        },
+    },
+    computed: {
+        has_errors() {
+            return this.errors.length > 0;
+        },
+    },
+    methods: {
+        dismiss_error(error) {
+            this.$emit('dismissed-error', error);
+        },
+    },
+});
+
+app_discover.component('success', {
+    template:
+        /*html*/
+        `
+<div v-show="has_success">
+  <div 
+	role="alert"
+	class="alert alert-success alert-dismissable fade show"
+	v-for="s in success">
+    <div class="row">
+      <div class="col-1">
+        <button
+        type="button"
+        class="btn-close"
+        data-bs-dismiss="alert"
+        aria-label="Close">
+        </button>
+      </div>
+      <div class="col-11">
+        {{ s.message }}
+      </div>
+    </div>
+
+  </div>
+</div>
+		`,
+    props: {
+        success: {
+            type: Array,
+            required: true,
+        },
+    },
+    computed: {
+        has_success() {
+            return this.success.length > 0;
+        },
+    },
+    methods: {
+        dismiss_success(success) {
+            this.$emit('dismissed-success', success);
+        },
+    },
+});

histogram_file_manager/static/histogram_file_manager/js/histogram_file_manager_discover.js

@@ -0,0 +1,29 @@
+const app_discover = Vue.createApp({
+    data() {
+        return {
+            file_discover_is_visible: false,
+            api_base: '/api/histogram_data_files/',
+            page_current_url:
+                '/api/histogram_data_files/' + window.location.search,
+            abort_controller: new AbortController(), // To cancel a request
+        };
+    },
+    // This will run as soon as the app is mounted
+    methods: {
+        // Private method to fetch updated files information
+        // via the API
+        show_file_discover_modal() {
+            this.file_discover_is_visible = true;
+        },
+        hide_file_discover_modal() {
+            this.file_discover_is_visible = false;
+        },
+    },
+    computed: {
+        request_url() {
+            // window.location.search contains the filters
+            // selected by the user in the filter form
+            return this.page_current_url;
+        },
+    },
+});

histogram_file_manager/templates/histogram_file_manager/filter_histogram_file_manager.html

@@ -1,6 +1,19 @@
 {% load widget_tweaks %}
 
 <h2>Histogram file manager</h2>
+<div id="app_discover">
+    {% csrf_token %}
+    <div class="d-grid">
+        <button id="id_btn_discover" class="btn btn-success" style="margin-top: 5pt" v-on:click="show_file_discover_modal()">
+            Discover files
+        </button>
+    </div>
+    <file-discover
+        :is_visible="file_discover_is_visible"
+        @clicked-close="hide_file_discover_modal"
+    >
+    </file-discover>
+</div>
 <hr/>
 
 <form id="file_filter_form" action="" method="get" class="form my-1"> 

histogram_file_manager/templates/histogram_file_manager/histogram_file_manager.html

@@ -8,8 +8,10 @@
 <script src="{% static 'js/axios.min.js' %}"></script>
 <script src="{% static 'js/utils.js' %}"></script>
 <script src="{% static 'histogram_file_manager/js/histogram_file_manager.js' %}"></script>
+<script src="{% static 'histogram_file_manager/js/histogram_file_manager_discover.js' %}"></script>
 <script src="{% static 'histogram_file_manager/js/components/file_table.js' %}"></script>
 <script src="{% static 'histogram_file_manager/js/components/file_actions.js' %}"></script>
+<script src="{% static 'histogram_file_manager/js/components/file_discover.js' %}"></script>
 <script src="{% static 'histogram_file_manager/js/components/table_pagination.js' %}"></script>
 <script src="{% static 'histogram_file_manager/js/components/errors.js' %}"></script>
 <script src="{% static 'histogram_file_manager/js/components/success.js' %}"></script>
@@ -75,6 +77,7 @@ <h2>Histogram File Manager</h2>
 {% block scripts %}
 <script>
  const mountedApp = app.mount('#app');
+ const mountedAppDiscover = app_discover.mount("#app_discover");
 
  // On page load
  // window.addEventListener('load', (event) => {