Showing status of a batch update operation using WebApi - angularjs

I need to know how to update UI with the status of a batch update operation. For example i am sending a request to WebApi to update multiple records (could be any number of records), now i want to show the status of each record to client side.
Please suggest me the best way of doing that. I am using WebApi, Angular. I am thinking about implementing SignalR that can update Client UI with respect to the status but is there an another way of doing that ??

signalr may be overkill for what could be a simple polling request to your api.
It's a little ambiguous as to exactly what it is you are doing with your batch update operation, but since your looking to get status back I'm going to assume it's a long slow operation that your not waiting on a response for in the initial request.
Web api has REST principles baked into it from the start so I imagine your batch update operation is using a PUT with a set of objects that need to be updated. If so you could simply request those objects back from your api to check their state and see if the operation has updated them yet.
If your not doing a simple PUT on an entity and it's more like a POST to submit a batch operation you should persist the operation entity and return a reference to it in the initial call then subsequently poll for that operation by id to get its current status.
signalr might let it feel a little more realtime by immediately pushing completed events down to the client but it can also bring a lot more overhead for what you are trying to achieve

Related

Display realtime data in reactjs

I'm sending data from my backend every 10 seconds and I wanted to display that data in reactjs. I've searched on the net to use socket.io to display real-time data. Is there a better way to use it?
If you're dead set on updating your data every 10 seconds, it would make more sense to make a request from the client to the server, as HTTP requests can only be opened from client to server. By using HTTP requests, you won't need to use socket.io, but socket.io is an easy alternative if you need much faster requests.
Depending on how you are generating the data being sent from your backend, specifically if you are using a database, there is most likely a way to subscribe to changes in the database. This would actually update the data in realtime, without a 10 second delay.
If you want a more detailed answer, you'll have to provide more detail regarding your question: what data are you sending? where is it coming from or how are you generating it?
I'm working on an autodialer feature, in which an agent will get a call when I trigger the button from the frontend (using react js language), and then automatically all the leads in the agent assigned portal will get back-to-back calls from agent number. However, because this process is automatic, the agent won't know who the agent has called, so I want to establish a real-time connection so that I can show a popup on the frontend that contains information about the lead who was called.

Pattern/approach for frontend-backend data integration and fetching

I have been applying a pattern in some small apps I worked on, which next tools:
Frontend: ReactJS, Redux, Firebase (only authentication stuff)
Backend: Node with Express and the library for the database I was using (mysql or mongo)
The flow used to be like this:
Page loading and validating if user is signed in. If yes, fetching app data with backend. If not, just checking if user is not on a protected route and then let him navigate (create account, reset password, etc)
When fetch occurs and user signed in, backend send all data from that user (categories, stores, products, profile and any other info to let application run fluid) so when navigating there is not continuously loading to fetch each chunk of data. This also happens like this because is not a big amount of data (at the beginning), lets say maybe 1 or 2 stores with 15-20 products each one.
When updating data like changing product name, price or any kind of data mutation, the frontend send a request to the backend and then the update is done and a response of success true/false is sent as an answer for the request.
Let's say the previous step is a store creation. So, the frontend receives the success response and then dispatch an APPEND_STORE event to redux store to catch the new store with its data (only the ID + other data which is created on the backend is received as response on http request, data which was generated at the frontend is taken from the app itself) and append it to the stores array and then set the store array object again.
The reason why the previous step occurs like that is to avoid the backend first make the update and then make a new query to get again the new register (ej: create new store request -> backend creates the store and retrieve the new ID -> backend find/query the new register with its ID -> answer the data)
So, basically the question is about the pattern. So far this pattern had not give big troubles by now but I'm pretty sure there are some details I haven't seen from this point and also I think there are recommended ways to handle this that I couldn't find on internet yet.
I would like to know the best approach for this (or at least a better approach from the above) in order to implement it to bigger applications to handle more users and data which will increase as time goes.
Main questions:
When loading, should the backend process all data and send it to the frontend or should send minimal data to let the application begin and then send as navigation requires? I was also thinking when data grows up send a chunk of data with limit of 10/20 registers to keep the same approach but want to know the standard/correct way to handle it.
When a data validation fails on backend, should the backend answer with an OK status code with a key called success: "true/false" and additional data to handle this on the frontend, or should the backend answer with an error status code?
As I said, backend only answer with the data created by backend itself (ID, creation date, etc). Should the backend answer only with this or should backend make a new query to get full register and send it as response? Initially took this approach in order to optimize resources (minimum quantity of request and data sent by response). I'm also thinking maybe this is a dumb approach because today's world have a lot of resources so that difference should not change performance of anything. Also, with this answer my behavior on redux will change. Do you have any comments also from this redux approach?
Is it ok to make a query to database to first update and then another query to fetch all registered again? I know databases are created to handle multiple queries but I don't know if there are some cons to take on mind when doing like this.
Really thanks!

