Task/FP-204: My Allocations Usage Info By User by owaisj · Pull Request #68 · TACC/Core-Portal

owaisj · 2020-06-16T17:52:16Z

Overview:

This PR allows users to view usage for each allocation by user.

PR Status:

Ready.

Related Jira tickets:

FP-204

Summary of Changes:

There is now a usage table in the team view modal listing as well as a Django view using the new TAS usage endpoint.
Additionally, modals in the Allocations section now use CSS modules.

Testing Steps:

Go to the allocations section and click View Team. Almost every developer in WMA has some usage data in the TACC-ACI project.

UI Photos:

2020-07-30:

2020-06-16: Screen Shot 2020-06-16 at 12 46 20 PM

Notes:

~~Currently the usage endpoint requires the TAS URL setting to be set to dev.~~
The usage endpoint is in TAS's prod environment now.

codecov · 2020-06-16T17:54:00Z

Codecov Report

Merging #68 into master will increase coverage by 0.34%.
The diff coverage is 80.37%.

@@            Coverage Diff             @@
##           master      #68      +/-   ##
==========================================
+ Coverage   54.81%   55.15%   +0.34%     
==========================================
  Files         226      230       +4     
  Lines        7960     8008      +48     
  Branches     1126     1136      +10     
==========================================
+ Hits         4363     4417      +54     
+ Misses       3388     3383       -5     
+ Partials      209      208       -1

Flag	Coverage Δ
#javascript	`55.01% <89.77%> (+1.32%)`	⬆️
#unittests	`55.21% <36.84%> (-0.06%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...ent/src/components/Allocations/AllocationsCells.js	`82.35% <ø> (ø)`
...nt/src/components/Allocations/AllocationsLayout.js	`75.00% <0.00%> (ø)`
...nt/src/components/Allocations/AllocationsTables.js	`68.42% <0.00%> (-5.87%)`	⬇️
server/portal/apps/users/utils.py	`48.23% <18.18%> (-3.77%)`	⬇️
server/portal/apps/users/views.py	`57.77% <57.14%> (+0.13%)`	⬆️
...ent/src/components/Allocations/AllocationsUtils.js	`76.47% <77.77%> (-9.25%)`	⬇️
...locationsTeamViewModal/AllocationsTeamViewModal.js	`93.75% <93.75%> (ø)`
...AllocationsRequestModal/AllocationsRequestModal.js	`100.00% <100.00%> (ø)`
...l/AllocationsContactCard/AllocationsContactCard.js	`100.00% <100.00%> (ø)`
...Modal/AllocationsTeamTable/AllocationsTeamTable.js	`100.00% <100.00%> (ø)`
... and 7 more

client/src/components/Allocations/Allocations.scss

client/src/components/Allocations/AllocationsModals.js

wesleyboar

Please, review the CSS suggestions.

server/portal/apps/users/utils.py

server/portal/apps/users/views.py

rstijerina

I'm also curious about the usage stats. Do we know when they reset, etc? They're definitely not lifetime stats, as I'm missing lots of stampede2 usage, etc

rstijerina · 2020-07-14T22:01:45Z

server/portal/apps/users/utils.py

would be good to raise this addition with pytas as well

@rstijerina @owaisj Ping. Was this resolved?

@owaisj , you're planning on reaching out to the pytas team to request this, right?

Sorry, yes I am!

.../AllocationsModals/AllocationsTeamViewModal/AllocationsContactCard/AllocationsContactCard.js

...ns/AllocationsModals/AllocationsTeamViewModal/AllocationsUsageTable/AllocationsUsageTable.js

server/portal/apps/users/utils.py

Added endpoint Saga and ui with reacstrap

Added markup and styles for table Added utils to parse data

Refactored allocation request UI flow for team view modal tests

Added coverage for loading/errors Formatting of resource

Renamed and reworked file structure Implemented css module

Added units to entry Changed heading for usage Added 0 usage Changed exceptions in backend

