feat: refactor deployment workflow, enhance service configurations, and add system status monitoring

Author: AbaSheger

build_and_run.sh

@@ -4,6 +4,9 @@ target/
 *.war
 *.ear
 *.class
+!.mvn/wrapper/maven-wrapper.jar
+!**/src/main/**/target/
+!**/src/test/**/target/
 
 # Eclipse files
 .classpath
@@ -22,6 +25,8 @@ target/
 # Environment files with sensitive information
 .env
 .env.*
+.env.local
+.env.*.local
 !.env.template
 set_oracle_env.bat
 *.pem
@@ -43,6 +48,10 @@ set_oracle_env.bat
 vm-deploy/
 # Only include specifically vetted files
 !vm-deploy/eureka-server/Dockerfile
+# Ignore vm-deploy directory except config
+vm-deploy/*
+!vm-deploy/config/
+!vm-deploy/docker-compose.yml
 
 # Logs
 logs/

.github/workflows/deploy.yml

@@ -31,6 +31,27 @@ spring:
           enabled: true
           lower-case-service-id: true
       routes:
+        - id: eureka-server-apps
+          uri: ${EUREKA_SERVER_URL:lb://eureka-server}
+          predicates:
+            - Path=/eureka/services
+          filters:
+            - RewritePath=/eureka/services, /eureka/apps
+            - AddResponseHeader=Access-Control-Allow-Origin, https://musicanalytics.netlify.app
+            - AddResponseHeader=Access-Control-Allow-Methods, GET,OPTIONS
+            - AddResponseHeader=Access-Control-Allow-Headers, Content-Type
+            - AddResponseHeader=Access-Control-Allow-Credentials, true
+
+        - id: actuator-routes
+          uri: lb://api-gateway
+          predicates:
+            - Path=/actuator/**
+          filters:
+            - AddResponseHeader=Access-Control-Allow-Origin, https://musicanalytics.netlify.app
+            - AddResponseHeader=Access-Control-Allow-Methods, GET,OPTIONS
+            - AddResponseHeader=Access-Control-Allow-Headers, Content-Type
+            - AddResponseHeader=Access-Control-Allow-Credentials, true
+
         - id: recommendation-service
           uri: ${RECOMMENDATION_SERVICE_URL:lb://recommendation-service}
           predicates:
@@ -82,9 +103,14 @@ management:
       exposure:
         include: "*"
   endpoint:
+    health:
+      show-details: always
     gateway:
       enabled: true
 
+security:
+  enabled: false
+
 # Docker profile
 ---
 spring:
@@ -124,6 +150,27 @@ spring:
             allowCredentials: true
             maxAge: 3600
       routes:
+        - id: eureka-server-apps
+          uri: http://eureka-server:8761
+          predicates:
+            - Path=/eureka/services
+          filters:
+            - RewritePath=/eureka/services, /eureka/apps
+            - AddResponseHeader=Access-Control-Allow-Origin, https://musicanalytics.netlify.app
+            - AddResponseHeader=Access-Control-Allow-Methods, GET,OPTIONS
+            - AddResponseHeader=Access-Control-Allow-Headers, Content-Type
+            - AddResponseHeader=Access-Control-Allow-Credentials, true
+
+        - id: actuator-routes
+          uri: lb://api-gateway
+          predicates:
+            - Path=/actuator/**
+          filters:
+            - AddResponseHeader=Access-Control-Allow-Origin, https://musicanalytics.netlify.app
+            - AddResponseHeader=Access-Control-Allow-Methods, GET,OPTIONS
+            - AddResponseHeader=Access-Control-Allow-Headers, Content-Type
+            - AddResponseHeader=Access-Control-Allow-Credentials, true
+
         - id: recommendation-service
           uri: ${RECOMMENDATION_SERVICE_URL}
           predicates:
@@ -171,3 +218,14 @@ eureka:
     non-secure-port-enabled: true
     secure-port-enabled: false
 
+management:
+  endpoints:
+    web:
+      exposure:
+        include: "*"
+  endpoint:
+    health:
+      show-details: always
+    gateway:
+      enabled: true
+

.gitignore

@@ -54,4 +54,22 @@ eureka:
   instance:
     prefer-ip-address: true
     hostname: eureka-server
+  client:
+    registerWithEureka: false
+    fetchRegistry: false
+    serviceUrl:
+      defaultZone: http://localhost:8761/eureka/
+  server:
+    wait-time-in-ms-when-sync-empty: 0
+    enable-self-preservation: false
+
+management:
+  endpoints:
+    web:
+      exposure:
+        include: health,info
+      base-path: /actuator
+  endpoint:
+    health:
+      show-details: always
 

api-gateway/src/main/resources/application.yml

@@ -1,17 +1,17 @@
-# Use an official Node.js image to build the application
-FROM node:14
-
-# Set the working directory inside the container
+# Build stage
+FROM node:16-alpine as build
 WORKDIR /app
-
-# Copy the package.json and package-lock.json files and install dependencies
 COPY package*.json ./
 RUN npm install
-
-# Copy the source code and build the application
-COPY . .
+COPY . ./
 RUN npm run build
 
-# Expose port 3000 and set the entry point to run the application
-EXPOSE 3000
-CMD ["npm", "start"]
+# Production stage
+FROM nginx:alpine
+RUN apk add --no-cache curl
+COPY --from=build /app/build /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+    CMD curl -f http://localhost/ || exit 1
+CMD ["nginx", "-g", "daemon off;"]

eureka-server/src/main/resources/application.yml

@@ -4,6 +4,7 @@ import Recommendation from './components/Recommendation';
 import Statistics from './components/Statistics';
 import UserTracking from './components/UserTracking';
 import TrackingHistory from './components/TrackingHistory';
+import SystemStatus from './components/SystemStatus';
 import api from './api';  // Import the api module
 
 // Get the API_BASE_URL from process.env or default to your VM IP
@@ -38,6 +39,11 @@ function NavLink({ to, children }) {
             <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm1-7.41V8c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .28.11.53.29.71l3 3c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13 11.59z" />
           </svg>
         )}
+        {to === '/status' && (
+          <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-4h2v2h-2zm0-2h2V7h-2z" />
+          </svg>
+        )}
         <span>{children}</span>
       </Link>
     </li>
@@ -60,6 +66,7 @@ function App() {
             <NavLink to="/statistics">Top Tracks</NavLink>
             <NavLink to="/user-tracking">Add Track</NavLink>
             <NavLink to="/history">History</NavLink>
+            <NavLink to="/status">System Status</NavLink>
           </ul>
         </nav>
         <main>
@@ -68,6 +75,7 @@ function App() {
             <Route path="/statistics" element={<Statistics />} />
             <Route path="/user-tracking" element={<UserTracking />} />
             <Route path="/history" element={<TrackingHistory />} />
+            <Route path="/status" element={<SystemStatus />} />
             <Route path="/" element={<Recommendation />} />
           </Routes>
         </main>

frontend/Dockerfile

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+import api from '../api';
+
+function SystemStatus() {
+  const [status, setStatus] = useState({
+    loading: true,
+    apiGateway: 'Unknown',
+    eureka: 'Unknown',
+    services: {
+      recommendation: 'Unknown',
+      statistics: 'Unknown',
+      userTracking: 'Unknown'
+    }
+  });
+
+  useEffect(() => {
+    const checkStatus = async () => {
+      try {
+        // Check API Gateway status
+        const apiGatewayResponse = await api.get('/actuator/health');
+        
+        // Try to get services from Eureka
+        const servicesResponse = await api.get('/eureka/services');
+        
+        setStatus({
+          loading: false,
+          apiGateway: apiGatewayResponse.data.status || 'UP',
+          eureka: 'UP',
+          services: {
+            recommendation: servicesResponse.data.includes('RECOMMENDATION-SERVICE') ? 'UP' : 'DOWN',
+            statistics: servicesResponse.data.includes('STATISTICS-SERVICE') ? 'UP' : 'DOWN',
+            userTracking: servicesResponse.data.includes('USER-TRACKING-SERVICE') ? 'UP' : 'DOWN'
+          }
+        });
+      } catch (error) {
+        console.error('Failed to fetch system status:', error);
+        setStatus(prev => ({
+          ...prev,
+          loading: false,
+          apiGateway: error.message.includes('Network Error') ? 'DOWN' : prev.apiGateway,
+          eureka: 'DOWN'
+        }));
+      }
+    };
+
+    checkStatus();
+    // Check status every 30 seconds
+    const interval = setInterval(checkStatus, 30000);
+    
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="system-status">
+      <h2>System Status</h2>
+      {status.loading ? (
+        <p>Loading system status...</p>
+      ) : (
+        <div className="status-grid">
+          <div className={`status-item ${status.apiGateway === 'UP' ? 'status-up' : 'status-down'}`}>
+            <h3>API Gateway</h3>
+            <p>{status.apiGateway}</p>
+          </div>
+          <div className={`status-item ${status.eureka === 'UP' ? 'status-up' : 'status-down'}`}>
+            <h3>Eureka Server</h3>
+            <p>{status.eureka}</p>
+          </div>
+          <div className={`status-item ${status.services.recommendation === 'UP' ? 'status-up' : 'status-down'}`}>
+            <h3>Recommendation Service</h3>
+            <p>{status.services.recommendation}</p>
+          </div>
+          <div className={`status-item ${status.services.statistics === 'UP' ? 'status-up' : 'status-down'}`}>
+            <h3>Statistics Service</h3>
+            <p>{status.services.statistics}</p>
+          </div>
+          <div className={`status-item ${status.services.userTracking === 'UP' ? 'status-up' : 'status-down'}`}>
+            <h3>User Tracking Service</h3>
+            <p>{status.services.userTracking}</p>
+          </div>
+        </div>
+      )}
+      <div className="last-updated">
+        <small>Last updated: {new Date().toLocaleTimeString()}</small>
+      </div>
+    </div>
+  );
+}
+
+export default SystemStatus;

frontend/src/App.js

@@ -455,3 +455,67 @@ button:hover {
     opacity: 1;
   }
 }
+
+/* System Status Component Styles */
+.system-status {
+  background: #1a1a1a;
+  border-radius: 12px;
+  padding: 20px;
+  margin: 20px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.system-status h2 {
+  color: #fff;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.status-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.status-item {
+  background: #2a2a2a;
+  padding: 15px;
+  border-radius: 8px;
+  text-align: center;
+  transition: all 0.3s ease;
+}
+
+.status-item h3 {
+  color: #fff;
+  margin-bottom: 10px;
+  font-size: 1rem;
+}
+
+.status-item p {
+  font-weight: bold;
+  margin: 0;
+}
+
+.status-up {
+  border-left: 4px solid #4caf50;
+}
+
+.status-up p {
+  color: #4caf50;
+}
+
+.status-down {
+  border-left: 4px solid #f44336;
+}
+
+.status-down p {
+  color: #f44336;
+}
+
+.last-updated {
+  text-align: right;
+  color: #666;
+  font-size: 0.8rem;
+  margin-top: 10px;
+}

frontend/src/components/SystemStatus.js

@@ -34,6 +34,9 @@ management:
     health:
       show-details: always
 
+security:
+  enabled: false
+
 # Docker profile
 ---
 spring: