Skip to content

Commit

Permalink
Rework ui/ux of iothrottling
Browse files Browse the repository at this point in the history
  • Loading branch information
@jparez
jparez committed Jan 15, 2025
1 parent 1ed3be5 commit 7963f07
Show file tree
Hide file tree
Showing 9 changed files with 290 additions and 221 deletions.
310 changes: 154 additions & 156 deletions src/plugins/IOThrottling.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions src/plugins/util/components.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,14 +256,14 @@ const dropdownSelect = (() => {
* @returns {Object} - Dropdown component with methods to interact with it.
*/
const createDropdown = ({items = [], onChange = null, value = ''}) => {
let selectedValue = value || 'Select...';
let selectedValue = value ?? 'Select...';
const dropdownDiv = document.createElement('div');
dropdownDiv.className = 'dropdown';

// Create the div displaying the selected value
const selectedValueDiv = document.createElement('div');
selectedValueDiv.className = 'dropdown-selected';
selectedValueDiv.textContent = value || 'Select...';
selectedValueDiv.textContent = value ?? 'Select...';
dropdownDiv.appendChild(selectedValueDiv);

// Create the menu div where options will be appended
Expand Down
12 changes: 8 additions & 4 deletions src/plugins/util/iothrottling-profiles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,23 +10,27 @@
*
*/
module.exports = [
{
name: 'None',
label: '(No disk performance alteration)',
readByteRate: 0,
},
{
name: 'High-end device',
label: 'High-end device',
label: '(200 MiB per second)',
readByteRate: 200,
},
{
name: 'Mid-range device',
label: 'Mid-range device',
label: '(100 MiB per second)',
readByteRate: 100,
},
{
name: 'Low-end device',
label: 'Low-end device',
label: '(50 MiB per second)',
readByteRate: 50,
},
{
name: 'Custom',
label: 'Custom device',
},
];
24 changes: 24 additions & 0 deletions src/scss/base/_animations.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,27 @@
opacity: 1;
}
}

@keyframes blink-alert {
0% {
opacity: 1;
}
10% {
opacity: 0.3;
}
20% {
opacity: 1;
}
30% {
opacity: 0.3;
}
40% {
opacity: 1;
}
50% {
opacity: 0.3;
}
100% {
opacity: 1;
}
}
6 changes: 0 additions & 6 deletions src/scss/base/_genymotion.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,12 +210,6 @@
}
}

.gm-modal {
.gm-separator {

}
}

