Change layout and content for the Pipeline List View - Deployed Pipelines

As a CDAP user, I want to be able to view the list and current status pipelines that have been deployed or have been created and saved as a draft.
The user can tab between the two view of Deployed and Draft pipeline and access different information.

DEPLOYED PIPELINES
The pipeline list header displays the following:

• Total number of pipelines displayed

• Search box - the user can search by Pipeline Names. (hint text "Search by Pipeline Name)

• The number of pipelines displayed per page. The user can select through a drop down how many rows are displayed.
  Options available: 5; 10; 25; 50 - 10 per page is the default.

• Pagination (use current pattern).

PIPELINE LIST VIEW
Pipeline Name
By default, Pipelines are sorted by alphabetical order in ascending order (A to Z).
If a pipeline is currently running, a label is displayed right below the name and a caret is displayed.
The user can either click on the caret or on the "<#> running" to open an accordion containing information about the current runs.
When the user hovers on the row, "<#> Running" turns blue.
When the accordion is open, the label changes to "<#> Running - Select one to view" in Cask Orange_02

Type
The column displays the type (Batch or Realtime) associated to each pipeline. When the header is selected, the pipelines are sorted alphabetically.

Version
Pipeline versions are displayed numerically, and they can be organized in ascending or descending order

Total Runs
The number displayed represents the number of runs that have either Succeeded, Failed or Stopped.
Currently running, or deployed pipelines are not counted.

Status
The user can filter the list by Status, by clicking the filter icon.

Deployed
Failed
Running
Stopped
Succeeded
The status of a pipeline reflects the status of the last pipeline fired. There may be situations in which the pipeline status is succeeded (or failed, or stopped) and a run is still running.
Scenario:
Run 1 is fired and lags for 10 minutes
Run 2 is fired 1 minute after and completes successfully in 2 minutes
The pipeline status is "running" until Run 2 is done and then it is succeeded.
The number of Runs will be displayed as "1 Running"

Last Start Time
Displays the aggregate time of when the pipeline was last started.
From 0 to 59 seconds = less than 1 minute ago
1 to 1:59 = 1 minute ago
display incrementally by min until 60 min
1 hour to 1:29 = 1 hr ago
after 1 hour display in 30 minutes increments: e.g. 1.5 hr ago; 2 hr ago; 2.5 hr ago
When hitting 24 hours, display 1 day increment = 1 day ago, etc.
When hitting 7 days, display 1 week increment = 1 week ago, etc.
When hitting 30 days, display 1 month increment = 1 month ago, etc
After 11 months and 29 days, we only display "more than 1 year ago"

Next Run Starts in
Displays the aggregate time of when the pipeline is going to start.
From 0 to 59 seconds = display count per second; e.g.; 2 sec
1 to 1:59 = about 1 min
display incrementally by min until 60 min (about 2 min; etc.)
after 1 hour display in 30 minutes increments: e.g. about 1 hr ; about 1.5 hr; about 2 hr
When hitting 24 hours, display at 1 day increment = 1 day
When hitting 7 days, start display 1 week increment = 1 week; 2 weeks
When hitting 30 days, start display 1 month increment = 1 month, etc
After 11 months and 29 days, we only display 1 year increment

Tags
All tags are displayed. Business tags are displayed first, then system tags.
The click on one tag will filter the list of pipelines, displaying only the pipelines that share that same tag.

Actions
"Actions" are represented by an icon, and it relates to actions performed at the pipeline level (not at the single run level) that displays a modeless when selected.
The user can perform the following action on a pipeline
Edit
Duplicate
Delete

• One edit version of the pipeline is allowed at any time. If a pipeline is being edited, the drop-down will display the following message:
  "This pipeline is being edited by <username>"

Acceptance Criteria

• The user can sort the table by clicking on each of the headers.

• The user can hover and click on each of the pipeline rows. On hover, the row background turns light grey #f5f5f5 (grey_08)
  • To open the accordion, the user selects the caret or the # Running link. Clicking on the rest of the pipeline takes the user to the details view of the last pipeline fired.
  • Clicking on all the other rows will take the user to the run view (pipeline details) of the last run of that pipeline.

• In the accordion, runs are organized by start time with the newest run displayed at the top.

• Each of the rows in the accordion is clickable and take the user to the detail view of that run. On hover, the row background turns #Grey_07 (#eeeeee)

• When the accordion is open and the pipeline status is Running, the user is able to click on the main pipeline row.

• When the accordion is open and the pipeline status is anything other than Running (e.g. Succeeded; Stopped, etc), the pipeline row is clickable. The pipeline row background changes to white. Clicking the main row takes the user to the detail view for that run.

• The runs table can be organized by clicking the header of each column