Working on monitoring page still

.github/workflows/basic_test.yml

@@ -14,7 +14,7 @@ jobs:
         run: docker build -t wis2box-webapp ./webapp/
 
       - name: Start Docker Compose services
-        run: docker-compose -f test/docker-compose.yml up -d
+        run: docker-compose -f test/docker-compose.yml up -d --build
 
       - name: Wait for service to start
         run: sleep 45

test/docker-compose.yml

@@ -4,9 +4,9 @@ version: '3.3'
 services:
   wis2box-webapp-test:
     container_name: wis2box-webapp-test
-    image: wis2box-webapp:latest
+    build: ../webapp
     environment:
-      - WIS2BOX_API_URL=http://localhost/oapi
+      - WIS2BOX_URL=http://localhost
       - VITE_TEST_MODE=true
     ports:
       - 8080:4173 # port mapping for webapp

webapp/Dockerfile

@@ -21,5 +21,11 @@ EXPOSE 4173
 # Copy the entrypoint script into /app and make it executable
 RUN chmod +x /wis2box-webapp/docker-entrypoint.sh
 
+COPY healthcheck.sh /wis2box-webapp/healthcheck.sh
+
+RUN chmod +x /wis2box-webapp/healthcheck.sh
+
+HEALTHCHECK --interval=30s --timeout=30s --start-period=5s --retries=3 CMD /wis2box-webapp/healthcheck.sh
+
 # Set the entrypoint
 ENTRYPOINT ["sh", "/wis2box-webapp/docker-entrypoint.sh"]

webapp/docker-entrypoint.sh

@@ -1,9 +1,36 @@
 #!/bin/bash
 
-# Set VITE_API_URL to the value of WIS2BOX_API_URL
-echo "set VITE_API_URL to the value of WIS2BOX_API_URL in .env"
-echo "VITE_API_URL=$WIS2BOX_API_URL"
-export VITE_API_URL=$WIS2BOX_API_URL
+# check WIS2BOX_URL is set
+if [ -z "$WIS2BOX_URL" ]; then
+  echo "WIS2BOX_URL is not set"
+  exit 1
+fi
+
+# Set VITE_URL to the value of WIS2BOX_URL/oapi
+echo "VITE_API_URL=$WIS2BOX_URL/oapi"
+export VITE_API_URL=$WIS2BOX_URL/oapi
+
+# Set VITE_BASE_URL to the value of WIS2BOX_URL/wis2box-webapp
+echo "VITE_BASE_URL=$WIS2BOX_URL/wis2box-webapp"
+export VITE_BASE_URL=$WIS2BOX_URL/wis2box-webapp
+
+# Set VITE_BASEMAP_URL to WIS2BOX_BASEMAP_URL if it is set
+if [ -z "$WIS2BOX_BASEMAP_URL" ]; then
+  echo "WIS2BOX_BASEMAP_URL is not set use default basemap"
+  VITE_BASEMAP_URL="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+else
+  export VITE_BASEMAP_URL=$WIS2BOX_BASEMAP_URL
+fi
+echo "VITE_BASEMAP_URL=$VITE_BASEMAP_URL"
+
+# repeat for VITE_BASEMAP_ATTRIBUTION
+if [ -z "$WIS2BOX_BASEMAP_ATTRIBUTION" ]; then
+  echo "WIS2BOX_BASEMAP_ATTRIBUTION is not set use default basemap attribution"
+  VITE_BASEMAP_ATTRIBUTION="<a href="https://osm.org/copyright">OpenStreetMap</a> contributors"
+else
+  export VITE_BASEMAP_ATTRIBUTION=$WIS2BOX_BASEMAP_ATTRIBUTION
+fi
+echo "VITE_BASEMAP_ATTRIBUTION=$VITE_BASEMAP_ATTRIBUTION"
 
 npm run build
 npm run preview

webapp/healthcheck.sh

