Merge pull request #4 from sranmanpreet/dev1.0.1

Dev1.0.1

Dockerfile

@@ -0,0 +1,24 @@
+# Use the nginx image as the base
+FROM nginx:alpine
+
+# Copy the nginx.conf file to the container
+COPY nginx.conf /etc/nginx/nginx.conf
+
+# Copy the built frontend and backend images to the nginx directory
+COPY --from=sranmanpreet/mockpit-client:1.0.1-RELEASE /usr/share/nginx/html /usr/share/nginx/html/
+COPY ./entryPoint.sh /
+COPY --from=sranmanpreet/mockpit-server:1.0.1-RELEASE /app/mockpit.jar /app/mockpit-server.jar
+
+EXPOSE 80
+
+# Install OpenJDK and other necessary packages
+RUN apk update && apk add openjdk11
+
+# Set up environment variables
+ENV JAVA_HOME=/usr/lib/jvm/java-11-openjdk
+ENV PATH="$JAVA_HOME/bin:${PATH}"
+
+# Start Nginx and Spring Boot app
+RUN chmod +x entryPoint.sh
+ENTRYPOINT ["sh","/entryPoint.sh"]
+#CMD nginx && java -jar /app/mockpit-server.jar

README.md

@@ -70,13 +70,20 @@ Mockpit is a versatile and user-friendly REST API mock server that empowers deve
    ```
    Client will be deployed on http://localhost:4200 by default.
 #### Installation using Docker
+- Install Mockpit
+ ```
+docker run -e "SPRING_DATASOURCE_URL=jdbc:postgresql://host.docker.internal:5432/mockpitdb" -e "SPRING_DATASOURCE_USERNAME=postgres" -e "SPRING_DATASOURCE_PASSWORD=postgres" -e "backendUrl=http://localhost:8080" -p 4200:80 -p 8080:8080 sranmanpreet/mockpit:1.0.1-RELEASE
+ ``` 
+It will run Mockpit client at http://localhost:4200 and Mockpit server at http://localhost:8080. 
+
+Separate images for Mockpit client and server are also available. Follow below steps to install client and server individually.
 - Install Server
  ```
-docker run -e "SPRING_DATASOURCE_URL=jdbc:postgresql://host.docker.internal:5432/moock" -e "SPRING_DATASOURCE_USERNAME=postgres" -e "SPRING_DATASOURCE_PASSWORD=postgres" -p 8080:8080 mockpit-server:1.0.0-RELEASE
+docker run -e "SPRING_DATASOURCE_URL=jdbc:postgresql://host.docker.internal:5432/mockpitdb" -e "SPRING_DATASOURCE_USERNAME=postgres" -e "SPRING_DATASOURCE_PASSWORD=postgres" -p 8080:8080 mockpit-server:1.0.1-RELEASE
  ```
 - Install Client
 ```
