Outreachy’2021 with Fedora Community

Hello everyone, here is my blog where I will be describing my overall work which I did weekly-wise in my project Mote (https://github.com/fedora-infra/mote).

The project Mote (or Meetbot Logs) is a web service that aggregates and distributes summaries, minutes, and logs of meetings that takes place in an IRC or Matrix channel for the Fedora Project. The web service has the following features

• Chronological lookup of meeting summaries, minutes, and logs using an interactive calendar view
• Snappier loading up of content due to application-like interface and behavior of the web service
• Channel-wise and date-wise distinction of meeting summaries, minutes, and logs within modals
• The faster intuitive search of meeting summaries, minutes, and logs using asynchronous fetching

OBJECTIVE:-

• Create and Structure the “about” modal page and write about the purpose of the application and implement various UI/UX and design features. Then design a new developing look for the website and decide how the current under-used top bar can be improved. Then fix the backend code and add the scripts to build the server-side index for meeting channels, dates, and times and ultimately document the work and the maintenance of the website done till now and work on suggested reviews from mentors after the progress evaluation.
• Add fedora messaging to keep track of recent meetings with notifications/ toasts. Add the ability to link to specific messages in meeting logs/minutes and build per message hyperlink for meeting logs. Improve search functionality by creating a script to index meeting data and make the search faster.
• Creating and managing systemd services and units for making and administering servers. Work on frontend templates to show translations from the weblate. Decide on testing tools to be used and add test updates. Package the software application using rpm or containers. Write deploy configurations for automatic deployments on OpenShift and document the whole work done during 3 weeks, deploy the
  application on production and Buffer period for unexpected issues

WORK SUMMARY (WEEKLY)

Week 1: Worked on the landing page of the Mote project and its design and UI. I implemented a calendar from scratch in Vanilla JS. Used an existing customizable calendar plugin called fullcalendar.io. Used the calendar to fetch data on all the meetings that happened in the last month. Once the calendar page loads, a function is called to fetch data and render UI. However, it will display the recent meetings fetched in the calendar as events of that particular date. Made two views — week and month. In the week view, it will display all the meetings week-wise in the current month. Also worked on today button which will become active in the week view once navigating to the current date. On clicking the meeting, it will redirect to the meeting details page that shows the minute.

Week 2: Adjusted the aspect ratio to widen the navbar controls to occupy the width taken up by the container for the calendar. But as it varied and changed according to the screen size, I had to do window reloading and set up the width so that the scrollbar gets removed and the calendar width remains the same on all the screens. I used bootstrap theming and font awesome to change the colors of the month, week, today, arrow buttons, and the meetings block. I set it according to the matching theme of the Fedora display theme. Also when the calendar was being loaded, the meetings fetched used to display very late then to which I first rendered the empty calendar and then use the indeterminate spinner that is rendered by default when the modal is loaded up to be replaced or removed when the contents have arrived.

Week 3: Worked on the search bar where in the dropdown I had to display the list of the minutes fetched. It calls the function from the backend as we type the characters and displays results automatically in the dropdown. By default, 5 meetings in the dropdown are shown along with a ‘show more’ button which opens to the modal of the list of meetings along with details like date, time, and channel name.

Week 4: Did various changes and modifications to the implementation of the search bar. For the display of the meetings list in the drop-down, I limited the suggestions to just the most recent five results with a button to show more button with giving information on when these meetings took place like the date and exact time, and in which channel these meetings are present. Disabled the browser-induced search suggestions. Pointed the results to the meetings available locally with the current deployment of Mote and not the meetbot raw site. Placed the search bar outside the calendar above the card. Made the button a submit element, so it’ll be automatic, and used these suggestions to trigger automatically when typed and not when clicked on the button only. The search acclimatized itself to the newly entered text so the trigger is made whenever the text elements in the search bar change. Then I induced a delay which is very small, like a few hundred milliseconds so that it is not perceptible to the user and this method is called debouncing. Then requested the backend after 3 or 4 characters has been typed only to induce the search results, for this I counted the number of characters in the field and only made requests if the string length is more than 2 or 3 characters in the search string function.

Week 5: Sorted the end results where the latest meeting will come first on the list and the meetings which have happened before will come after that. Also, the requested return now doesn’t show the occurrences of the same meeting and is sorted by date. Then I moved the search bar to the navbar, as the last element there beside the About link. The way the search operates stays the same and changed only the position as the calendar was moved on by a bit hence in a default view, it would have to be scrolled down a bit to see the calendar in its entirety which was not looking good. Instructed users in the search bar placeholder (in Search meeting logs) to enter four or more characters for searching meetings. The text typed is “Enter four or more characters to search” which is to ensure that the people are not left to imagine if the search functionality is working properly or not when they end up entering only two or three characters.

Week 6: Changed the highlighted color corresponding to Bootstrap’s Primary Blue and picked a lighter tint of Fedorable Blue color for adding that. Sorted the search results which turn up in the modal in the reverse chronological order of their occurrences and now the recent meetings turn up first and the older meetings follow after that. Changed the font style and font size of the meeting's name and added another class of that so that it overrides the CSS properties and more letters get shown up. Corrected the alignment of the search bar with text, logo, and button. Made the search bar disappear as it is not center aligned and does not look nice in the restricted width view by changing the position of the collapse button to get everything to work. Also added the spinner so that the user gets to know the meetings are being loaded on searching and then inserted the text as “No meetings found” if the user doesn’t type appropriate results. Overall now the search bar fulfills all its core functionalities.

Week 7: Modified and did some more changes in the search bar like changing the text of the placeholder to “search meeting logs” and in the dropdown, it will “Enter 4 or more characters” so as to let the user know that he has to type at least 4 characters to display the meetings list. Adjusted the height and width properties of the logo and the inline nature of navbar elements so as to keep the search bar, logo, text, and button in an aligned position with fixing the CSS styles.

Week 8: Did the meetings by teams section where first I created a static list of all the teams as given by the design team in the mockup prototype and then created a separate file in a YAML file for that to keep and list all the teams along with the associated meeting names. The teams were 23 and I listed all the meeting names for each team like an associative array. I had to go through the meetbot link given in the project and search all meeting names of all the teams and create a list of that. Listed all the meeting names of all the 23 teams and for each team like an associative array. Each team will have all the meeting names. Then I created a new “view” in the backend file called main.py where a “view” is a python function that returns HTML content (or JSON, or whatever browser can use). Used the @main.get(“/”) annotation before the function name and then put a GET request for the “/” path, the function ran just below it, which is the mainpage(). Created a new function, that will read the team YAML file, then return a new HTML page with everything in it. Then I added the same kind of annotation, but with a different path like @main.get(“/teams”)
and for sending HTML content, I used the function “render_template” and the first argument of this function is a template file which I created in the template directory called teams.html page. Created the function to read the teams and meetings data from the YAML file and then after reading, I send the data to teams.html page so that it can be rendered. For this, I installed pyyaml library. The render_template function takes extra variables as arguments, and all those are then available in the template file. Then I passed the team variable (with all the data from the YAML file) and used it directly in my template file. Then I formatted this data to display all teams in a list with all the required CSS styles needed for the right side of the list, with all the numbers and dates, and made the overall design of the page. Used Python data to HTML table for loop for displaying the data in the form of a table in the HTML page.

Week 9: Worked on the link in the navbar of Mote and connected the mains and teams page so that the user can easily navigate to the meetings by Teams page and don’t have to move to the URL. Implemented a way for storing some text from individual teams to outline where the meetings take place themselves or have a field where they can post their meeting link and extend from addressing text chat meeting logs also to video recording but then to remove the confusion of different links being pasted, I stuck with the existing design. Added a hover over the recent or total meeting minutes columns so people know what those numbers are. Worked on a new “About” page with information such as who has contributed to the project, profile picture, link to the GitHub profile, etc using bootstrap which will fetch all the contributors list along with the description about the Mote and its purpose. Created a fresh new HTML page (about page) from scratch where I created a container and a card body containing the heading mote, its one-liner description, and then the features of the mote project. Created an unordered list containing the list of all the contributors who have contributed to this project until now. Then used bootstrap cards to display contributors' names along with their GitHub usernames and profile picture with the GitHub account link. Using a combination of grid and utility classes, I made cards horizontal in a mobile-friendly and responsive way. The grid gutters were removed with .g-0 and the use of .col-md-* classes to make the card horizontal at the md breakpoint. Then inside the card, placed the footer inside the div element as placed inside the other templates. However, the link to the GitHub account is pasted inside the image src element. Did some modifications to the template according to the suggestions and reviews by the mentor. Earlier I had used a horizontal card layout to display each contributor but then he suggested I use the Bootstrap grid cards system and keep all the contributors in sections to display them. Then I added .row-cols classes in the first main part to control the no. of grid columns wrapped around the cards which are displayed per row. So overall it split four cards to equal width across multiple rows. Then I added a link to this page in the navbar so that the page can be directly accessed and then added an entry point for it in main.py. Then I used the main page as a template, instead of starting with a blank page which I did earlier so as to start with the same “theme” as all the others pages on this site. Also added CSS to the page in fragment.css. Worked on the new footer for the statfile template.

Week 10: Worked on socket.io and WebSockets where the data needs to be fetched to the browser and API calls are made which regularly pool datagrepper for the completed meeting, and then using WebSocket to send the update to the web browser, and then display a small notification of the recent meetings. Included Socketio’s background task feature to start the function and a threading Event to terminate the function when set to True despite any sleep/wait cycle. Formatted the date strings in the meetings list and set up a new date format. Implemented backend issues like WebSockets, toast popups, and in-built flask configuration modules. Also worked on improving the frontend part of the website like the footer, the color of the pages and the channel hyperlink on the top bar. Added a footer to the 404 page’, I fixed the card component by keeping all the contents of the main page inside it so that the footer gets aligned downwards in its original position and gets stuck to the end of the page and touches it and then also corrected the long padding of the page. Created separate config file for frequently used configuration’, I used raw string for regex expressions and replaced this in every file. Also used formatting strings everywhere to make string interpolation simpler. Creating WebSockets and toast popup for the recently finished meetings’, I rebased the branch here resolving all the conflicts that came in the way (mainpage.html and main.py) and did all the changes as said, and added the flask socket-io dependency.

Week 11: Removed the buttons from the center of the page and placed them as links in the navbar. Removed the Fedora logo by editing it in the image editor then and placing it in the navbar. Removed all the contents from the body of the main page so that the calendar gets integrated and set up with the search meeting logs bar for the recent meetings on the main page. Made the calendar for the main page and format the events (meetings) in the toast-UI calendar by creating a python function (in fetch_recent_meetings), or reformating the list directly in js. For this implementation and checking, I first inserted a fake event at first, so that we can see how it looks in context and if it needs some styling to fit better.

Week 12: Worked on Poetry (Project Management and Dependency tool) which is a tool for dependency management and packaging in Python. It allows the declaration of the libraries of the project and manages (install/update) them. Replaced the setup.py file and requirements.txt file which was earlier managed by the pip packaging tool with pyproject.toml file which will list all the dev-dependencies being used in the project along with their versions. I also wrote the dependencies and scripts for it along with the black and isort test. Maintained the Readme and documentation file. Also changed the setup instructions in the Readme file and wrote about the installation steps using poetry(dependency management and packaging in Python) so that the new contributors and developers will now have to set up the project “Mote” using poetry.

During my Outreachy period, I addressed 15 major Issues(mostly new feature addition and enhancements/modifications), with 15 Merge Requests and 400+ commits.

All the issues addressed in the period can be found here

All the MRs made can be found here

The MRs made (MERGED) can be found here

Finally, I would like to thank my mentors Akashdeep Dhar and Francois Andrieu for their immense guidance and support throughout the Outreachy period and for all the valuable feedback and suggestions. Their timely review of my contributions and answering my queries have really helped me grow and do good work.