.gm-separator {
width: 100%;
height: 1px;
Expand Down
5 changes: 4 additions & 1 deletion src/scss/base/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,13 @@
// Responsive breakpoint
$breakpoint-mobile: 650px;

//Spacing
// Spacing
$spacing-xxs: 2px;
$spacing-xs: 5px;
$spacing-s: 10px;
$spacing-m: 15px;
$spacing-l: 20px;
$spacing-xl: 30px;

// Modal
$modal-x-padding: 40px;
112 changes: 77 additions & 35 deletions src/scss/components/_iothrottling.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,57 +2,99 @@
* IO Throttling plugin styles
*/
.device-renderer-instance .gm-iothrottling-plugin {
.gm-inputs {
margin-bottom: 15px;

select {
font-size: medium;
width: 100%;
margin-top: 10px;
padding: 2px;
.gm-noThrottling,
.gm-customThrottling {
display: none;
}
.gm-iothrottling-none {
.gm-units,
.gm-iothrottling-readbyterate {
display: none;
}
.gm-noThrottling {
display: block;
}
}
.gm-iothrottling-custom {
.gm-customThrottling {
display: block;
//text italic
font-style: italic;
margin-top: $spacing-m;
}
}

label {
margin-top: 20px;
display: block;
float: left;
.gm-iothrottling-cache-cleared{
.gm-iothrottling-clearcache{
label {
animation: blink-alert 1.5s ease-in-out
}
}
}

.gm-fields {
.gm-tag-success {
display: none;
}
.gm-iothrottling-notapplied-text {
display: block;
margin: 0;
padding: 0;
width: 100%;
height: 50px;
}
.gm-iothrottling-saved {
.gm-tag-success {
display: block;
}
.gm-iothrottling-notapplied-text {
display: none;
}
}

.gm-units {
text-align: right;
float: right;
width: 160px;
.gm-modal-body {
display: flex;
flex-direction: column;
}

input {
font-size: medium;
font-family: Helvetica, sans-serif;
margin-top: 10px;
width: 30%;
text-align: right;
float: right;
.gm-fields {
margin-top: $spacing-m;
min-height: 40px;
flex: 1;
font-size: 13px;

&:read-only {
border-bottom: 1px solid transparent;
background: var(--gm-btn-bg-color-disabled);
.gm-fields-container{
display: flex;
align-items: center;
gap: 10px;
.gm-iothrottling-readbyterate{
width: 49px;
input{
text-align: center;
}
}
.gm-units{
margin-left: 20px;
}
}
}

&:required:invalid,
&:focus:invalid {
border-bottom: 1px solid var(--gm-btn-bg-color);
.gm-iothrottling-clearcache{
label{
margin-bottom: 0;
}
}
.gm-iothrottling-clearcache,
.gm-iothrottling-apply{
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
.gm-iothrottling-status{
display: flex;
align-items: center;
gap: 5px;
.gm-iothrottling-notapplied-text{
font-style: italic;
color: #7f7f7f // TODO

button {
margin-top: 20px;
}
}
}
}
5 changes: 5 additions & 0 deletions src/scss/components/_widgetwindow.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,4 +217,9 @@
display: flex;
flex-direction: column;
}

.gm-separator {
width: calc(100% + $modal-x-padding + $modal-x-padding);
margin-left: -$modal-x-padding;
}
}
33 changes: 16 additions & 17 deletions tests/unit/iothrottling.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,11 @@ describe('IOThrottling Plugin', () => {
instance = new Instance();
new IOThrottling(instance, {
IOTHROTTLING_TITLE: 'TEST IOTHROTTLING PLUGIN TITLE',
IOTHROTTLING_PROFILE: 'TEST IOTHROTTLING PLUGIN PROFILE',
IOTHROTTLING_PROFILE_NONE: 'TEST IOTHROTTLING PLUGIN PROFILE NONE',
IOTHROTTLING_PROFILE: 'TEST PROFILE',
IOTHROTTLING_READ_BYTERATE: 'TEST IOTHROTTLING PLUGIN READ BYTERATE',
IOTHROTTLING_READ_BYTERATE_EXAMPLE: 'TEST IOTHROTTLING PLUGIN READ BYTERATE EXAMPLE',
IOTHROTTLING_READ_BYTERATE_CUSTOM: 'TEST IOTHROTTLING PLUGIN READ BYTERATE CUSTOM',
IOTHROTTLING_READ_BYTERATE_NONE: 'TEST IOTHROTTLING PLUGIN READ BYTERATE NONE',
IOTHROTTLING_BYTERATE_UNIT: 'TEST IOTHROTTLING PLUGIN BYTERATE UNIT',
IOTHROTTLING_UPDATE: 'TEST IOTHROTTLING PLUGIN UPDATE BUTTON',
IOTHROTTLING_CLEAR_CACHE: 'TEST IOTHROTTLING PLUGIN CLEAR CACHE BUTTON',
Expand All @@ -46,10 +47,8 @@ describe('IOThrottling Plugin', () => {

test('has translations', () => {
expect(plugin.innerHTML).toEqual(expect.stringContaining('TEST IOTHROTTLING PLUGIN TITLE'));
expect(plugin.innerHTML).toEqual(expect.stringContaining('TEST IOTHROTTLING PLUGIN PROFILE'));
expect(plugin.innerHTML).toEqual(expect.stringContaining('TEST IOTHROTTLING PLUGIN PROFILE NONE'));
expect(plugin.innerHTML).toEqual(expect.stringContaining('TEST PROFILE'));
expect(plugin.innerHTML).toEqual(expect.stringContaining('TEST IOTHROTTLING PLUGIN READ BYTERATE'));
expect(plugin.innerHTML).toEqual(expect.stringContaining('TEST IOTHROTTLING PLUGIN READ BYTERATE EXAMPLE'));
expect(plugin.innerHTML).toEqual(expect.stringContaining('TEST IOTHROTTLING PLUGIN BYTERATE UNIT'));
expect(plugin.innerHTML).toEqual(expect.stringContaining('TEST IOTHROTTLING PLUGIN UPDATE BUTTON'));
expect(plugin.innerHTML).toEqual(expect.stringContaining('TEST IOTHROTTLING PLUGIN CLEAR CACHE BUTTON'));
Expand All @@ -60,13 +59,13 @@ describe('IOThrottling Plugin', () => {
test('diskio', () => {
['jean-michel', 'readbyterate -123', '', 'readbyterate invalid'].forEach((invalidValue) => {
instance.emit('diskio', invalidValue);
expect(diskio.select.value).toBe('None');
expect(diskio.dropdownProfile.getValue()).toBe('None');
});

[69, 420].forEach((customValue) => {
instance.emit('diskio', `readbyterate ${customValue * 1024 * 1024}`);
expect(diskio.select.value).toBe('Custom');
expect(Number(diskio.readByteRate.value)).toBe(customValue);
expect(diskio.dropdownProfile.getValue()).toBe('Custom');
expect(Number(diskio.readByteRate.getValue())).toBe(customValue);
});

IOThrottlingProfiles.forEach((profile) => {
Expand All @@ -75,8 +74,8 @@ describe('IOThrottling Plugin', () => {
}

instance.emit('diskio', `readbyterate ${profile.readByteRate * 1024 * 1024}`);
expect(diskio.select.value).toBe(profile.name);
expect(Number(diskio.readByteRate.value)).toBe(profile.readByteRate);
expect(diskio.dropdownProfile.getValue()).toBe(profile.readByteRate);
expect(Number(diskio.readByteRate.getValue())).toBe(profile.readByteRate);
});
});
});
Expand All @@ -92,9 +91,9 @@ describe('IOThrottling Plugin', () => {

sendEventSpy.mockClear();
instance.outgoingMessages = [];
diskio.select.value = profile.name;
diskio.select.dispatchEvent(new Event('change'));
diskio.submitBtn.click();
const dropDownProfile = diskio.profilesForDropdown.find((p) => p.value === profile.readByteRate);
diskio.dropdownProfile.setValue(dropDownProfile, true);
diskio.widget.querySelector('.gm-btn').click();
expect(sendEventSpy).toHaveBeenCalledTimes(1);
expect(instance.outgoingMessages[0]).toEqual({
channel: 'diskio',
Expand All @@ -104,10 +103,10 @@ describe('IOThrottling Plugin', () => {

sendEventSpy.mockClear();
instance.outgoingMessages = [];
diskio.select.value = 'Custom';
diskio.select.dispatchEvent(new Event('change'));
diskio.readByteRate.value = 69; // Nice
diskio.submitBtn.click();
const dropDownProfile = diskio.profilesForDropdown.find((p) => p.name === 'Custom');
diskio.dropdownProfile.setValue(dropDownProfile, true);
diskio.readByteRate.setValue(69);
diskio.widget.querySelector('.gm-btn').click();
expect(sendEventSpy).toHaveBeenCalledTimes(1);
expect(instance.outgoingMessages[0]).toEqual({
channel: 'diskio',
Expand Down

0 comments on commit 7963f07

Please sign in to comment.