night backup

recepgunes1 · Sep 4, 2023 · a03914d · a03914d
1 parent 1952ce7
commit a03914d
Show file tree

Hide file tree

Showing 13 changed files with 124 additions and 91 deletions.
diff --git a/internal-services.yml b/internal-services.yml
@@ -40,7 +40,7 @@ services:
     environment:
       ASPNETCORE_ENVIRONMENT: Production
     ports:
-      - 5043:80
+      - 8081:80
     depends_on:
       - expiry_check_api
       - shortener_api
@@ -52,11 +52,11 @@ services:
   webui:
     image: ${DOCKER_REGISTRY-}webui
     ports:
-      - 8080:80
+     - 8080:80
     build:
       context: src/Fronted/webui
       dockerfile: Dockerfile
     depends_on:
       - apigateway
     networks:
-      - fronted
+     - fronted
diff --git a/src/Buffer/WebAPI/Program.cs b/src/Buffer/WebAPI/Program.cs
@@ -32,6 +32,14 @@
 
 app.UseRouting();
 
+app.Use((context, next) =>
+{
+    context.Response.Headers["Access-Control-Allow-Origin"] = "*";
+    context.Response.Headers["Access-Control-Allow-Methods"] = "GET, POST, PUT, DELETE";
+    context.Response.Headers["Access-Control-Allow-Headers"] = "*";
+    return next.Invoke();
+});
+
 app.UseCors(p =>
 {
     p.AllowAnyOrigin()

diff --git a/src/ExpiryChecker/WebAPI/Program.cs b/src/ExpiryChecker/WebAPI/Program.cs
@@ -20,6 +20,14 @@
 
 app.UseRouting();
 
+app.Use((context, next) =>
+{
+    context.Response.Headers["Access-Control-Allow-Origin"] = "*";
+    context.Response.Headers["Access-Control-Allow-Methods"] = "GET, POST, PUT, DELETE";
+    context.Response.Headers["Access-Control-Allow-Headers"] = "*";
+    return next.Invoke();
+});
+
 app.UseCors(p =>
 {
     p.AllowAnyOrigin()

diff --git a/src/Fronted/webui/.env b/src/Fronted/webui/.env
@@ -1,2 +1,2 @@
 VUE_APP_TITLE=Url Shortener App
-VUE_APP_API_GATEWAY_URL=http://localhost:5043
+VUE_APP_API_GATEWAY_URL=http://localhost:8081
diff --git a/src/Fronted/webui/.env.Production b/src/Fronted/webui/.env.Production
@@ -1,2 +1,2 @@
 VUE_APP_TITLE=Url Shortener App
-VUE_APP_API_GATEWAY_URL=http://apigateway:80
+VUE_APP_API_GATEWAY_URL=http://localhost:8081
diff --git a/src/Fronted/webui/package-lock.json b/src/Fronted/webui/package-lock.json
diff --git a/src/Fronted/webui/src/App.vue b/src/Fronted/webui/src/App.vue
@@ -2,7 +2,7 @@
   <div class="container border mt-5 rounded bg-light">
     <div class="row mt-5">
       <div class="col">
-        <SearchBar />
+        <SearchBar @request-refresh="refreshUrlTable" />
       </div>
     </div>
     <div class="row my-5">
@@ -12,7 +12,7 @@
     </div>
     <div class="row">
       <div class="col">
-        <UrlTable :urls="urls" />
+        <UrlTable ref="UrlTableRef" />
       </div>
     </div>
   </div>
@@ -21,8 +21,6 @@
 <script lang="ts">
 import { defineComponent, ref } from "vue";
 
-import axios from "axios";
-
 import SearchBar from "./components/SearchBar.vue";
 import UrlTable from "./components/UrlTable.vue";
 import UrlConfiguration from "./components/UrlConfiguration.vue";
@@ -32,22 +30,18 @@ import "bootstrap/dist/js/bootstrap.js";
 
 export default defineComponent({
   name: "App",
+  methods: {
+    refreshUrlTable() {
+      const urlTableRef = this.$refs.UrlTableRef as any; // or a more specific type if you have one
+      if (urlTableRef && typeof urlTableRef.fetchUrls === 'function') {
+        urlTableRef.fetchUrls();
+      }
+    }
+  },
   components: {
     SearchBar,
     UrlTable,
     UrlConfiguration,
   },
-  setup() {
-    const urls = ref([]);
-
-    axios
-      .get(`${process.env.VUE_APP_API_GATEWAY_URL}/get_all_urls`)
-      .then((response) => {
-        urls.value = response.data;
-      });
-    return {
-      urls,
-    };
-  },
 });
 </script>
diff --git a/src/Fronted/webui/src/components/SearchBar.vue b/src/Fronted/webui/src/components/SearchBar.vue
@@ -1,34 +1,22 @@
 <template>
   <div class="text-center">
     <div class="input-group w-auto">
-      <input
-        type="text"
-        class="form-control"
-        placeholder="Enter a short path or url"
-        v-model="input"
-      />
-      <button
-        class="btn btn-primary"
-        type="button"
-        @click.prevent="GetOrPublishUrl(input.toString())"
-      >
+      <input type="text" class="form-control" placeholder="Enter a short path or url" v-model="input" />
+      <button class="btn btn-primary" type="button" @click.prevent="GetOrPublishUrl(input.toString())">
         Search
       </button>
     </div>
-    <UrlDetail v-if="url != null && url.longUrl" :url-with-detail="url" />
-    <img
-      v-if="isStarted"
-      class="mt-4 img-fluid"
-      src="../assets/loading-gif.gif"
-      style="width: 48px"
-    />
+    <UrlDetail v-if="url != null && url.longUrl" :url-with-detail="url" @detail-shown="refreshTable" />
+    <img v-if="isStarted" class="mt-4 img-fluid" src="../assets/loading-gif.gif" style="width: 48px" />
   </div>
 </template>
 
 <script lang="ts">
 import axios from "axios";
 import { defineComponent } from "vue";
 import Url from "../types/Url";
+import UrlTableRef from "../types/UrlTableRef";
+
 import UrlDetail from "./UrlDetail.vue";
 
 export default defineComponent({
@@ -44,6 +32,9 @@ export default defineComponent({
     };
   },
   methods: {
+    refreshTable() {
+  this.$emit('request-refresh');
+},
     GetOrPublishUrl(input: string) {
       this.isStarted = true; // Start loading
 
@@ -73,8 +64,7 @@ export default defineComponent({
             setTimeout(() => {
               axios
                 .get(
-                  `${
-                    process.env.VUE_APP_API_GATEWAY_URL
+                  `${process.env.VUE_APP_API_GATEWAY_URL
                   }/get_url/${encodeURIComponent(input)}`
                 )
                 .then((final_response) => {

diff --git a/src/Fronted/webui/src/components/UrlDetail.vue b/src/Fronted/webui/src/components/UrlDetail.vue
@@ -1,44 +1,36 @@
 <template>
-  <div
-    class="alert alert-warning alert-dismissible fade show mt-5"
-    role="alert"
-  >
-  <table class="table table-warning">
-    <thead class="thead-dark text-center">
+  <div class="alert alert-warning alert-dismissible fade show mt-5" role="alert">
+    <table class="table table-warning">
+      <thead class="thead-dark text-center">
         <tr>
-            <th scope="col" colspan="2">URL Details</th>
+          <th scope="col" colspan="2">URL Details</th>
         </tr>
-    </thead>
-    <tbody>
+      </thead>
+      <tbody>
         <tr>
-            <th scope="row">Long Url</th>
-            <td><a :href="urlWithDetail.longUrl">{{ urlWithDetail.longUrl }}</a></td>
+          <th scope="row">Long Url</th>
+          <td><a :href="urlWithDetail.longUrl" :title="urlWithDetail.longUrl">{{ urlWithDetail.longUrl }}</a></td>
         </tr>
         <tr>
-            <th scope="row">Short Path</th>
-            <td>{{ urlWithDetail.shortPath }}</td>
+          <th scope="row">Short Path</th>
+          <td><a :href="`${currentUrl}${urlWithDetail.shortPath}`" :title="urlWithDetail.shortPath">{{ urlWithDetail.shortPath }}</a></td>
         </tr>
         <tr>
-            <th scope="row">Created Date</th>
-            <td>{{ urlWithDetail.createdDate }}</td>
+          <th scope="row">Created Date</th>
+          <td>{{ urlWithDetail.createdDate }}</td>
         </tr>
         <tr>
-            <th scope="row">Expire DateTime</th>
-            <td>{{ urlWithDetail.expireDate }}</td>
+          <th scope="row">Expire DateTime</th>
+          <td>{{ urlWithDetail.expireDate }}</td>
         </tr>
-    </tbody>
-</table>
-    <button
-      type="button"
-      class="btn-close"
-      data-bs-dismiss="alert"
-      aria-label="Close"
-    ></button>
+      </tbody>
+    </table>
+    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
   </div>
 </template>
-  
+
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, PropType, ref, onMounted } from "vue";
 import Url from "../types/Url";
 
 export default defineComponent({
@@ -49,5 +41,12 @@ export default defineComponent({
       type: Object as PropType<Url>,
     },
   },
+  setup(p, { emit }) {
+    onMounted(() => {
+      emit('detail-shown');
+    });
+    const currentUrl = ref(window.location.href);
+    return { currentUrl };
+  },
 });
 </script>