-docker run -p 4200:80 -e backendUrl=http://localhost:8080 sranmanpreet/mockpit-server:1.0.0-RELEASE
+docker run -p 4200:80 -e backendUrl=http://localhost:8080 sranmanpreet/mockpit-server:1.0.1-RELEASE
 ```
 Mockpit will be accessible at http://localhost:4200
 
@@ -85,8 +92,6 @@ Mockpit will be accessible at http://localhost:4200
  ```
 docker-compose -f docker-compose.yml up -d
  ```
-
-Mockpit will be accessible at http://localhost:4200
 
 ### Usage
 1. After installation with default configurations, access the Mockpit web interface by navigating to http://localhost:4200 in your web browser.

client/mockpit-ui/package.json

@@ -1,10 +1,11 @@
 {
   "name": "mockpit-ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
+    "build-prod": "ng build --base-href=/mockpit/",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"
   },

client/mockpit-ui/src/app/app.module.ts

@@ -24,12 +24,23 @@ import { NewMockComponent } from './components/new-mock/new-mock.component';
 import { SearchComponent } from './components/search/search.component';
 import { TruncatePipe } from './pipes/truncate.pipe';
 import { FooterComponent } from './components/footer/footer.component';
+import { APP_BASE_HREF, PlatformLocation } from '@angular/common';
 
 
 export function initializeApp(configService: ConfigService): () => Promise<any> {
   return () => configService.loadConfig();
 }
 
+function trimLastSlashFromUrl(baseUrl: string) {
+  if (baseUrl == null || baseUrl == "") {
+      return null;
+  } else if (baseUrl[baseUrl.length - 1] == '/') {
+      var trimmedUrl = baseUrl.substring(0, baseUrl.length - 1);
+      return trimmedUrl;
+  }
+  return null;
+}
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -67,7 +78,13 @@ export function initializeApp(configService: ConfigService): () => Promise<any>
       deps: [ConfigService],
       multi: true,
     },
+    {
+      provide: APP_BASE_HREF,
+      useFactory: (s: PlatformLocation) => trimLastSlashFromUrl(s.getBaseHrefFromDOM()),
+      deps: [PlatformLocation]
+    }
   ],
   bootstrap: [AppComponent]
 })
+
 export class AppModule { }

client/mockpit-ui/src/app/components/footer/footer.component.html

@@ -1,3 +1,3 @@
 <div class="w-full py-1">
-    <p class="text-center text-sm text-red-400"><a class="hover:text-blue-400" href="https://github.com/sranmanpreet/mockpit" target="_blank">v1.0.0</a></p>
+    <p class="text-center text-sm text-red-400"><a class="hover:text-blue-400" href="https://github.com/sranmanpreet/mockpit" target="_blank">v1.0.1</a></p>
 </div>

client/mockpit-ui/src/app/components/header/header.component.html

@@ -2,7 +2,7 @@
     <a href="#" class="pl-4">
         <!-- <img src="path/to/logo.png" alt="Logo"> -->
         <h1 class="text-lg font-bold">
-            Mock<span class="text-red-400">pit</span><span class="text-sm font-light ml-1"><sub>1.0.0</sub></span>
+            Mock<span class="text-red-400">pit</span><span class="text-sm font-light ml-1"><sub>1.0.1</sub></span>
         </h1>
     </a>
     <ul class="space-x-4 pr-4">

client/mockpit-ui/src/app/components/mock-detail/mock-detail.component.html

@@ -97,7 +97,7 @@
                     <label for="response-headers"
                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Response
                         Headers</label>
-                    <img src="../../../assets/icons/add.svg" alt="Add Response Header" class="w-5 h-5 cursor-pointer hover:bg-gray-100" (click)="addHeader()">
+                    <img src="assets/icons/add.svg" alt="Add Response Header" class="w-5 h-5 cursor-pointer hover:bg-gray-100" (click)="addHeader()">
                 </div>
                 <div class="w-full space-y-2">
                     <div class="flex space-x-2 items-center" *ngFor="let header of getResponseHeaderControls(); let i = index" [formGroupName]="i">
@@ -107,7 +107,7 @@
                         <input type="text" id="response-header-1"
                             class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                             placeholder="Value {{ i + 1 }}" formControlName="value">
-                        <img src="../../../assets/icons/delete.svg" alt="Delete Header" class="h-5 w-5 cursor-pointer hover:bg-gray-100" (click)="removeHeader(i)">
+                        <img src="assets/icons/delete.svg" alt="Delete Header" class="h-5 w-5 cursor-pointer hover:bg-gray-100" (click)="removeHeader(i)">
                     </div>
                 </div>
             </div>

client/mockpit-ui/src/app/components/mock-list/mock-list.component.html

@@ -55,7 +55,7 @@ <h4 routerLink="/mock/{{element.id}}" class="text-lg my-1 ">{{element.name | tru
               <th mat-header-cell *matHeaderCellDef></th>
               <td mat-cell *matCellDef="let element">
                 <div class="flex">
-                  <img class="m-auto w-5 h-5 cursor-pointer hover:bg-gray-100" src="./../../../assets/icons/delete.svg"
+                  <img class="m-auto w-5 h-5 cursor-pointer hover:bg-gray-100" src="assets/icons/delete.svg"
                     alt="Delete Icon" (click)="deleteMock(element.id)">
                 </div>
               </td>

client/mockpit-ui/src/app/components/new-mock/new-mock.component.html

@@ -96,7 +96,7 @@
                     <label for="response-headers"
                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Response
                         Headers</label>
-                    <img src="../../../assets/icons/add.svg" alt="Add Response Header" class="w-5 h-5 cursor-pointer hover:bg-gray-100" (click)="addHeader()">
+                    <img src="assets/icons/add.svg" alt="Add Response Header" class="w-5 h-5 cursor-pointer hover:bg-gray-100" (click)="addHeader()">
                 </div>
                 <div class="w-full space-y-2">
                     <div class="flex space-x-2 items-center" *ngFor="let header of getResponseHeaderControls(); let i = index" [formGroupName]="i">
@@ -106,7 +106,7 @@
                         <input type="text" id="response-header-1"
                             class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                             placeholder="Value {{ i + 1 }}" formControlName="value">
-                        <img src="../../../assets/icons/delete.svg" alt="Delete Header" class="h-5 w-5 cursor-pointer hover:bg-gray-100" (click)="removeHeader(i)">
+                        <img src="assets/icons/delete.svg" alt="Delete Header" class="h-5 w-5 cursor-pointer hover:bg-gray-100" (click)="removeHeader(i)">
                     </div>
                 </div>
             </div>

client/mockpit-ui/src/app/components/search/search.component.html

@@ -1,9 +1,9 @@
 <form class="w-full h-fit relative">
     <div class="border rounded-full overflow-hidden shadow-md flex">
-        <img class="m-auto ml-4 w-5 h-5" src="./../../../assets/icons/search.svg" alt="Search Icon">
+        <img class="m-auto ml-4 w-5 h-5" src="assets/icons/search.svg" alt="Search Icon">
         <input class="w-full px-4 py-2 outline-none" type="text" placeholder="Search mocks" title="Search"
             (keyup)="search(getValue($event))" [ngModel]="query" name="query">
-        <img class="m-auto mr-4 w-5 h-5 cursor-pointer" src="./../../../assets/icons/close.svg" alt="Search Icon" [ngClass]="query? 'inline' : 'hidden'" (click)="clearSearch()">
+        <img class="m-auto mr-4 w-5 h-5 cursor-pointer" src="assets/icons/close.svg" alt="Search Icon" [ngClass]="query? 'inline' : 'hidden'" (click)="clearSearch()">
     </div>
     <ul class="w-full mt-2 bg-white max-h-[30vh] px-1 shadow-md overflow-y-scroll absolute"
         *ngIf="(mocks$ | async) as mocks">

client/mockpit-ui/src/app/services/config.service.ts

@@ -1,5 +1,6 @@
+import { APP_BASE_HREF } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, Inject } from '@angular/core';
 import { Observable, of } from 'rxjs';
 
 @Injectable({
@@ -10,11 +11,11 @@ export class ConfigService {
   private configUrl = 'assets/config/config.json';
   private config: any;
 
-  constructor(private http: HttpClient) {}
+  constructor(@Inject(APP_BASE_HREF) public baseHref: string, private http: HttpClient) {}
 
   loadConfig(): Promise<any> {
     return this.http
-      .get(this.configUrl)
+      .get(this.baseHref + "/" + this.configUrl)
       .toPromise()
       .then((config) => {
         this.config = config;

client/mockpit-ui/src/app/services/mock.service.ts

@@ -12,6 +12,9 @@ export class MockService {
 
   constructor(private http: HttpClient, private configService: ConfigService){
     this.backendUrl = this.configService.getConfig().backendUrl;
+    if(this.backendUrl.charAt(this.backendUrl.length-1) == '/'){
+      this.backendUrl = this.backendUrl.slice(0, this.backendUrl.length-1);
+    }
   }
 
   public getMocks(pageNo?: number, pageSize?:number) : Observable<MockResponse> {

docker-compose.yml

@@ -2,7 +2,7 @@ version: '3'
 services:
   mockpit-server:
     container_name: mockpit-server
-    image: sranmanpreet/mockpit-server:1.0.0-RELEASE
+    image: sranmanpreet/mockpit-server:1.0.1-RELEASE
     ports:
       - "8080:8080"
     depends_on:
@@ -15,7 +15,7 @@ services:
             }'
 
   mockpit-client:
-    image: sranmanpreet/mockpit-client:1.0.0-RELEASE
+    image: sranmanpreet/mockpit-client:1.0.1-RELEASE
     environment:
       backendUrl: http://localhost:8080
     ports:

entryPoint.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+envsubst < /usr/share/nginx/html/assets/config/config.template.json > /usr/share/nginx/html/assets/config/config.json
+nginx -g 'daemon off;' &
+java -jar /app/mockpit-server.jar

nginx.conf

@@ -0,0 +1,11 @@
+events {
+    worker_connections 1024;
+}
+
+http {
+    server {
+        listen 80;
+        include /etc/nginx/mime.types;
+        root /usr/share/nginx/html;
+    }
+}

server/pom.xml

@@ -10,7 +10,7 @@
 	</parent>
 	<groupId>com.ms.utils</groupId>
 	<artifactId>mockpit</artifactId>
-	<version>1.0.0-RELEASE</version>
+	<version>1.0.1-RELEASE</version>
 	<name>mockpit-service</name>
 	<description>A REST mock server </description>
 	<properties>