Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI: CSI Plugins Pages #7872

Merged
merged 27 commits into from
May 7, 2020
Merged

UI: CSI Plugins Pages #7872

merged 27 commits into from
May 7, 2020

Conversation

DingoEatingFuzz
Copy link
Contributor

This adds a plugins list page and a plugin detail page for Storage/CSI.

Screen Shot 2020-05-05 at 2 34 19 PM

Plugins list page shows all CSI plugins running in your cluster

Screen Shot 2020-05-05 at 2 34 41 PM

Plugin detail page showing plugin metadata and all allocations associated with the plugin's node and controller jobs

Reviewer notes: Probably the most surprising code in this diff is PluginAllocationRow. A new component for a variant of what we present in AllocationRow. This serves two purposes. The first is that the plugin allocation row uses a different underlying model. It uses a storage-controller or storage-node model, which has additional properties beyond the allocation it represents. The second is that the AllocationRow is always a web of conditionals based on semi-arbitrary contexts. This has always been because the cost of creating derivative components is expensive due to the sophistication within the allocation row component (namely the stat tracker). I think this approach + the refactoring of allocation row that extracts the allocation stat markup is tolerable and potentially extendable to all other allocation row variants.

Copy link
Contributor

@backspace backspace left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I left some quite-minor comments but this looks good to me 😀🎉

<th>Created</th>
<th>Modified</th>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

eep, I’m glad you caught this!

assert.equal(PluginDetail.controllerEmptyState.headline, 'No Controller Plugin Allocations');

assert.ok(PluginDetail.nodeTableIsEmpty);
assert.equal(PluginDetail.nodeEmptyState.headline, 'No Node Plugin Allocations');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn’t a serious thing but I wonder about asserting on the headline text; since it’s hardcoded, asserting that the empty message is displayed should be enough. But I know Opinions Vary haha

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, the assertion is pretty weak, but my rationale is that if we ever do some sweeping refactor to empty states, this ensures that they continue to be descriptive (or at least tests fail and force us to have a conversation about it).

error=statsError}}
</td>
{{else}}
<td colspan="10">&hellip;</td>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something we can’t do anything about but always makes me sad is having to manually specify the number of columns in this kind of situation 😞

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah. I've been thinking a far amount about tables and table testing with this work, ha. I very intentionally kept these components on the simple side of things to allow for the most flexibility without larger architectural rethinking, but it's definitely starting to show that maybe we can make some higher level table components with a degree of certainty that we know our patterns aren't going to change tomorrow.

If we do that then maybe colspan here could become dynamic based on some underlying data from which we can derive a column count.

// Convert a map[string]interface{} into an array of objects
// where the key becomes a property at propKey.
// This is destructive. The original object is mutated to avoid
// excessives copies of the originals which would otherwise just
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tiny typo: “excessives” 🤓

export function formatMonthTs([date]) {
const format = 'MMM DD HH:mm:ss ZZ';
export function formatMonthTs([date], options = {}) {
const format = options.short ? 'MMM DD' : 'MMM DD HH:mm:ss ZZ';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could use D instead of DD for a slightly shorter date in early parts of the month? But maybe the leading zero is desired.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, good call.

Structure icons have fill set to currentColor hardcored in their markup.
This mean setting fill to a color in CSS does nothing, but setting color
now does.
There was a missing edge case where a job is pending. I took the moment
to also refactor the code to use async/await which cleaned up the
promise chaining.
@github-actions
Copy link

github-actions bot commented Jan 7, 2023

I'm going to lock this pull request because it has been closed for 120 days ⏳. This helps our maintainers find and focus on the active contributions.
If you have found a problem that seems related to this change, please open a new issue and complete the issue template so we can capture all the details necessary to investigate further.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jan 7, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants