Comparing the jobId between the api and the mat-table in Angular Material: A step-by-step guide

I currently have a mat-table displaying Jobs and their details such as jobId, executionId, status, etc. In addition to this, I am using a WebSocket to receive notifications about the status of each job - whether it is Running, Successful, or Failed.

However, one issue I am facing with my WebSocket setup is that it does not distinguish between jobs based on Projects or Users. This means that even if User 2 runs a project, I will still receive notifications for Job Running.

To address this issue, I want to implement a condition in my code so that when I click on the stop button next to a job in my list, the code will compare the jobId and status to determine if the job was successfully stopped via the WebSocket response.

Here is the HTML code snippet for my Stop Job Button:

 <button *ngIf="index === 0"
                    mat-icon-button
                    (click)="stop_exec_job(element)"
                    matTooltip="Stop Executing the Job"
                    [disabled]="element.status == 'Completed' || element.status == 'FINISH'"
                >
                    <i class="material-icons" style="color:red"> stop </i>
                </button>

The TypeScript function for stopping a job looks like this:

stop_exec_job(element) {
    if (element.status == 'RUNNING' || element.status == 'Pending')  {
        //Api call to stop Job Execution
        this.recommendationService
            .stopJobExecution(element.jobId, element.status)
            .subscribe(data => {
                this.executeJobStop = data;
            });
        this.displaySpinner = false;

        this.snakbar.statusBar('Job Execution Stopped', 'Success');
    } else {
        this.snakbar.statusBar('Job Failed to start', 'Failure');
    }
}

Below is the snippet of code showing how messages from the WebSocket are handled:

this.messageService.messageReceived$.subscribe(data => {
        let status: any = data;
        this.snakbar.statusBar(
            "Platform job status - " + status.message,
            "Info"
        );
});

I aim to only receive notifications from the WebSocket corresponding to the specific job that I have manually stopped by implementing appropriate if-else conditions. How can I achieve this?

Answer №1

I'm not entirely sure I grasp your request, and I'm unfamiliar with the return value of this.recommendationService.stopJobExecution(jobId,status), but perhaps you need to place the snackbar-action within the subscription block like so:

...
this.recommendationService
            .stopJobExecution(element.jobId,element.status)
            .subscribe(data => {
                this.executeJobStop = data;
                if(data.stopped) {
                    this.snakbar.statusBar('Job Execution Stopped', 'Success');
                }
            });
....

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using a custom ParcelJS plugin from the local directory

I am interested in developing a plugin to enable raw loading of a specific type of file with Parcel. According to the documentation, Parcel detects plugins published on npm with certain prefixes and automatically loads them along with their dependencies li ...

How to Use Angular to Identify Unauthorized Access with JWT Authentication

After following a few articles on implementing JWT authentication in Angular, I have managed to get everything working smoothly except for detecting 401 unauthorized errors. I would like to redirect the user to the login page when a 401 error occurs, but ...

When making a Javascript ajax get request, the returned JSON file is showing a readystate of 1 instead

I'm attempting to utilize this web service to fetch the city/state address for a specific zipcode. It seems like my understanding of ajax may be lacking. var info = $.ajax({ type: "GET", url: "https://ziptasticapi.com/28403", dataType: ...

The 'myCtrl' parameter is invalid as it is not recognized as a function and is currently set to undefined

I'm having trouble resolving this issue. I've implemented other controllers in the same manner that are working fine, but this specific one is throwing an error Error: ng:areq Bad Argument" "Argument 'myCtrl' is not a function, got un ...

Having issues with the functionality of jQuery. It needs to be able to override existing

I am trying to make it so that if yes2 == none, the element with class .bottomandroid is removed and instead, the element with class .cta is displayed. However, it doesn't seem to be working as expected. How can I fix this issue? else if (isAndroid) ...

Transfer the scroll top value from a textarea to a div element

In the parent div, there is a div and a textarea. I am attempting to synchronize the scrollTop value of the textarea with the div so that they move together when scrolling. The issue arises when I input text into the textarea and hit enter for a new line. ...

When you set the href attribute, you are essentially changing the destination of the link

UPDATE: I'm not referring to the status bar; instead, I'm talking about the clickable text that leads to a link. /UPDATE I've gone through a few similar posts but couldn't find a solution. I have a link that needs to be displayed. www ...

Working with attributes in AngularJS directives

Building an overlay (or modal window) in AngularJS has been on my mind, and I've made some progress with the html/css layout. Here's a sneak peek at what it looks like: <section class="calendar"> <a open-overlay="overlay-new-calenda ...

Upon installation, the extension that replaces the new tab fails to detect the index.html file

edit: Check out the Chrome Extension here Edit 2: It seems that the recent update containing the index.html file was not published due to Google putting it under revision. Apologies for forgetting to include the index.html file in the upload zip, as I ...

Steps for adding Node modules to a Nexus private repository

Running my organization's private Nexus npm repo, all packages are installed on my local machine through the internet. I want to store all packages on my Nexus private repo and have successfully uploaded them using the npm publish command. However, wh ...

Issue with HTML5 video not displaying poster image after using .load() method

I am facing an issue with my video implementation where the poster image is not returning after exiting full screen mode. I have a video with overlay content that requests full screen when the user clicks a custom play button. When the user exits full scre ...

At what point does the Express req.query variable receive various types of data?

I've noticed that the req.query query parameters can be of type string, string[], QueryString.ParsedQS, or QueryString.ParsedQS[]. However, in my experience, I have only encountered strings when using req.query. Here are some questions I have: Can y ...

Utilizing TypeScript for Dynamic CSS - A Guide to Retrieving Parameters from the `useStyles` Method

I'm attempting to retrieve the state of my component within the useStyles method that was created using the react-jss package. I have noticed that the implementation seems accurate for javascript, but not for typescript based on my research. import { ...

Angular 5: Ensure Constructor Execution Occurs Prior to Injection

I am working with a file that contains global variables: @Injectable() export class Globals { public baseURL:string; public loginURL:string; public proxyURL:string; public servicesURL:string; constructor(platformLocation: PlatformLocation) { ...

What methods can be used to block the input of non-numeric characters in a text field?

I stumbled upon this particular inquiry. Although, the majority of responses involve intercepting key presses, checking the key code, and halting the event if it does not match an acceptable key code. However, there are some issues with this approach. ...

Angular 5 authentication token validation

I'm feeling a bit lost when it comes to creating a proper header for a simple Get request in Angular 5. Here is what I'm trying to achieve in Angular: https://i.sstatic.net/53XMi.png This is my current progress: getUserList(): Observable&l ...

The Google Maps feature is not appearing on the webpage as expected

I'm currently working on a website that features a footer with a Google Map. The homepage displays this footer without any issues: However, in other pages, I've implemented the footer by calling it from an external file using jQuery as shown bel ...

Extract distinct values from a particular field and add them to a new array using an array of objects

I need a solution for the following issue. I attempted using underscore and groupBy, but it is producing an object of arrays with unique names inside an array. However, I am not satisfied with that result. Instead, I want something like the example below. ...

Error encountered in React due to a syntax issue with parsing JSON from the response received

The structure of my node.js express server is as follows: const express = require('express'); const app = express(); const port = process.env.PORT || 5000; app.listen(port, () => console.log(`Listening on port ${port}`)); app.get('/exp ...

When programming in JavaScript, you can determine if a condition is equal to any value within

Hey all, I'm facing a bit of an issue with my if statement. I have so many possibilities that there are way too many || operators in my code. I was thinking, would it be feasible to store all the potential values in an array and then simply check if ...