Creates a vue component for the top bar with controllers in job log view

What does this MR do?

Creates a vue component for the top bar with controllers in job log view

Moves the following code into Vue:

.top-bar.js-top-bar
  .js-truncated-info.truncated-info.d-none.d-sm-block.float-left.hidden<
    Showing last
    %span.js-truncated-info-size.truncated-info-size><
    of log -
    %a.js-raw-link.raw-link{ href: raw_project_job_path(@project, @build) }>< Complete Raw

  .controllers.float-right
    - if @build.has_trace?
      = link_to raw_project_job_path(@project, @build),
              title: 'Show complete raw',
              data: { placement: 'top', container: 'body' },
              class: 'js-raw-link-controller has-tooltip controllers-buttons' do
        = icon('file-text-o')

    - if @build.erasable? && can?(current_user, :erase_build, @build)
      = link_to erase_project_job_path(@project, @build),
                method: :post,
                data: { confirm: 'Are you sure you want to erase this build?', placement: 'top', container: 'body' },
                title: 'Erase job log',
                class: 'has-tooltip js-erase-link controllers-buttons' do
        = icon('trash')
    .has-tooltip.controllers-buttons{ title: 'Scroll to top', data: { placement: 'top', container: 'body'} }
      %button.js-scroll-up.btn-scroll.btn-transparent.btn-blank{ type: 'button', disabled: true }
        = custom_icon('scroll_up')
    .has-tooltip.controllers-buttons{ title: 'Scroll to bottom', data: { placement: 'top', container: 'body'} }
      %button.js-scroll-down.btn-scroll.btn-transparent.btn-blank{ type: 'button', disabled: true }
        = custom_icon('scroll_down')

What are the relevant issue numbers?

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Tests added for this feature/bug
• Conforms to the code review guidelines
• Conforms to the merge request performance guidelines
• Conforms to the style guides

#50101 (closed)