Azure Logic App - Manual trigger with user entered parameters

I've got a logic app that I want to be able to run ad hoc and specify the parameters when run. The closest manual trigger i could find was the HTTP request.
As a workaround, I'm calling it from postman where the JSON body can be defined.
While postman works, I'm looking for a way to trigger the app from within azure and provide the JSON body.
Thank you
Actually there are many way to trigger the logic app and process the json data.
You could try with service bus trigger or blob trigger, the below is my test with servicebus. I send a json message with Service bus Explorer. Note: in the logic app the json data is encoded with base64.
The below is the result.
However from the action you could find it has a Interval property to set, it means it may be not triggered immediately. And mostly other triggers need to set the Interval, so if you want to trigger immediately, suppose the HTTP request is the best.
My workaround is a Recurrence trigger every 1 minute and let it kick off and then edit the trigger to every 1 month and save it. Then I disable the Logic App to make sure it does not trigger automatically.

Angularjs 1 - one request, multiple responses

I have a page with multiple widgets, each receiving data from a different query in the backend. Doing a request for each will consume the limit the browser puts on the number of parallel connections and will serialize some of them. On the other hand, doing one request that will return one response means it will be as slow as the slowest query (I have no apriori knowledge about which query will be slowest).
So I want to create one request such that the backend runs the queries in parallel and writes each result as it is ready and for the frontend to handle each result as it arrives. At the HTTP level I believe it can be just one body with serveral json, or maybe multipart response.
Is there an angularjs extension that handles the frontend side of things? Optimally something that works well with whatever can be done in the Java backend (didn't start investigating my options there)
I have another suggestion to solve your problem, but I am not sure you would be able to implement such a thing as from you question it is not very clear what you can or cannot do.
You could implement WebSockets and the server would be able to notify the front-end about the data being fetched or it could send the data via WebSockets right away.
In the first example, you would send a request to the server to fetch all the data for your dashboard. Once a piece of data is available, you could make a request for that particular piece and given that the data was fetched couple of seconds ago, it could be cached on the server and the response would be fast.
The second approach seems a more reasonable one. You would make an HTTP/WebSocket request to the server and wait for the data to arrive over WebSocket.
I believe this would be the most robust an efficient way to implement what you are asking for.
https://github.com/dfltr/jQuery-MXHR
This plugin allows to parse a response that contains several parts (multipart) by having a callback to parse each part. This can be used in all our frontends to support responses for multiple data (widgets) in one requests. The server side will receive one request and use servlet 3 async support (or whatever exists in other languages) to ‘park’ it, sending multiple queries, writing each response to the request as each query returns (and with the right multipart boundary).
Another example can be found here: https://github.com/anentropic/stream.
While both of these may not be compatible with angularjs, the code does not seem complex to port there.

ElasticSearch asynchronous post

I'm posting data on my ElasticSearch database.
I've noticed that data is not immediately available, it requires some milliseconds to show up in a GET request. I can live with that (after all, the calls are asynchronous so this behavior is expected) but in my test code I need to POST some data and immediately after retrieve it. At the moment I'm using a sleep(5) just to be sure data is available but how can I synchronize with the db?
To ensure data is available, you can make a refresh request to corresponding index before GET/SEARCH:
http://localhost:9200/your_index/_refresh
Or refresh all indexes:
http://localhost:9200/_refresh

Resources