Challenge Overview
Welcome to Topcoder Data Stream App Enhancements. As part of this contest, we will be updating an existing Angular app.
Contest Details
Topcoder has started using Apache Kafka to log events that occur on the topcoder platform - stuff like when a contest gets created, when a member posts a discussion to a forum etc. There are multiple topics on the stream and each topic gets certain amount of data throughout the day.
We created a reactjs based app earlier where the user is able to view all topics in kafka and view messages in a selected topic. We would now like to make the following changes:
-
Currently, when the user selects a topic, the messages that the user can see are only the messages that arrive after the user selected the topic. We would like to instead see messages in the past too. Up to 20 messages in the past need to be shown after the user has selected a topic. As new messages arrive, the older messages can exist or be removed. Either approach is fine.
-
If the web page is idle for long, then we have observed that new messages are no longer visible even though a topic has been selected. We would like you to update the app such that either the socket connection does not close despite idleness, or if it has to close, then the app should be able to detect it and reconnect immediately once the app is active once again. In this case, any messages that were not captured should be shown (with the earlier 20 messages per topic limit applied).
-
Show some sort of a loading indicator when the user has selected a topic and the app is loading messages in that topic. Use a loading indicator when sending messages too, if needed.
-
When sending a message in the selected topic, the browser’s alert() function is used to display the status. Instead, show the message in the web page itself at a suitable place.
-
Sort the existing topics that the user can select in alhpanumeric order
-
Improve the User Interface. The current user interface isn’t to our liking and we would like the interface to look more like Topcoder Admin (in terms of the theme used) that you might also be able to access at admin.topcoder.com. We will also share a mockup in the contest forum.
-
The additional features on the user interface are that the user should be able to enter a number which indicates the number of messages in the past the user wishes to see. This number needs to be added to 20 and the total number of messages needs to be shown. Thus, initially, the user can see up to 20 messages in the past and then if the user, for example enters 10 in this field, the app fetches a total of 30 messages in the past.
-