Added the mapping view (#188)

UI/src/components/MainMenu.vue

@@ -24,12 +24,12 @@
 	                  <span>Request Monitor</span>
 	                </a>
 	              </li>
-	              <!--li>
+	              <li>
 	                <a href="/mapping" class="flex items-center space-x-2 text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">
 	                  <List class="h-5 w-5" />
 	                  <span>Mapping</span>
 	                </a>
-	              </li-->
+	              </li>
 	              <li>
 	                <a href="/about" class="flex items-center space-x-2 text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">
 	                  <Settings class="h-5 w-5" />

UI/src/services/api.js

@@ -1,6 +1,10 @@
 import axios from 'axios';
 
-const API_URL = window.location.protocol + "//" + location.host + "/api";
+//if it's on devmode
+let  API_URL = window.location.protocol + "//" + location.host + "/api";
+if (process.env.NODE_ENV === 'development') {
+  API_URL = "http://localhost:8082/api";
+}
 
 export const getMockDefinitions = async () => {
   try {

UI/src/views/MappingView.vue

@@ -67,79 +67,45 @@
           <ClipboardListIcon class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-600" />
           <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-gray-100">No Mocks</h3>
           <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Get started by creating a new mock.</p>
-          <div class="mt-6">
-            <button @click="showAddModal = true"
-              class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-              <PlusIcon class="h-5 w-5 mr-2" />
-              Add
-            </button>
-          </div>
         </div>
       </div>
     </div>
   </div>
 
-  <!-- Add/Edit Modal -->
-  <div v-if="showAddModal || showEditModal" class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title"
-    role="dialog" aria-modal="true">
-    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-      <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
-      <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-      <div
-        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full dark:bg-gray-800">
-        <form @submit.prevent="showAddModal ? addItem() : updateItem()">
-          <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-            <div class="mb-4">
-              <label for="edit-uri" class="block text-sm font-medium text-gray-700 dark:text-gray-300">URI</label>
-              <input type="text" id="edit-uri" v-model="editingItem.uri"
-                class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-                required />
+<!-- Add/Edit Modal -->
+<div v-if="showAddModal || showEditModal" class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+      <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
+        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full dark:bg-gray-800">
+          <form @submit.prevent="showAddModal ? addItem() : updateItem()">
+            <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+              <div class="mb-4">
+                <label for="edit-uri" class="block text-sm font-medium text-gray-700 dark:text-gray-300">URI</label>
+                <input type="text" id="edit-uri" v-model="editingItem.URI" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white" required :readonly="showEditModal ? true : false" />
+              </div>
+              <div class="mb-4">
+                <label for="edit-description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
+                <input type="text" id="edit-description" v-model="editingItem.description" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white" readonly />
+              </div>
+              <div class="mb-4">
+                <label for="edit-mock" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Definition</label>
+                <textarea id="edit-mock" v-model="editingItem.definition" rows="4" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white" required></textarea>
+              </div>
             </div>
-            <div class="mb-4">
-              <label for="edit-description"
-                class="block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
-              <input type="text" id="edit-description" v-model="editingItem.description"
-                class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-                required />
+            <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+              <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+                {{ showAddModal ? 'Add' : 'Update' }}
+              </button>
+              <button @click="closeModal" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700">
+                Cancel
+              </button>
             </div>
-            <div class="mb-4">
-              <label for="edit-method" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Method</label>
-              <select id="edit-method" v-model="editingItem.method"
-                class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-                required>
-                <option value="GET">GET</option>
-                <option value="POST">POST</option>
-                <option value="PUT">PUT</option>
-                <option value="DELETE">DELETE</option>
-              </select>
-            </div>
-            <div class="mb-4">
-              <label for="edit-path" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Path</label>
-              <input type="text" id="edit-path" v-model="editingItem.path"
-                class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-                required />
-            </div>
-            <div class="mb-4">
-              <label for="edit-result" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Result</label>
-              <input type="number" id="edit-result" v-model="editingItem.result"
-                class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-                required />
-            </div>
-          </div>
-          <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-            <button type="submit"
-              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-              {{ showAddModal ? 'Add' : 'Update' }}
-            </button>
-            <button @click="closeModal" type="button"
-              class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700">
-              Cancel
-            </button>
-          </div>
-        </form>
+          </form>
+        </div>
       </div>
-    </div>
-  </div>
+</div>
+
 </template>
 
 <script setup>
@@ -159,12 +125,7 @@ const headers = [
 const showAddModal = ref(false)
 const showEditModal = ref(false)
 const editingItem = ref({})
-const isDarkMode = ref(false)
-
 const items = ref([]);
-const selectedMock = ref(null);
-const newMock = ref({ URI: '', description: '' });
-const isCreating = ref(false);
 
 const loadMockDefinitions = async () => {
   try {
@@ -179,10 +140,9 @@ const loadMockDefinitions = async () => {
 const addItem = async () => {
 
   try {
-    await createMockDefinition(newMock.value.URI, newMock.value);
+    await createMockDefinition(editingItem.value.URI, JSON.parse(editingItem.value.definition));
+    editingItem.value = null;
     loadMockDefinitions();
-    newMock.value = { URI: '', description: '' };
-    isCreating.value = false;
   } catch (error) {
     console.error('Failed to create mock definition:', error);
   }
@@ -192,7 +152,11 @@ const addItem = async () => {
 
 const editItem = async (URI) => {
   try {
-    editingItem.value = await getMockDefinition(URI);
+    let mock = await getMockDefinition(URI);
+    editingItem.value.URI = mock.URI
+    editingItem.value.description = mock.description
+    editingItem.value.definition = JSON.stringify(mock)
+
     showEditModal.value = true
   } catch (error) {
     console.error('Failed to fetch mock definition:', error);
@@ -201,7 +165,7 @@ const editItem = async (URI) => {
 
 const updateItem = async () => {
   try {
-    await updateMockDefinition(editingItem.value.URI, editingItem.value);
+    await updateMockDefinition(editingItem.value.URI, JSON.parse(editingItem.value.definition));
     loadMockDefinitions();
     editingItem.value = null;
   } catch (error) {
@@ -222,7 +186,7 @@ const deleteItem = async (URI) => {
 const closeModal = () => {
   showAddModal.value = false
   showEditModal.value = false
-  editingItem.value = { uri: '', description: '', method: '', path: '', result: '' }
+  editingItem.value = { uri: '', description: '', definition: '' }
 }
 
 const getMethodColor = (method) => {

go.mod

@@ -8,19 +8,20 @@ require (
 	github.com/ghodss/yaml v1.0.0
 	github.com/icrowley/fake v0.0.0-20180203215853-4178557ae428
 	github.com/joeljunstrom/go-luhn v0.0.0-20190413165225-1e071b33b576
-	github.com/labstack/echo/v4 v4.11.4
+	github.com/labstack/echo/v4 v4.12.0
 	github.com/op/go-logging v0.0.0-20160315200505-970db520ece7
 	github.com/radovskyb/watcher v1.0.7
 	github.com/ryanuber/go-glob v1.0.0
 	github.com/stathat/go v1.0.0
 	github.com/tidwall/gjson v1.9.3
 	github.com/twinj/uuid v1.0.0
-	golang.org/x/net v0.23.0
+	golang.org/x/net v0.24.0
 )
 
 require (
 	github.com/bitly/go-simplejson v0.5.1 // indirect
 	github.com/corpix/uarand v0.2.0 // indirect
+	github.com/golang-jwt/jwt v3.2.2+incompatible // indirect
 	github.com/labstack/gommon v0.4.2 // indirect
 	github.com/mattn/go-colorable v0.1.13 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
@@ -29,9 +30,10 @@ require (
 	github.com/tidwall/pretty v1.2.0 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	github.com/valyala/fasttemplate v1.2.2 // indirect
-	golang.org/x/crypto v0.21.0 // indirect
-	golang.org/x/sys v0.18.0 // indirect
+	golang.org/x/crypto v0.22.0 // indirect
+	golang.org/x/sys v0.19.0 // indirect
 	golang.org/x/text v0.14.0 // indirect
+	golang.org/x/time v0.5.0 // indirect
 	gopkg.in/stretchr/testify.v1 v1.2.2 // indirect
 	gopkg.in/yaml.v2 v2.3.0 // indirect
 )

go.sum

@@ -9,12 +9,16 @@ github.com/fatih/color v1.16.0 h1:zmkK9Ngbjj+K0yRhTVONQh1p/HknKYSlNT+vZCzyokM=
 github.com/fatih/color v1.16.0/go.mod h1:fL2Sau1YI5c0pdGEVCbKQbLXB6edEj1ZgiY4NijnWvE=
 github.com/ghodss/yaml v1.0.0 h1:wQHKEahhL6wmXdzwWG11gIVCkOv05bNOh+Rxn0yngAk=
 github.com/ghodss/yaml v1.0.0/go.mod h1:4dBDuWmgqj2HViK6kFavaiC9ZROes6MMH2rRYeMEF04=
+github.com/golang-jwt/jwt v3.2.2+incompatible h1:IfV12K8xAKAnZqdXVzCZ+TOjboZ2keLg81eXfW3O+oY=
+github.com/golang-jwt/jwt v3.2.2+incompatible/go.mod h1:8pz2t5EyA70fFQQSrl6XZXzqecmYZeUEB8OUGHkxJ+I=
 github.com/icrowley/fake v0.0.0-20180203215853-4178557ae428 h1:Mo9W14pwbO9VfRe+ygqZ8dFbPpoIK1HFrG/zjTuQ+nc=
 github.com/icrowley/fake v0.0.0-20180203215853-4178557ae428/go.mod h1:uhpZMVGznybq1itEKXj6RYw9I71qK4kH+OGMjRC4KEo=
 github.com/joeljunstrom/go-luhn v0.0.0-20190413165225-1e071b33b576 h1:k82KNEG8vk59eHv/8xwBUh4dSR/t1wPiht4aDJm0SOY=
 github.com/joeljunstrom/go-luhn v0.0.0-20190413165225-1e071b33b576/go.mod h1:pE5zuSeg07RZZfWS158WpV7oUWb1++8T2jZ/UklLM3E=
 github.com/labstack/echo/v4 v4.11.4 h1:vDZmA+qNeh1pd/cCkEicDMrjtrnMGQ1QFI9gWN1zGq8=
 github.com/labstack/echo/v4 v4.11.4/go.mod h1:noh7EvLwqDsmh/X/HWKPUl1AjzJrhyptRyEbQJfxen8=
+github.com/labstack/echo/v4 v4.12.0 h1:IKpw49IMryVB2p1a4dzwlhP1O2Tf2E0Ir/450lH+kI0=
+github.com/labstack/echo/v4 v4.12.0/go.mod h1:UP9Cr2DJXbOK3Kr9ONYzNowSh7HP0aG0ShAyycHSJvM=
 github.com/labstack/gommon v0.4.2 h1:F8qTUNXgG1+6WQmqoUWnz8WiEU60mXVVw0P4ht1WRA0=
 github.com/labstack/gommon v0.4.2/go.mod h1:QlUFxVM+SNXhDL/Z7YhocGIBYOiwB0mXm1+1bAPHPyU=
 github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
@@ -48,14 +52,22 @@ github.com/valyala/fasttemplate v1.2.2 h1:lxLXG0uE3Qnshl9QyaK6XJxMXlQZELvChBOCmQ
 github.com/valyala/fasttemplate v1.2.2/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
 golang.org/x/crypto v0.21.0 h1:X31++rzVUdKhX5sWmSOFZxx8UW/ldWx55cbf08iNAMA=
 golang.org/x/crypto v0.21.0/go.mod h1:0BP7YvVV9gBbVKyeTG0Gyn+gZm94bibOW5BjDEYAOMs=
+golang.org/x/crypto v0.22.0 h1:g1v0xeRhjcugydODzvb3mEM9SQ0HGp9s/nh3COQ/C30=
+golang.org/x/crypto v0.22.0/go.mod h1:vr6Su+7cTlO45qkww3VDJlzDn0ctJvRgYbC2NvXHt+M=
 golang.org/x/net v0.23.0 h1:7EYJ93RZ9vYSZAIb2x3lnuvqO5zneoD6IvWjuhfxjTs=
 golang.org/x/net v0.23.0/go.mod h1:JKghWKKOSdJwpW2GEx0Ja7fmaKnMsbu+MWVZTokSYmg=
+golang.org/x/net v0.24.0 h1:1PcaxkF854Fu3+lvBIx5SYn9wRlBzzcnHZSiaFFAb0w=
+golang.org/x/net v0.24.0/go.mod h1:2Q7sJY5mzlzWjKtYUEXSlBWCdyaioyXzRB2RtU8KVE8=
 golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.18.0 h1:DBdB3niSjOA/O0blCZBqDefyWNYveAYMNF1Wum0DYQ4=
 golang.org/x/sys v0.18.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.19.0 h1:q5f1RH2jigJ1MoAWp2KTp3gm5zAGFUTarQZ5U386+4o=
+golang.org/x/sys v0.19.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/text v0.14.0 h1:ScX5w1eTa3QqT8oi6+ziP7dTV1S2+ALU0bI+0zXKWiQ=
 golang.org/x/text v0.14.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
+golang.org/x/time v0.5.0 h1:o7cqy6amK/52YcAKIPlM3a+Fpj35zvRj2TP+e1xFSfk=
+golang.org/x/time v0.5.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/stretchr/testify.v1 v1.2.2 h1:yhQC6Uy5CqibAIlk1wlusa/MJ3iAN49/BsR/dCCKz3M=

internal/console/dispatcher.go

@@ -16,6 +16,7 @@ import (
 	"github.com/jmartin82/mmock/v3/pkg/match"
 	"github.com/jmartin82/mmock/v3/pkg/mock"
 	"github.com/labstack/echo/v4"
+	"github.com/labstack/echo/v4/middleware"
 	"golang.org/x/net/websocket"
 )
 
@@ -70,6 +71,7 @@ func (di *Dispatcher) logFanOut() {
 // Start initiates the http console.
 func (di *Dispatcher) Start() {
 	e := echo.New()
+	e.Use(middleware.CORS())
 	e.HideBanner = true
 	e.HidePort = true