Channel centric UI #133

flynnduism · 2021-07-10T00:12:11Z

This PR updates the UI with new layouts and styles. This replaces #105.

Main changes:

app view is split to a channel/revision two column layout, implementing a new IA model as outlined here
use a tabbed approach to switch between environment views
forms for creating / editing channels are reorganized into a series of choices

Views updated:

Account/Login
Account/register
App/Details
App/New
App/Delete
App/NewChannel
App/EditChannel

Missing Pieces

There are some additional parts of this that aren't working properly, and I will be seeking help to 🍐 get them functional:

Adding cleanup and rendering more data for Revisions in the left-hand timeline section (ties into Event history #134)
~~App/Edit routing is breaking~~
~~App/EditChannel form isn't submitting correctly~~
~~App/NewChannel form isn't submitting correctly~~

Some Screenshots

bacongobbler

Looks great. Deployed locally and everything seems to work. Really like the work done with the radio buttons for using a range revision rule vs a specific revision, too.

Let me know if you'd like to spend some time pairing on the issues you listed in the OP. I'm free most this week (asides Wednesday/Thursday - I'll be OoO on those days).

bacongobbler · 2021-07-12T19:59:07Z

Hippo/Views/App/Details.cshtml

+        <div class="columns">
+            <div class="column">
+                <ul class="rev-list">
+                    @foreach (var revision in Model.Revisions.OrderByDescending(r => r.OrderKey())) {


would you mind adding a TODO note to tie in #134 here?

What you have here is more like the "revisions" table in the existing UI, which tells the user what revisions are registered and where they are active. I would definitely not describe this as "recent activity" - e.g. there might be recent changes to a legacy deployment whose version number might be quite old. Correspondingly, I would describe this as "is currently active on" rather than "was pushed to" - we are not observing the push event here, only the current deployment state.

We can choose whether to have the 'all revisions' list, the 'recent activity' feed or both - I'm just saying we need to label them appropriately.

(Another idea for the revisions list, if we want one, would be to have an 'active revisions' list on the main app page but keep the 'all revisions' list off on a linked page or behind a 'see all' toggle button.)

Thanks @itowlson I am going to rework this section (and the terminology therein) in a follow up PR

itowlson

This looks amazing. One minor comment on wording where we are conflating two different things. Otherwise eager to get this in as soon as you've addressed the bits you said are currently not working.

itowlson · 2021-07-12T22:18:19Z

Hippo/Views/App/Details.cshtml

+        <div class="columns">
+            <div class="column">
+                <ul class="rev-list">
+                    @foreach (var revision in Model.Revisions.OrderByDescending(r => r.OrderKey())) {


What you have here is more like the "revisions" table in the existing UI, which tells the user what revisions are registered and where they are active. I would definitely not describe this as "recent activity" - e.g. there might be recent changes to a legacy deployment whose version number might be quite old. Correspondingly, I would describe this as "is currently active on" rather than "was pushed to" - we are not observing the push event here, only the current deployment state.

We can choose whether to have the 'all revisions' list, the 'recent activity' feed or both - I'm just saying we need to label them appropriately.

(Another idea for the revisions list, if we want one, would be to have an 'active revisions' list on the main app page but keep the 'all revisions' list off on a linked page or behind a 'see all' toggle button.)

bacongobbler · 2021-07-13T15:26:19Z

Would you mind rebasing when you get the chance? Thanks!

Signed-off-by: flynnduism <dev@ronan.design>

* fixes directory casing mismatch issue (Hippo > hippo) * includes fix for the App/EditChannel and App/NewChannel forms * fixes controller issue for App/New Signed-off-by: flynnduism <dev@ronan.design>

Signed-off-by: flynnduism <dev@ronan.design>

bacongobbler · 2021-07-13T19:54:07Z

Hippo/Views/Shared/_NavSidebar.cshtml

+
+    <div class="tabs">
+        <ul>
+            <!-- an initial/default environment, auto-generate when creating an app -->


delete this

bacongobbler · 2021-07-13T19:54:22Z

Hippo/Views/Shared/_NavSidebar.cshtml

+                            @Html.DisplayFor(modelItem => item.Name)
+                        </p>
+                    </a>
+                    <a class="env-url" target="_blank">


can we make this clickable?

it's now clickable

bacongobbler · 2021-07-13T19:55:03Z

I've been putting this PR through its paces today, and it looks like it's ready to go!

Signed-off-by: flynnduism <dev@ronan.design>

bacongobbler reviewed Jul 12, 2021

View reviewed changes

flynnduism self-assigned this Jul 12, 2021

itowlson reviewed Jul 12, 2021

View reviewed changes

flynnduism added 10 commits July 13, 2021 11:00

updated package-lock

eaaa2dc

remove HomeController

5278d3e

Signed-off-by: flynnduism <dev@ronan.design>

uopdate account and app views

561b960

Signed-off-by: flynnduism <dev@ronan.design>

add custom js for interactive ui elements

f7943f4

reroute the logout to the app index

74d1a58

css for channel layouts

f018301

rework the ui views to use channels as a means of managing apps

9117424

pr cleanup

bfaa0f6

* fixes directory casing mismatch issue (Hippo > hippo) * includes fix for the App/EditChannel and App/NewChannel forms * fixes controller issue for App/New Signed-off-by: flynnduism <dev@ronan.design>

post-rebase fixes

d1ab206

Signed-off-by: flynnduism <dev@ronan.design>

ensure app directory is CamelCase Hippo

41068ba

Signed-off-by: flynnduism <dev@ronan.design>

flynnduism force-pushed the channel-centric-ui branch from 64d81d0 to 41068ba Compare July 13, 2021 18:41

flynnduism added 2 commits July 13, 2021 11:42

remove .vscode dir from version control

aa1c939

Signed-off-by: flynnduism <dev@ronan.design>

add ui style to the App/Edit form

f70e0bd

Signed-off-by: flynnduism <dev@ronan.design>

bacongobbler reviewed Jul 13, 2021

View reviewed changes

flynnduism added 2 commits July 13, 2021 15:20

make the channel domain text link to the url

31f55bc

Signed-off-by: flynnduism <dev@ronan.design>

cleanup old code

93f1c9e

Signed-off-by: flynnduism <dev@ronan.design>

flynnduism merged commit 884fec2 into deislabs:main Jul 13, 2021

This was referenced Jul 14, 2021

[ui] change form layout to load within the activity pane #150

Closed

[ui] better formatting for recent history and activity #151

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Channel centric UI #133

Channel centric UI #133

flynnduism commented Jul 10, 2021 •

edited

Loading

bacongobbler left a comment

bacongobbler Jul 12, 2021 •

edited

Loading

itowlson Jul 12, 2021

flynnduism Jul 13, 2021

itowlson left a comment

itowlson Jul 12, 2021

bacongobbler commented Jul 13, 2021

bacongobbler Jul 13, 2021

flynnduism Jul 13, 2021

bacongobbler Jul 13, 2021

flynnduism Jul 13, 2021

bacongobbler commented Jul 13, 2021

Channel centric UI #133

Channel centric UI #133

Conversation

flynnduism commented Jul 10, 2021 • edited Loading

Main changes:

Views updated:

Missing Pieces

Some Screenshots

bacongobbler left a comment

Choose a reason for hiding this comment

bacongobbler Jul 12, 2021 • edited Loading

Choose a reason for hiding this comment

itowlson Jul 12, 2021

Choose a reason for hiding this comment

flynnduism Jul 13, 2021

Choose a reason for hiding this comment

itowlson left a comment

Choose a reason for hiding this comment

itowlson Jul 12, 2021

Choose a reason for hiding this comment

bacongobbler commented Jul 13, 2021

bacongobbler Jul 13, 2021

Choose a reason for hiding this comment

flynnduism Jul 13, 2021

Choose a reason for hiding this comment

bacongobbler Jul 13, 2021

Choose a reason for hiding this comment

flynnduism Jul 13, 2021

Choose a reason for hiding this comment

bacongobbler commented Jul 13, 2021

flynnduism commented Jul 10, 2021 •

edited

Loading

bacongobbler Jul 12, 2021 •

edited

Loading