Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-35725

Developer should see a 404 page if the pipeline can't be found

    • 1.0-m7, 1.0-m10, 1.0-m11, 1.0-m12

      In scope

      • When the pipeline cannot be found render the 404 page
      • When the pipeline result cannot be found render the 404 page
      • Background image is fixed to bottom of screen, scales.
      • Background image has a transparency of 30%
      • Background color is the brand lite blue
      • Open dashboard button takes them back to /pipelines

      Note that the design is another variant of the empty state – reuse if possible

          [JENKINS-35725] Developer should see a 404 page if the pipeline can't be found

          James Dumay added a comment -

          imeredith if we wanted to trap all the 404's etc on /blue what would be the way to do that?

          James Dumay added a comment - imeredith if we wanted to trap all the 404's etc on /blue what would be the way to do that?

          Cliff Meyers added a comment -

          We can add config to react-router so that invalid routes are all routed to 404 page but that really only handles the scenario where a link gets malformed or typo'd by the user. We have two other scenarios we probably want to handle:

          1. URL is followed that results in a 404 from the REST API. In this scenario, we might be able to add some Redux plumbing to inform the component it's in an error state (if we need to do something fancy) or just replace the regular component with the NotFound component altogether.
          2. URL is followed that results in an error condition within a component. /blue/pipelines/foo/activity is a good example of this. This route doesn't fire off its own REST API call that results in a 404, but is just provided a null/undefined pipeline in its render method. Actually a bit of a limitation of our current architecture that the initial call into `render()` looks the same as subsequent `render()` path with no data. So we might even need a mini-design on this to get it completely right, depending on which scenarios you'd like us to handle, jdumay.

          Cliff Meyers added a comment - We can add config to react-router so that invalid routes are all routed to 404 page but that really only handles the scenario where a link gets malformed or typo'd by the user. We have two other scenarios we probably want to handle: URL is followed that results in a 404 from the REST API. In this scenario, we might be able to add some Redux plumbing to inform the component it's in an error state (if we need to do something fancy) or just replace the regular component with the NotFound component altogether. URL is followed that results in an error condition within a component. /blue/pipelines/foo/activity is a good example of this. This route doesn't fire off its own REST API call that results in a 404, but is just provided a null/undefined pipeline in its render method. Actually a bit of a limitation of our current architecture that the initial call into `render()` looks the same as subsequent `render()` path with no data. So we might even need a mini-design on this to get it completely right, depending on which scenarios you'd like us to handle, jdumay .

          James Dumay added a comment -

          cmeyers thanks for analysing. Replies below:

          1. Yes to this. Could we also do the same for non-404 errors too? There are mockups on the linked ticket (UX-280)
          2. Mini-design doc sounds good. Can you drive this?

          James Dumay added a comment - cmeyers thanks for analysing. Replies below: 1. Yes to this. Could we also do the same for non-404 errors too? There are mockups on the linked ticket ( UX-280 ) 2. Mini-design doc sounds good. Can you drive this?

          Cliff Meyers added a comment -

          Mini design doc is in-progress, although may be expanded to include scope due to issue raised in UX-302

          Cliff Meyers added a comment - Mini design doc is in-progress, although may be expanded to include scope due to issue raised in UX-302

          James Dumay added a comment -

          Great work thanks Cliff
          On Sat, 21 May 2016 at 4:07 AM, Cliff Meyers (JIRA) <


          James Dumay
          Product Manager
          CloudBees, Inc.
          Skype: ap_myskype Twitter: i386

          James Dumay added a comment - Great work thanks Cliff On Sat, 21 May 2016 at 4:07 AM, Cliff Meyers (JIRA) < – James Dumay Product Manager CloudBees, Inc. Skype: ap_myskype Twitter: i386

          Cliff Meyers added a comment -

          Cliff Meyers added a comment - Mini-design doc: https://docs.google.com/document/d/1qDYlHV5vtjK3jEaHzhtz5kFIEx6lvt22PON35tt94Eg/edit#

          Keith Zantow added a comment -

          Keith Zantow added a comment - Check it: https://ci.blueocean.io/blue/organizations/jenkins/invalid-sdlkfjsdkfj/activity/

          Alex added a comment -

          Hey everyone,

          I've been following this issue closely, and I can totally understand the frustration that comes with encountering a missing pipeline or result. The transparency of 30% on the background image and using the brand lite blue color sound like visually appealing choices.

          In my experience, user experience is paramount. Nobase BpKoogeGD, your suggestion of having developers see a 404 page if the pipeline can't be found is quite practical. It could prevent confusion and clearly communicate the issue. Adding Redux to handle error states sounds like a smart move, giving users a seamless experience while dealing with errors. Also, adapting the "empty state" design variant for this purpose is a clever way to maintain consistency.

          As for advice, considering scenarios where both REST API-related and component-related errors occur is wise. It might be worthwhile to prioritize handling the former since it's directly tied to the data source. For the latter, careful consideration of the architecture and user journey will help you decide the best approach.

          Keep up the great work, team! 

          When I developed Andersen's Smart Parking Product: Urban Routes Future Is Here, I faced a similar dilemma. However, I contacted my team lead and he quickly found a solution. I can check with him on these points if you need me to. Let me know!

          I'd recommend thoroughly testing the proposed solutions and getting some user feedback before finalizing the changes. It's always valuable to have real-world insights.

          Alex added a comment - Hey everyone, I've been following this issue closely, and I can totally understand the frustration that comes with encountering a missing pipeline or result. The transparency of 30% on the background image and using the brand lite blue color sound like visually appealing choices. In my experience, user experience is paramount. Nobase BpKoogeGD, your suggestion of having developers see a 404 page if the pipeline can't be found is quite practical. It could prevent confusion and clearly communicate the issue. Adding Redux to handle error states sounds like a smart move, giving users a seamless experience while dealing with errors. Also, adapting the "empty state" design variant for this purpose is a clever way to maintain consistency. As for advice, considering scenarios where both REST API-related and component-related errors occur is wise. It might be worthwhile to prioritize handling the former since it's directly tied to the data source. For the latter, careful consideration of the architecture and user journey will help you decide the best approach. Keep up the great work, team!  When I developed Andersen's Smart Parking Product: Urban Routes Future Is Here , I faced a similar dilemma. However, I contacted my team lead and he quickly found a solution. I can check with him on these points if you need me to. Let me know! I'd recommend thoroughly testing the proposed solutions and getting some user feedback before finalizing the changes. It's always valuable to have real-world insights.

            kzantow Keith Zantow
            jamesdumay James Dumay
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:
              Resolved: