Tengo la siguiente tabla que se llena al consultar un servicio back en Java a través del método obtenerLista() lo que quiero hacer es que cuando el servicio Java por alguna razon no este disponible, se encuentre down, el front mande una alerta de "Servicio no disponible" al entrar a la pagina
este es mi codigo en el component.ts
import { Component, ViewChild } from '@angular/core';
import { Control } from './Control';
import { ControlService } from './control.service';
import { MatTableDataSource } from '@angular/material/table';
import { Estado } from './Estado.ts';
import { DateAdapter } from '@angular/material/core';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { formatDate } from '@angular/common';
import { MatPaginator } from '@angular/material/paginator';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'prueba-angular-material';
displayedColumns: string[] = [
'idControl',
'cveEstado',
'comentario',
'horaInicio',
'fechaRegistro',
'botonSave',
];
estadoModel: Estado[] = [];
control: Control[] = [];
controlModel: Control = new Control();
estadoSeleccionado: any;
idSeleccionado: string = '';
comentIngresado: string = '';
horaIngresada: string ='';
fechaIngresada: any;
dataModel: any[] = [];
horaInvalida = true;
@ViewChild(MatPaginator) paginator!: MatPaginator;
constructor(
private controlService: ControlService,
private dataAdapter: DateAdapter<Date>
) {
this.dataAdapter.setLocale('es-MX');
}
ngOnInit(): void {
this.obtenerLista();
this.obtenerListaEstados();
}
//obtiene la lista del servicio
dataSource: any;
private obtenerLista() {
this.controlService.obtenerLista().subscribe((response) => {
this.control = response.data;
console.log("PRUEBA " ,response.data);
this.dataSource = new MatTableDataSource(this.control);
this.dataSource.paginator = this.paginator;
});
}
//obtiene la lista de estados para el select
private obtenerListaEstados() {
this.controlService.obtenerEstados().subscribe((response) => {
console.log("PRUEBA estados" ,response.data);
this.estadoModel = response.data;
});
}
//obtiene la cve del estado que se selecciona y su id
cambiarEstado(valor: Event, row: any) {
this.estadoSeleccionado = valor;
this.idSeleccionado = row.idControl;
console.log(' ID SELECC ' + this.idSeleccionado);
console.log(' ESTADO SELECC ' + this.estadoSeleccionado);
}
//obtiene el valor ingresado en el input coment y el id
changeValue(e: any, row: any) {
this.comentIngresado = e.value;
console.log(' INPUT COMENT ' + this.comentIngresado);
}
//obtiene el valor ingresado en el input hora, y el id
changeValueHora(e: any, row: any) {
this.horaIngresada = e.value;
console.log(' INPUT HORA ' +this.horaIngresada);
this.validarHora();
}
validarHora() {
console.log(' ENTRA A VALIDAR HORA');
const regex = new RegExp("^[0-9]{1,2}:[0-9]{1,2}$");
this.horaInvalida = !regex.test(this.horaIngresada);
console.log('HORA ' + this.horaInvalida);
}
//OBTIENE EL VALOR DE LA FECHA SELECCIONADA
onDateChange(valor: Event, row: any) {
this.fechaIngresada = valor;
console.log('FECHA SELECC ' + this.fechaIngresada);
}
//funcion para darle formato a la fecha internamente
formatDateToString(date: Date): string {
if (date) {
const format = 'yyyy-MM-dd';
const locale = 'en-US';
return formatDate(date, format, locale);
}
return '';
}
deshabilitarOpcion(cveEstado: string): string[] {
console.log("disabled ",cveEstado);
switch (cveEstado) {
case 'INP':
return ['FINISHED','PENDING'];
case 'En Proceso':
return ['Iniciado'];
default:
return [];
}
}
guardar(element: any) {
if (element.editar) {
console.log(`Desactivado para ${element.idControl}`);
element.editar = false;
if (this.comentIngresado == '') {
alert('No se han modificado campos');
} else {
console.log(' ENTRA ELSE ');
this.controlModel.cveEstado = this.estadoSeleccionado;
this.controlModel.comentario = this.comentIngresado;
this.controlModel.idControl = this.idSeleccionado;
this.controlModel.fechaRegistro = this.formatDateToString(
this.fechaIngresada
);
console.log('prueba fecha final ' + this.controlModel.fechaRegistro);
this.controlService
.updateCampo(this.controlModel)
.subscribe((data) => {
this.controlModel = data;
this.comentIngresado = '';
this.estadoSeleccionado = '';
this.fechaIngresada = '';
alert('Agregado correctamente');
});
}
} else {
console.log(`Activado para ${element.idControl}`);
element.editar = true;
}
}
}
service.ts
private baseUrl="http://localhost:8080/getLista";
constructor( private httpClient: HttpClient) { }
obtenerLista():Observable<any>{
return this.httpClient.get<Control>(this.baseUrl);
}
y mi controller en Java
@CrossOrigin(origins = "http://localhost:4200")
@RestController
@RequestMapping({"/getLista"})
public class ControlEController {
@Autowired
private ControlEService controlService;
@GetMapping
private ResponseEntity<?> listado() throws Exception{
ResponseEntity<?> list = null;
try {
list = controlService.listar();
//System.out.println("PRUEBA DATOS" +list);
}catch(Exception e) {
throw e;
}
return list;
}
serviceImpl
@Override
public ResponseEntity<?> listar() throws Exception {
Map<String, Object> response = new HashMap<>();
List<ControlEntity> list = new ArrayList<ControlEntity>();
try {
list = repository.listar();
} catch (Exception e) {
response.put("sucess", false);
response.put("error", e.getMessage());
return new ResponseEntity<Map<String, Object>>(response, HttpStatus.INTERNAL_SERVER_ERROR);
}
response.put("success", true);
response.put("data", list);
return new ResponseEntity<>(response, HttpStatus.OK);
}
Actualmente si el servicio esta abajo, marca esto en la consola del navegador, y es lo que quiero controlar