mbucc/320-s22-track2

UMass 320, Spring 2022

320-s22-track2's Issues

Create Title. + timeframe component

Single component with Title "Hello, [Name]" on left and a dropdown on the right

Drop down should be default to 1 hour and provide some other reasonable options up to 3 days ago.

(we should ask client what options they would like)

Download React, Springboot, MySql, Cypress, Jenkins

Finish demo presentation

Download and install maven and Springboot

1. Installing brew (if you haven't)
2. Installing Maven
   https://docs.spring.io/spring-boot/docs/current/reference/html/getting-started.html#getting-started.installing.java.maven
3. Installing SpringBoot CLI
   https://docs.spring.io/spring-boot/docs/current/reference/html/getting-started.html#getting-started.installing

Create priority and category filter components

• create two components: Priority and Category
• integrate into LogEvent.js page

Finish User Stories Final Doc

Ask client about timeframe options

The client specified setting 1 hour as the default, but what other options would he like?

Create time filter component

• create time.js component
• integrate into the LogEvent.js page

Finish Demo Presentation

[Indigo] Weekly Sprint 1 (02/28/2022 - 03/03/2022)

Description

We are going to finish the building of root code base this week with other front-end teams.

Weekly Goals

• Discuss the framework configuration with other UI teams.
• Prepare for the mini-demo.
• Set up the root code base for front-end.
• Write an installation guideline for team members (also other teams) to properly set up environment.

Finish Demo 2 Presentation

Repo Setup confirmation

Reach out to other teams to coordinate who will be setting up the project in the repo

Download and install React, Next.js, Material UI

Get familiar with React and Next.js as well as Material UI. Get all three onto your machine before next week.

Create wiki for Team Sesame

Create a page for your team in the wiki section on GitHub. Your page should include your team name, your team member's name, role, and GitHub ID.

Create Nav Bar Component

Navigation bar component allowing users to toggle between dashboard, business process, and log events

Default tab should be dashboard

Demo Presentation

Aayush - finish React Demo
Eric - finish Log Events Mockup

[Indigo] Get familiar with the sample code base.

Description

We are not really working on it right now, but all of us need to get familiar with the sample code base, have frameworks up and running, and do some basic plays with Next.js and MUI.

If you have any question, you can post it on our slack so we can deal with it together before we really get started.

Sample Code Base: https://github.com/david-fisher/320-S22-Track2/tree/indigo-sample-code-base

Don't forget to read the entire README in sample code base!

Should finish before: March 8, Tuesday.

Detailed Tasks

When you finish a task, just tick your name up.

When you are working on the following steps, make sure to read the README at Indigo Sample Code Base. It has step-by-step instruction to tell you how to do it.

• Make sure that node.js and npm are installed locally.

  • Shoji
  • Peter
  • Aishwarya
  • Yan
  • Erfan

• Clone the repository and install dependencies.

  • Shoji
  • Peter
  • Aishwarya
  • Yan
  • Erfan

• Run it on (http://localhost:3000/) locally

  • Shoji
  • Peter
  • Aishwarya
  • Yan
  • Erfan

• Play with it! Change things and probably have fun with it~ (Optional)

  • Shoji
  • Peter
  • Aishwarya
  • Yan
  • Erfan

Download React, Springboot, MySql, Cypress, Jenkins

Create Team Wiki for Team Indigo

Create a page for your team in the wiki section on GitHub. Your page should include your team name, your team member's name, role, and GitHub ID.

Download and install VSCode

Share figma with front-end teams

Refine and Complete the Testing Outline

Finish Demo Presentation

Follow up with Chris on desired components

Create Application and Process/Service filter components

• create Application and Process/service filter components
• integrate into LogEvent.js page

Create mockup design of dashboard interface

Add sorting functionality to column headers

• make it so that, when column headers are clicked (start time/end time, severity and priority perhaps), the table results become sorted in ascending or descending order (descending by default)

[BPRootView] Make a basic working prototype of AdjustableFrame.

Description

Finish up a basic working prototype allowing users to simply hold & drag to adjust the frame.

It is a challenging task so no worries! Take you time!

Expected Goal

• When user hold the bar and drag, the frame edge should follow the cursor.
• When user release the bar, the frame edge should be in its final state persistently.
• When user refresh the page, the adjustment should be reset (no memory included for now).

Create wiki for Team Web Warriors

Create a wiki page for your team in the wiki section on Github. It should include the team name, your team members' full names, roles, and Github ids.

Finalize design document

Create timeline components

Timeline component displays a line graph given the dashboard timeframe.

Includes:

• total logs
• total errors
• total warnings

Requirements:

• Timeline component (generalized for each timeline)
• Timelines component (contains all 3 timelines)

Spring [03/11 - 03/23]

• Finish UI components
• Design component structure + data passing
• Combine UI components
• Create more realistic test data for display
• Implement nav functionality
• implement timeslot functionality
• Add refresh button and logout button to UI

[Indigo] Finish basic work assignments.

Description

We separate jobs into different parts, sections, and components. To start our works and to make sure that everyone has their own works, I will list out all parts we are going to do and some memo about them.

If you want to work on one of these, just tell me on slack and I can arrange them reasonably.

If you have no idea, I will gently assign one to you, and no worries! I will help and guide you through if you are having a hard time finishing it! Alright!

Works

Every work related to Business Process View will have a prefix "BP" to be distinguished from others.

BPRootView

The root view of Business Process View. It includes the basic layout structure of Business Process.

It basically contains an adjustable frame for two sub-views and data transferation interface for connecting two sub-views.

• BPAdjustableFrame - Aishwarya Rajapur
  • It is a frame component that you can adjust the size between two sub-views (to make one larger, or to make another larger). You can reference here if you need to.
• Use states and hooks to connect BPTreeView and BPActivityView together. - Aishwarya Rajapur, Erfan Fathalizadeh
  • Two sub-views will expose onChange property so you can get the information inside those views.

BPTreeView

• BPTreeFilterComponent - Yan Chen, Lingxi Li
  • The filter layout of BPTreeView.
  • When "apply" button is clicked, it will call onChange property to transfer the data into BPTreeView.
  • It should support data picker with a customized time interval.
  • (TBD) It should support keyword search on business domains. It will be separated into a different component, so no worries on this one!
• BPTreeMapComponent - Yan Chen, Lingxi Li, Peter Tran
  • The map view of BPTreeView.
  • It supports expand and collapse, including "all" and "each".
  • When the list of opened business process views are changed, call onChange property to send the information back to BPTreeView.
  • It should also support a right click menu.

BPActivityView

• BPActivityFilterComponent - Shoji Rinaldi, Lingxi Li
  • This will be similar to the tree filter component but some different functionalities.
  • When the sorting is changed at BPActivityView, it will send a list of sorted columns into the BPActivityFilterComponent, and BPActivityFilterComponent will arrange the sorting order (by having BPSortingOrderComponent) and call back when "apply" is clicked. The sorting order component is separated from BPActivityFilterComponent.
• BPSortingOrderComponent - Lingxi Li
  • It allows drag-and-drop to adjust the order of the sorting.
  • When anything is changed, use onChange property to call back to the BPActivityFilterComponent and it will send to the BPActivityView when it is applied.
• BPActivityTableComponent - Shoji Rinaldi, Lingxi Li
  • The table view of BPActivityView.
  • It supports adjustable column width, and sorting.
  • The algorithm of sorting part will be handled outside the table view, so this table view only displays the things and send out sorting request.

UI Fine-tuning

• In the end, we need to make the design of each part unified by having someone fine-tuning them. - Lingxi Li
  • Adjust all designs and details in all components to make them look clean and unified.
  • Follow the design language of our prototype to fine tune the final UI into optimal.

Create Wiki for Team Code Apes

Under the Wiki tab on GitHub, create a page for your team named "Team [TEAM_NAME]". This page must include the name, role, and GitHub ID of each team member.

Research about JDBC Connector and how to connect to a Mysql Database

https://www.codejava.net/frameworks/spring-boot/connect-to-mysql-database-examples

Refine user stories

[Indigo] Sprint 3 Roadmap (03/11/2022 - 03/24/2022)

Description

Our main goal for this sprint is to bring the filter into reality and also finish building up necessary components.

Code base branch: indigo-dev.

IMPORTANT: Create a new branch based on this branch and have a name in this format: indigo-dev-[your_first_name]. Check development standards. If you are having trouble doing this, feel free to ask me!

In the end of this sprint, we are going to merge our completed progress into the branch indigo-dev to make the demo.

Roadmap Checklist

• 3001. BPDatePickerComponent dropdown prototype - @lilingxi01
  • Going to implement next week: Shortcut commands.
• 3002. BPDomainSelectionComponent dropdown prototype - @lilingxi01
  • Going to implement next week: Tab indexes.
• 3003. BPSeveritySelectionComponent prototype - @lilingxi01
• 3004. BPRootView prototype with adjustable bar (internal prototype) - @aishwaryar12309 , @efathalizade
• 3005. BPActivityTableComponent prototype - @srinaldi-umass , @lilingxi01
  • This is moved to the next sprint for a work load consideration.
• 3006. Implement the Expand All and Collapse All functionalities - @limbo-yan , @nekomi2
• 3007. BPTreeFilterComponent state values integration - @lilingxi01 , @limbo-yan
  • This is moved to the sprint when we are finally integrating the values between TreeFilter and TreeMap.
• 3008. BPActivityFilterComponent state values integration - @lilingxi01 , @srinaldi-umass
  • This is moved to the sprint when we are finally integrating the values between ActivityFilter and ActivityTable.
• 3009. Setup launchpad for data fetching procedure - @lilingxi01
  • The deadline of this goal is moved to the next sprint because we are not interacting with data right now.
• 3010. Rebuild the tree component with MUI tree view - @nekomi2 , @lilingxi01

Create count metrics component

Row with 4 components each displaying a count (high priority, medium priority, warnings, errors)

To do:

• Create a component called Count that generically displays the total and some title
• Create a component called Counts that displays 4 Count components horizontally oriented to one another

[Indigo] Integration Confirmation.

Description

Before we get started on building the first deliverable demo, we need to confirm with other UI teams for finalizing the framework and set up the finalized code base. We are going to work closely with other UI teams and finish the checklist below.

Should finish before: March 6, Sunday.

Checklist

• Should we use Tailwind CSS in the end?
• Navigation design (because we want it to be persistent among different pages. Lingxi can make it if they have no idea on it).
• Set up the final code base with finalized architecture and basic navigation component.

Create more useful test data

While waiting for the test database, we need some form of our own testing mainly for the timeframe adjustments
Times should be in specified format by client

Clone repo + fetch branch

Install all tools related to tech stack

• mysql
• react/next
• jenkins
• cypress

**team indigo created a guide?

Complete Demo Prep

Create Login UI

• textfield for username (shows error if empty upon login)
• textfield for password (shows error if empty upon login)
• button to login
• button for forgot password --> when clicked opens pop up that says to file a ticket to reset login credentials

Create BP Charts

Donut chart for errors and warnings. Purpose is to show which BPs contribute most to these.

• us dx-react-chart for the donut charts
• create overall component (containing the two charts) plus abstract child component for the 2 charts

Create wiki for Team The Cafe Babe

The wiki page should include:

• Team Name
• All team members, along with their roles & GitHub IDs

Add pagination functionality to table component

• Using Pagination from MUI, add pagination functionality to LogEvent grid component
• push changes

Create header component (coordinate with sesame and Indigo)

• coordinate with sesame and indigo to create a Header component that we can all use on the various UI views
• integrate component into LogEvent.js
• Figma project for ui teams?

Sprint [03/03 - 03/10]

• Create UI mock up for dashboard
• Communicate with other teams to figure out who's doing what
• Install all necessary tools
• Get familiar with React
• Begin creating some basic UI components in React
• Prepare for mini demo 2

Create EAI Domain/Business Domain/Business Subdomain filter components

• create EAI domain, business domain, business subdomain filter components
• integrate into LogEvent.js page