wesleyboar

I approve UI, so we can get this in (when enough others approve).

~~But there may be a minor design correction coming via #114.~~
~~And there may be a component coming (via #116 or via #114).~~

Update — 2020-08-04

Tweak came in from PR #114.

Use of component can come in from #133.

.../AllocationsModals/AllocationsTeamViewModal/AllocationsContactCard/AllocationsContactCard.js

Quick solution for more space

.../AllocationsModals/AllocationsTeamViewModal/AllocationsContactCard/AllocationsContactCard.js

...ions/AllocationsModals/AllocationsTeamViewModal/AllocationsTeamTable/AllocationsTeamTable.js

jchuahtacc · 2020-08-04T15:55:37Z

client/src/redux/sagas/allocations.sagas.js

+          usageData: currentProject.systems.map(system => {
+            return {
+              type: system.type,
+              usage: `0 ${system.type === 'HPC' ? 'SU' : 'GB'}`,


May want to talk to Virginia Trueheart about this. Some systems are considered HPC and Storage at the same time. (Wrangler, in particular.) For those systems it may be necessary to display both. The same concerns may also exist for Frontera due to the availability of its local NVMe partitions.

I only see systems showing 0GB. This seems unexpected. See Corral in the screenshot:

I remember Sal and Owais and Design agreeing to let Allocations Team View modal show 0 GB. Is this related?

@nathanfranklin The storage units awarded were being pulled from the wrong portion of the allocations object. That has been fixed.

@jchuahtacc The information we're getting from TAS right now also doesn't tell us how much allocated storage is being used. I added a ticket for that here

Awesome 👍

… task/FP-204

Clear the view in between openings Active user check

wesleyboar

I approve the UI.

Also, I offer an (optional, for now; but required, later) almost invisible change, via PR #133, for this modal to use the DescriptionList component.

* Allocations usage by user Added endpoint Saga and ui with reacstrap * Refactored sagas * UsageDisplayed on modal Added markup and styles for table Added utils to parse data * Allocation modals tests Refactored allocation request UI flow for team view modal tests * Test Coverage and UI tweaks Added coverage for loading/errors Formatting of resource * Refactored UsageTable Renamed and reworked file structure Implemented css module * Modals in separate directory * CSS modules and test tweaks * Various Fixes Added units to entry Changed heading for usage Added 0 usage Changed exceptions in backend * Fixed units * Added JSDoc comments to utils * FP-204: UI: Swap contact card bold, and less bold * Task/fp 515 fp 354 support messages and new icons (#91) * Task/fp 515 install cortal icons (#90) * Task/fp 228/fp 515 isntall cortal icons (#89) * FP-515: Add Icon component from FP-354 * FP-515: Add Icon component usage from FP-354 * FP-515: Install Cortal 1.2 - Disable linting of `icon.fonts.css`. - Support WOFF in Webpack config. - Update several files (and tests) to use new icon names: - AppIcon - AppBrowser - DataFilesListingCell - DataFilesSidebar - DataFilesToolbar - Sidebar - TicketModal - Replace old Core Portal font with Cortal Icons font. - Migrate font styles to their own stylesheet. - Add icon aliases: - icon-collapse (icon-contract) * FP-515: Disable an "extra icon" * FP-515: Fix neglected instances of `icon-upload` * FP-228: Hide accessible Icon text * FP-228: Allow extra spaces in CSS before ruleset * Task/fp 354 message component (#88) * WIP: FP-354: Add component, icon sub-comp, tests To Do: - Run tests - Fix lint errors - Create tests for icon sub-component - Graduate icon sub-component to component * FP-354: Fix test * FP-354: Fix ES Lint error. Remove test CSS. * FP-354: Test sub-component * FP-354: Graduate MessageIcon to Icon * FP-354: Support `AppIcon` use of `Icon` * FP-354: Revert test tweaks to jest.config.js roots * FP-354: Support shortcut path to load new commons * FP-354: Accessible icon text. Missing icon class. * FP-354: Message text and icon text as `children` * FP-354: Styles for Message's * FP-354: Use `Message` in `DataFilesTable.js` * Quick: CSS lint allow align single-line rulesets * FP-354: Add missing `success` type * FP-354: Success type and fixes * FP-354: Fixes. Require icon. Color info type. * FP-534: Comments. Color var naming tweak. * FP-354: Fix AppIcon test fail (missing icon class) * FP-354: Expand tests. Simplify class match syntax. * Noop: Remove style remark from function comment * FP-354: CHoose different icon for `info` type * FP-515/FP-317: Update icons * Task/fp 537 add section for ui patterns (#93) * FP-537: New Section "UI Patterns" * FP-537: Update Sidebar tests * FP-537: More accurate `isDebug` comment * FP-537: Use new icon for 'UI Patterns' section * FP-357: Document `UIPatterns` component * FP-515/FP-354: Cleanup Icons & Messages * FP-354: More tests with less code * FP-354/FP-537: Add Message UI Patterns (#95) Follow up to FP-354 that was pending FP-537 * Quick: Remove outdated comments * FP-354/FP-537: Context for Message UI Patterns * FP-354/FP-537: Fix Unit Test i.e. Remove styleName * FP-354: Render/Style Links in UPatternsMessages * FP-537: Unset Bootstrap styles for `code` tag * FP-354: Replace `Action` w/ `link` tagged template * FP-515 (with FP-354): Change Icon Size to 18px … And replace `.app-icon` and `.category-icon` with `.icon`. * FP-557: New `<dl>` Component * FP-204/FP-557: Use DL UI Comp in Allocations Modal * FP-557: Finish Unit Tests * Quick: Allow `composes` to Pass CSS LInter * FP-204: UI: Quick: Remove extra code (from merge) * FP-204/FP-557: Remove margin on horz DL Co-authored-by: Owais Jamil <ojamil@tacc.utexas.edu>

nathanfranklin

Ui looks and behaves perfectly. 👍 I've let some comments though as some of the reported values look off.

.../AllocationsModals/AllocationsTeamViewModal/AllocationsContactCard/AllocationsContactCard.js

client/src/redux/sagas/allocations.sagas.js

nathanfranklin · 2020-08-05T20:19:35Z

client/src/redux/sagas/allocations.sagas.js

+          usageData: currentProject.systems.map(system => {
+            return {
+              type: system.type,
+              usage: `0 ${system.type === 'HPC' ? 'SU' : 'GB'}`,


I only see systems showing 0GB. This seems unexpected. See Corral in the screenshot:

client/src/components/Allocations/AllocationsTables.js

rstijerina

Nice work!

owaisj requested a review from rstijerina June 16, 2020 17:52

wesleyboar reviewed Jun 17, 2020

View reviewed changes

client/src/components/Allocations/Allocations.scss Outdated Show resolved Hide resolved

wesleyboar reviewed Jun 17, 2020

View reviewed changes

client/src/components/Allocations/AllocationsModals.js Outdated Show resolved Hide resolved

wesleyboar requested changes Jun 17, 2020

View reviewed changes

owaisj force-pushed the task/FP-204 branch 2 times, most recently from 459e854 to 9e3b4fd Compare July 9, 2020 16:59

owaisj requested a review from wesleyboar July 9, 2020 17:00

nathanfranklin reviewed Jul 10, 2020

View reviewed changes

server/portal/apps/users/utils.py Outdated Show resolved Hide resolved

server/portal/apps/users/utils.py Outdated Show resolved Hide resolved

server/portal/apps/users/views.py Outdated Show resolved Hide resolved

owaisj force-pushed the task/FP-204 branch from 9e3b4fd to e1a1a12 Compare July 10, 2020 20:59

rstijerina requested changes Jul 14, 2020

View reviewed changes

owaisj force-pushed the task/FP-204 branch from b3d3ec7 to bc80f1a Compare July 17, 2020 20:21

owaisj added 11 commits July 30, 2020 10:56

Allocations usage by user

a333c5a

Added endpoint Saga and ui with reacstrap

Refactored sagas

3db86af

UsageDisplayed on modal

fd76a3c

Added markup and styles for table Added utils to parse data

Allocation modals tests

358b2a8

Refactored allocation request UI flow for team view modal tests

Test Coverage and UI tweaks

64467ec

Added coverage for loading/errors Formatting of resource

Refactored UsageTable

b976b81

Renamed and reworked file structure Implemented css module

Modals in separate directory

a56ff4f

CSS modules and test tweaks

bc815e3

Various Fixes

dfd0aa5

Added units to entry Changed heading for usage Added 0 usage Changed exceptions in backend

Fixed units

4653927

Added JSDoc comments to utils

8693ca4

owaisj force-pushed the task/FP-204 branch from 6b66a49 to 8693ca4 Compare July 30, 2020 15:56

wesleyboar approved these changes Jul 30, 2020

View reviewed changes

.../AllocationsModals/AllocationsTeamViewModal/AllocationsContactCard/AllocationsContactCard.js Outdated Show resolved Hide resolved

wesleyboar mentioned this pull request Jul 30, 2020

FP-557: New <dl> (Description/Definition List) Component #116

Merged

1 task

wesleyboar and others added 2 commits July 30, 2020 13:42

Task/FP-204: UI tweak (#114)

484cf14

Quick solution for more space

FP-204: UI: Fix unit test (late commit)

9c2f7d9

jchuahtacc suggested changes Aug 4, 2020

View reviewed changes

Merge branch 'master' of https://github.com/TACC/Frontera-Portal into…

1821804

… task/FP-204

Changed wording for initial state of modal

f6948cf

Clear the view in between openings Active user check

wesleyboar self-requested a review August 4, 2020 17:06

wesleyboar mentioned this pull request Aug 4, 2020

Task/fp 204 ui tweak with fp 557 #133

Merged

1 task

wesleyboar approved these changes Aug 4, 2020

View reviewed changes

rstijerina added this to the Grey-Cardinal Release milestone Aug 4, 2020

wesleyboar and others added 2 commits August 5, 2020 09:19

Merge branch 'master' into task/FP-204

d662790

nathanfranklin requested changes Aug 5, 2020

View reviewed changes

nathanfranklin reviewed Aug 5, 2020

View reviewed changes

client/src/components/Allocations/AllocationsTables.js Show resolved Hide resolved

Changed allocation computation

bc793e9

owaisj force-pushed the task/FP-204 branch from 65f175c to bc793e9 Compare August 6, 2020 17:14

owaisj added 4 commits August 6, 2020 12:26

Fix storage systems showing 0gb

b859bd1

Badge fix

38009d1

Contact information padding removed

1ae9a21

Cell width and font size

c624155

nathanfranklin approved these changes Aug 7, 2020

View reviewed changes

Merge branch 'master' into task/FP-204

6c8d6b7

rstijerina approved these changes Aug 7, 2020

View reviewed changes

rstijerina merged commit 54c7081 into master Aug 7, 2020

rstijerina deleted the task/FP-204 branch August 7, 2020 17:14

Conversation

owaisj commented Jun 16, 2020 • edited by wesleyboar Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview:

PR Status:

Related Jira tickets:

Summary of Changes:

Testing Steps:

UI Photos:

Notes:

Uh oh!

codecov bot commented Jun 16, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

wesleyboar left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rstijerina left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

wesleyboar left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wesleyboar left a comment

Choose a reason for hiding this comment

Uh oh!

nathanfranklin left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

rstijerina left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

owaisj commented Jun 16, 2020 •

edited by wesleyboar

Loading

codecov bot commented Jun 16, 2020 •

edited

Loading

wesleyboar left a comment •

edited

Loading