@@ -0,0 +1,9 @@
+#!/bin/sh
+# Custom health check script
+
+# Check if npm run preview is running
+if ps aux | grep 'npm run preview' | grep -v grep; then
+  exit 0 # Process found, container is healthy
+else
+  exit 1 # Process not found, container is not healthy
+fi

webapp/src/components/APIStatus.vue

@@ -0,0 +1,39 @@
+<template>
+  <v-dialog v-model="apiDown" width="auto">
+    <v-card>
+      <v-card-text>Unable to connect to API, please check status.<br/>
+        API: <a :href="apiUrl">{{apiUrl}}</a></v-card-text>
+      <v-card-actions>
+        <v-btn color="primary" block @click="apiDown=false" elevation=2>Close</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+<script>
+  import { defineComponent, ref, onBeforeMount } from 'vue';
+  import { VDialog, VCard, VCardText, VCardActions, VBtn } from 'vuetify/lib/components/index.mjs';
+
+  export default defineComponent({
+    name: 'APIStatus',
+    components: {
+      VDialog, VCard, VCardText, VCardActions, VBtn
+    },
+    setup() {
+      const apiDown = ref(false);
+      const apiUrl = `${import.meta.env.VITE_API_URL}/`;
+      onBeforeMount(async () => {
+        try {
+          const response = await fetch(apiUrl); // Add await here
+          if (!response.ok) {
+            apiDown.value = true;
+            console.error(response)
+          }
+        } catch (err) {
+          apiDown.value = true;
+          console.error(err)
+        }
+      });
+      return { apiDown, apiUrl };
+    }
+  });
+</script>

webapp/src/components/CodeListSelector.vue

@@ -0,0 +1,80 @@
+<template>
+    <v-dialog v-model="showDialog" width="auto">
+      <v-card>
+        <v-card-text>Unable to fetch code list, please see console.</v-card-text>
+        <v-card-actions>
+          <v-btn color="primary" block @click="showDialog=false" elevation=2>Close</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <div v-if="!_error">
+    <v-autocomplete
+      v-if="options !== null"
+      :items="options"
+      item-title="name"
+      item-value="id"
+      :label="props.label"
+      v-model="selected"
+      :rules="[value => !!value ? true : props.defaultHint]"
+      :hint="selected ? selected.description : props.defaultHint"
+      :readonly="props.readonly"
+      clearable
+      persistent-hint
+      return-object
+      />
+    </div>
+    <div v-else class="error">
+      <v-text-field :label="props.label" class="text-error" readonly hint="Unable to fetch code list, please see console." persistent-hint/>
+    </div>
+</template>
+
+<script>
+  import { defineComponent, ref, onBeforeMount, watch} from 'vue';
+  import { VCard, VCardItem, VAutocomplete} from 'vuetify/lib/components/index.mjs';
+
+
+  export default defineComponent({
+    name: 'CodeListSelector',
+    components: {
+      VCard, VCardItem, VAutocomplete
+    },
+    props: {
+      codeList: {type: String},
+      label: {type: String},
+      defaultHint: {type: String},
+      readonly: false,
+      modelValue: null
+    },
+    emits: ["update.modelValue"],
+    setup(props, {emit}){
+      const options = ref(null);
+      const selected = ref(null);
+      const showDialog = ref(false);
+      const _error = ref(false);
+
+      const fetchOptions = async() => {
+        try {
+          var apiUrl = `${import.meta.env.VITE_BASE_URL}/code_lists/${props.codeList}.json`;
+          const response = await fetch(apiUrl);
+          if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+          }
+          const data = await response.json();
+          options.value = data; // Assuming the API response contains the options in the expected format
+        } catch (error) {
+          console.error('Error fetching ' + props.label + ' options:', error);
+          showDialog.value = true;
+          _error.value = true;
+        }
+      };
+
+      onBeforeMount( async () => {
+        fetchOptions();
+      });
+      watch( () => selected.value, (newValue) => {
+        emit("update.modelValue", newValue);
+      });
+      return {selected, options, props, showDialog, _error};
+    }
+  });
+</script>