sse for alert predictions - kubernetes manifests

aa-tt · Jan 19, 2025 · 056e5cc · 056e5cc
1 parent fed9682
commit 056e5cc
Show file tree

Hide file tree

Showing 11 changed files with 88 additions and 31 deletions.
diff --git a/api/Dockerfile-api b/api/Dockerfile-api
@@ -0,0 +1,14 @@
+FROM maven:3.8.1-openjdk-17-slim
+
+WORKDIR /usr/src/api
+
+ENV ALLOW_ORIGINS=http://localhost:5001,http://localhost,https://*.gitpod.io
+ENV REDIS_HOST=redis-cache-weather-prediction
+ENV REDIS_PORT=6379
+ENV CONSUL_HOST=consul-ssm
+
+COPY . .
+
+RUN mvn clean package -DskipTests
+
+CMD ["java", "-jar", "./target/myday-0.0.1-SNAPSHOT.jar"]
diff --git a/api/src/main/java/life/outorin/myday/config/RedisConfig.java b/api/src/main/java/life/outorin/myday/config/RedisConfig.java
@@ -1,5 +1,6 @@
 package life.outorin.myday.config;
 
+import org.springframework.beans.factory.annotation.Value;
 import org.springframework.cache.annotation.EnableCaching;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
@@ -13,9 +14,14 @@
 @EnableCaching
 public class RedisConfig {
 
+    @Value("${redis.host}")
+    private String redisHost;
+    @Value("${redis.port}")
+    private String redisPort;
+
     @Bean
     public RedisConnectionFactory redisConnectionFactory() {
-        return new LettuceConnectionFactory();
+        return new LettuceConnectionFactory(redisHost, Integer.parseInt(redisPort));
     }
 
     @Bean

diff --git a/api/src/main/java/life/outorin/myday/controller/WeatherController.java b/api/src/main/java/life/outorin/myday/controller/WeatherController.java
@@ -11,6 +11,7 @@
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RestController;
 import org.springframework.web.reactive.function.client.WebClient;
+import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
 import reactor.core.publisher.Mono;
 
 import java.util.ArrayList;

diff --git a/api/src/main/resources/application.properties b/api/src/main/resources/application.properties
@@ -19,4 +19,6 @@ kafka.topic.report=weather_report_topic_0
 kafka.topic.data=weather_data_topic_0
 
 spring.cache.type=redis
-spring.data.redis.url=${REDIS_URL:redis://redis-weather-app:6379}
+redis.host=${REDIS_HOST}
+redis.port=${REDIS_PORT}
+#spring.data.redis.url=${REDIS_URL:redis://redis-weather-app:6379}
diff --git a/k8s-manifests/eks-weather-app.yaml b/k8s-manifests/eks-weather-app.yaml
@@ -112,7 +112,8 @@ spec:
     spec:
       containers:
       - name: api
-        image: ianunay/weather-app-api:v6
+#        image: ianunay/weather-app-api:v6 # this image for kotlin api
+        image: ianunay/weather-java-api:v3 # this image for java api
         ports:
         - containerPort: 8080
         env:
@@ -153,7 +154,8 @@ spec:
     spec:
       containers:
       - name: ui
-        image: ianunay/weather-app-ui:v2
+#        image: ianunay/weather-app-ui:v2 # use image with kotlin api and for non-SSE
+        image: ianunay/weather-app-ui:v6 # use image with java api and for SSE
         ports:
         - containerPort: 5001
 ---

diff --git a/k8s-manifests/gke-weather-app.yaml b/k8s-manifests/gke-weather-app.yaml
@@ -136,7 +136,8 @@ spec:
     spec:
       containers:
       - name: api
-        image: ianunay/weather-app-api:v6
+#        image: ianunay/weather-app-api:v6 # this image for kotlin api
+        image: ianunay/weather-java-api:v3 # this image for java api
         ports:
         - containerPort: 8080
         env:
@@ -177,7 +178,8 @@ spec:
     spec:
       containers:
       - name: ui
-        image: ianunay/weather-app-ui:v2
+        #        image: ianunay/weather-app-ui:v2 # use image with kotlin api and for non-SSE
+        image: ianunay/weather-app-ui:v6 # use image with java api and for SSE
         ports:
         - containerPort: 5001
 ---

diff --git a/k8s-manifests/kind-weather-app.yaml b/k8s-manifests/kind-weather-app.yaml
@@ -112,7 +112,8 @@ spec:
     spec:
       containers:
       - name: api
-        image: ianunay/weather-app-api:v6
+#        image: ianunay/weather-app-api:v6 # this image for kotlin api
+        image: ianunay/weather-java-api:v3 # this image for java api
         ports:
         - containerPort: 8080
         env:
@@ -153,7 +154,8 @@ spec:
     spec:
       containers:
       - name: ui
-        image: ianunay/weather-app-ui:v2
+#        image: ianunay/weather-app-ui:v2 # use image with kotlin api and for non-SSE
+        image: ianunay/weather-app-ui:v6 # use image with java api and for SSE
         ports:
         - containerPort: 5001
 ---

diff --git a/weather-prediction-ui/src/js/WeatherPredictionComponent.tsx b/weather-prediction-ui/src/js/WeatherPredictionComponent.tsx
@@ -52,7 +52,7 @@ const WeatherPredictionComponent: FunctionComponent = () => {
         </p>
         <div className='flex'>
           {city && (
-            <Suspense fallback={<div>Loading Weather Report...</div>}>
+            <Suspense fallback={<div>Loading Past Reports...</div>}>
               <DayAndWeatherReport city={city} />
             </Suspense>
           )}

diff --git a/weather-prediction-ui/src/js/daily/WeatherReport.tsx b/weather-prediction-ui/src/js/daily/WeatherReport.tsx
@@ -10,19 +10,23 @@ type Props = {
 const WeatherReport: FunctionComponent<Props> = (props: Props) => {
 
   const { city } = props;
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
 
   const [alerts, setAlerts] = useState([]);
-  const [temperature, setTemperature] = useState<Partial<Report> | null>(null);
-  const [reports, setReports] = useState<string[]>([]);
+  const [report, setReport] = useState<Partial<Report> | null>(null);
 
   useEffect(() => {
     getWeatherReport(city).then(
       (data: Report) => {
-        setReports(data.alerts);
-        setTemperature(data);
+        console.log("---widget one data---");
+        console.log(data);
+        setReport(data);
       }
     ).catch(
-      console.error
+      (error) => setError(error)
+    ).finally(
+      () => setLoading(false)
     )
   }, [city]);
 
@@ -43,26 +47,34 @@ const WeatherReport: FunctionComponent<Props> = (props: Props) => {
     };
   }, [city]);
 
+  if (loading) {
+    return <div>Loading Widget One...</div>;
+  }
+
+  if (error) {
+    return <div>Error: {error}</div>;
+  }
+
   return (
     <>
-      {reports && reports.map(report => (
-        <div key={report} className='mt-5 bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl'>
+      {report && (
+        <div className='mt-5 bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl'>
           <div className='mt-2 text-sm'>
             <p className='text-slate-500 dark:text-slate-400 bold'>
               Temperature:
             </p>
             <span className='text-slate-500 dark:text-slate-400'>
-              min: {temperature?.temp_min}
+              min: {report?.temp_min}
             </span>
             <span className='ml-5 text-slate-500 dark:text-slate-400'>
-              max: {temperature?.temp_max}
+              max: {report?.temp_max}
             </span>
           </div>
           <p className='text-slate-500 dark:text-slate-400 mt-2 text-5xl'>
             {alerts.join(', ')}
           </p>
         </div>
-      ))}
+      )}
     </>
   )
 }

diff --git a/weather-prediction-ui/src/js/forecast/DayAndWeatherReport.tsx b/weather-prediction-ui/src/js/forecast/DayAndWeatherReport.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FunctionComponent, useEffect, useState } from 'react';
-import { getWeatherForecastByDays, getWeatherReport } from '../../api/call';
-import { DayAndReport, Report } from '../../model/Report';
+import { getWeatherForecastByDays } from '../../api/call';
+import { DayAndReport } from '../../model/Report';
 
 type Props = {
   city: string;
@@ -10,40 +10,53 @@ type Props = {
 const DayAndWeatherReport: FunctionComponent<Props> = (props: Props) => {
 
   const { city } = props;
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
 
   // const [temperature, setTemperature] = useState<Partial<Report> | null>(null);
   const [reports, setReports] = useState<DayAndReport[]>([]);
 
   useEffect(() => {
     getWeatherForecastByDays(city).then(
-      (data: DayAndReport[]) => {
+      (data) => {
+        console.log("---widget two data---");
+        console.log(data);
         setReports(data);
       }
     ).catch(
-      console.error
+      (error) => setError(error)
+    ).finally(
+      () => setLoading(false)
     )
   }, [city]);
 
+  if (loading) {
+    return <div>Loading Widget Two...</div>;
+  }
+
+  if (error) {
+    return <div>Error: {error}</div>;
+  }
   return (
     <>
-      {reports && reports.map(dayReport => (
-        <div key={dayReport.day} className='mt-5 bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl'>
+      {Array.isArray(reports) && reports.map(dayReport => (
+        <div key={dayReport?.dt} className='mt-5 bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl'>
           <div className='mt-2 text-sm'>
             <p className='text-slate-500 dark:text-slate-400 bold'>
-              {dayReport.day}
+              {dayReport?.dt}
             </p>
             <p className='text-slate-500 dark:text-slate-400 bold'>
               Temperature:
             </p>
             <span className='text-slate-500 dark:text-slate-400'>
-              min: {dayReport.report.temp_min}
+              min: {dayReport?.temp_min}
             </span>
             <span className='ml-5 text-slate-500 dark:text-slate-400'>
-              max: {dayReport.report.temp_max}
+              max: {dayReport?.temp_max}
             </span>
           </div>
           <p className='text-slate-500 dark:text-slate-400 mt-2 text-5xl'>
-            {dayReport.report.mains.map(m => (
+            {dayReport?.alerts?.map(m => (
               <span key={m}>{m}</span>
             ))}
           </p>

diff --git a/weather-prediction-ui/src/model/Report.ts b/weather-prediction-ui/src/model/Report.ts
@@ -6,6 +6,9 @@ export type Report = {
 }
 
 export type DayAndReport = {
-  day: string;
-  report: Report;
+  dt: string;
+  alerts: Array<string>;
+  mains: Array<string>;
+  temp_min?: number;
+  temp_max?: number;
 }