Show Pipeline status overlay on page Favicon

What does this MR do?

Shows dynamic Pipeline status as Page Favicon. See #12818 (closed)

Why was this MR needed?

See #12818 (closed)

Screenshots (if relevant)

MR page

Pipeline Index Page

Build real-time update (ignore colors in this GIF)

Does this MR meet the acceptance criteria?

• Changelog entry added
• Documentation created/updated
• API support added
• Tests
  • Added for this feature/bug
  • All builds are passing
• Conform by the merge request performance guides
• Conform by the style guides
• Branch has no merge conflicts with master (if it does - rebase it please)
• Squashed related commits together

What are the relevant issue numbers?

Closes #12818 (closed)

marked as a Work In Progress

cc: @dimitrieh

@kushalpandya can you add a gif to issue please?

@fatihacet I'm waiting for @dimitrieh to finalize on how we'd show Favicon, i.e. as overlay on Tanuki or just status icon. Currently I'm using status icon directly (created from SVGs that we already have). Also, when build is running, the blue status icon doesn't act like progressbar, I'm just toggling static Favicons based on build status; pending, running, success, failed, cancelled and so on. Will update this MR with GIFs soon.

added 38 commits

• 4b4b4a45...adc0e41f - 33 commits from branch master
• f3ba62f1 - Add global methods for setting/resetting Favicons
• a223a989 - Add ID to query and manipulate favicon
• 9ee642b0 - Build status favicon
• e58d2769 - Set page favicon to match build status
• eb0bd5e4 - ESLint: Disable prefer-arrow-callback since this being non-ES6 file

Compare with previous version

nice @kushalpandya :D

i think its okay to go with just the status icons for now favicons do not have that much real estate to show there graphics.. even less so on non high def screens.. so i think our icons are "iconic" enough that they represent gitlab in someway! plus it is less work for you

i stated one question here: https://gitlab.com/gitlab-org/gitlab-ce/issues/12818#note_22440097

but i think its fine to go ahead for now with all 3 options as i think the answers will be positive towards it.. let state that the question is jus to get a second opinion :D

Thanks for your feedback @dimitrieh, for now I quickly exported ICO from SVGs that we use on Build page, and colorized to them (which is obviously not accurate), although I feel those status icon shapes don't look exact same as you presented in your comment.

Can you provide me 32x32 sized colored .ico files for following pipeline statuses?

• Pending
• Running
• Skipped
• Cancelled
• Success
• Failed
• Warning

P.S. I used SVGs available in /app/views/shared/icons directory (starting with name _icon_status_...) and exported .ico files.

I missed adding screenshot of how it looks currently, here it is.

@kushalpandya just a question, these favicons will change real time correct?

as for the favicons:

i used: http://www.favicomatic.com/

here they are:

status-favicons.zip

@dimitrieh

these favicons will change real time correct?

I'm not sure if I understood that correctly.

Currently, suppose you're on Build page and click on Retry to trigger a build, following will happen.

1. Status on top of Build log shows as Pending, I change favicon to Pending.
2. Build starts and status shows Running, I change favicon to Running.
3. ...
4. ...
5. If Build succeeded, failed, cancelled, I change favicon to represent the same.

Similar for MR and Pipeline pages as well.

During any point in future if user revisits Build, MR or Pipeline page, favicon will represent the status.

Did I get it right?

@kushalpandya seems great!

added 112 commits

• eb0bd5e4...40a82435 - 104 commits from branch master
• 506d26af - Add global methods for setting/resetting Favicons
• 16042c27 - Add ID to query and manipulate favicon
• c7c055b0 - Build status favicon
• ac4e7224 - Set page favicon to match build status
• fc870342 - ESLint: Disable prefer-arrow-callback since this being non-ES6 file
• 6623a038 - Replace with updated set
• 990be7c2 - Updated CI status favicons
• 04b3bb19 - Update favicon file path

Compare with previous version

added 184 commits

• 04b3bb19...fd46fb1c - 172 commits from branch master
• 586a652d - Add global methods for setting/resetting Favicons
• 89eb7e3a - Add ID to query and manipulate favicon
• f579502d - Build status favicon
• 174a1aaa - Set page favicon to match build status
• 607c522a - ESLint: Disable prefer-arrow-callback since this being non-ES6 file
• 24adbcb8 - Replace with updated set
• 934a7d52 - Updated CI status favicons
• 20f507cf - Update favicon file path
• 79a7764b - Set dynamic CI status favicon on MR page
• 0ce15bfc - Preserve status information in element meta
• a1d7b58c - Pass pipeline status during class init
• c162e60b - Set page favicon for status on class object init

Compare with previous version

added 1 commit

• c6f7f130 - Reset favicon at beginning of each page

Compare with previous version

added 12 commits

• c6f7f130...52ea5051 - 9 commits from branch master
• 38d6d7fe - Add global methods for setting/resetting Favicons
• 688c862f - Add ID to query and manipulate favicon
• d739be16 - Build status favicon

Compare with previous version

added 223 commits

• d739be16...e438b30a - 214 commits from branch master
• b04ff641 - Add global methods for setting/resetting Favicons
• 98e4ab5f - Add ID to query and manipulate favicon
• d7dbb568 - Build status favicon
• 5608495b - Add status to data attr
• 8b0829a4 - Add method to change favicon based on CI status
• 2795faed - Initialize CI status favicon on eligible pages
• 52ba3ec5 - Update page favicon on CI status update
• 2c039293 - Fix missing null check for favicon element
• c34453e7 - Add tests for setFavicon, resetFavicon and setCIStatusFavicon

Compare with previous version

unmarked as a Work In Progress

added 1 commit

• a5bddc66 - Add changelog entry

Compare with previous version

marked the task Conform by the merge request performance guides as completed