rokka-io / rokka-dashboard Goto Github PK
View Code? Open in Web Editor NEWServerless dashboard for rokka.io
Home Page: https://rokka.io
License: MIT License
Serverless dashboard for rokka.io
Home Page: https://rokka.io
License: MIT License
After doing #31 we can refactor the NewStack component to be much simpler.
At the moment it's a big mess of juggling input, data, output.
with a completely new organization that has no images, there is a "no images found" message at https://rokka.io/dashboard/#/images
when i upload an image in the browser, it is shown but the message stays until i reload the page.
it is a detail, but it is likely a first contact of new users and thus defines first impressions...
eg:
{subject_area: {width: 322, height: 305, y: 72}}
x is missing, that should be fixed by the API but we can in the meantime default to 0.
How to reproduce
Observed behaviour
No results found when searching for 12345 in merchant_sku as metadata
expected behaviour
Image can be found in regard of the datatype content/format
What technologies are used?
How is the code structured?
How can you test?
...
When trying to set the Secondary Opacity on the "composition"-stack to 0 (which is a legit value for opacity) the UI will always reset it to 100.
Using jest.
We added a new operation 'content_disposition' to rokka, which allows to download an image. And this operation isn't available yet in the UI.
when i try to create a stack with a resize operation, there is a javascript error in the browser console (both firefox and chrome):
TypeError: e is undefined
Tt previewImage.js:9
value previewImage.js:66
promise callback*value previewImage.js:61
value NewStack.js:85
React 7
S App.js:20
D index.js:40
n index.js:101
I index.js:108
promise callback*I index.js:96
466 index.js:10
a (index):1
187 focusarea-icon.svg:1
a (index):1
l (index):1
e (index):1
<anonymous> main.9b0b02d4.chunk.js:1
react_devtools_backend.js:2430:23
Uncaught Error: schema is invalid: data.properties['scale'].type should be equal to one of the allowed values, data.properties['scale'].type should be array, data.properties['scale'].type should match some schema in anyOf
validateSchema ajv.js:183
_addSchema ajv.js:327
compile ajv.js:112
value NewStack.js:115
value NewStack.js:107
value NewStack.js:156
React 23
S App.js:20
D index.js:40
n index.js:226
promise callback*n index.js:225
I index.js:108
promise callback*I index.js:96
466 index.js:10
a (index):1
187 focusarea-icon.svg:1
a (index):1
l (index):1
e (index):1
<anonymous> main.9b0b02d4.chunk.js:1
If settings in the Options on one Stack are set and a second Stack has other Options set and I click from one Stack to the second one, the Options won't update visually. If I then select a third Stack which hasn't the block Options enabled and go back to one of the others, the Options block will show the settings as expected
There are various components involved in juggling with data received from the API.
We should refactor this to a separate layer which does all this, tailored exactly to how the components need data.
As we ejected because of missing SCSS support, this isn't too easy sadly :/
I have several stacks with different image quality settings. The stacks follow a naming scheme of text_width_height_density, e.g. tiny_64_64_1 and tiny_64_64_2. When I open the first stack, the values for image quality are correct. In the second one (tiny_64_64_2), the values are wrong. They show the values for the other stack (tiny_64_64_1).
Stats are updated every ~12 hours which means that the number of sourceimages on the dashboard's dashboard isn't always current. We could instead use the total hits from the sourceimages call, which we do anyway.
Indicate on the other numbers that they may not be up to date.
The backend has now info about past and future costs -> https://api.rokka.io/billing/$org
Would be nice, if we could display in the dashboard in a nice format, for the current and the last few months maybe (the ?from and ?to parameters exist like in the /stats call, but default to the current month and the returned data is always for the full month)
It has the format
{
"$master_organiation": {
"$year-$month": {
"organizations": {
"$org1": {
"traffic": {
"$tier1": {
"amount_in_gb": 0.05,
"price_per_gb": 0.5,
"price_in_chf": 0.03
},
"total": {
"amount_in_gb": 0.05,
"price_in_chf": 0.03
}
},
"storage": {
"$tier1": {
"amount_in_gb": 20.66,
"price_per_gb": 0.4,
"price_in_chf": 24.26
},
"total": {
"amount_in_gb": 154.66,
"price_in_chf": 24.26
}
},
"total": {
"price_in_chf": 24.29
}
},
"$org2": {
"traffic": {
...
}
},
"combined": {
"traffic": {
"$tier1": {
"amount_in_gb": 5.0,
"price_per_gb": 0.5,
"price_in_chf": 2.5
},
"total": {
"amount_in_gb": 5.0,
"price_in_chf": 2.5
}
},
"storage": {
"$tier": {
"amount_in_gb": 40,
"price_per_gb": 0.4,
"price_in_chf": 16
},
"total": {
"amount_in_gb": 40,
"price_in_chf": 16.0
}
},
"total": {
"price_in_chf": 30.29
}
},
"combined_forecast": {
"traffic": {
"$tier1": {
"amount_in_gb": 20.25,
"price_per_gb": 0.5,
"price_in_chf": 10.13
},
"total": {
"amount_in_gb": 20.25,
"price_in_chf": 10.13
}
},
"storage": {
"$tier2": {
"amount_in_gb": 200.99,
"price_per_gb": 0.4,
"price_in_chf": 80.6
},
"total": {
"amount_in_gb": 50,
"price_in_chf": 25.6
}
},
"total": {
"price_in_chf": 143.73
}
}
}
}
}
When i try to save a new stack it seems like it will take forever.
Opening the browser console reveals an error:
schema is invalid: data.properties['resize_to_primary'].type should be equal to one of the allowed values, data.properties['resize_to_primary'].type should be array, data.properties['resize_to_primary'].type should match some schema in anyOfschema is invalid: data.properties['resize_to_primary'].type should be equal to one of the allowed values, data.properties['resize_to_primary'].type should be array, data.properties['resize_to_primary'].type should match some schema in anyOf at v.validateSchema (ajv.js:196)
Plattform:
MacOS X / Chrome Version 72.0.3626.109
From Slack:
toflar: If you delete a file in the UI, the list is not refreshed, it just remains in there
chregu: Itβs a little bit tricky, since that list is loaded from Solr, which takes a few seconds to reindex. But of course the UI could fake it
If you try to change the image quality parameters of a stack you always get an error "should be an integer"
As we now support videos (kinda), the thumbnails in the dashboard overview are empty for those. Even worse, since we link to the *.mp4 version in that case, the browser downloads that.
Also in general, we always download the full resolution on the image for the overview. Would be great, if we could resize that to the actual needed values and change the ending for videos. If you use "png" or "jpg" for a video, it will display a thumbnail.
Or maybe even better, just use ".jpg" for "image/jpeg" and ".png" for everything else (due to alpha channel issues). Shouldn't matter much size related with the size of the thumbnails (as long as you also resize them to the preview size)
New stacks shouldn't set the jpg/webp quality, rokka tries to be smart when they're not set (but of course you can set them, if you wanna have an exact quality)
Steps to reproduce:
test
with value value
)test
to search for and the value value
Actual result:
test
and user:test
user:test
it will add another option user:user:test
null
as the optionExpected result:
test
and finds (if the backend responds) that image.test
onlyImprove no stack selected page content.
Actual behavior : if you go on an image and click the "Delete Image" button, hitting keyboard "Enter" will delete it, but the modal will still be displayed. Hitting the remaining modal button "Yes, delete this image" will result in a "Error deleting image ", but image has been deleted.
Desired behavior : hitting "Enter" should hide the modal and proceed accordingly.
When you create a new organization on https://rokka.io/dashboard/#/signup you should get automatically signed in into the rokka-dashboard.
But this doesn't work at the moment, you stay on the signup-page and get an error "Error getting organizations".
Allow to use the new stack operation "primitive" also in the "Stacks" tab of the dashboard.
e.g. secondary_image
for composition
Currently, the stack operations list is ordered alphabetically. And 'cause of that, there's for example the quite obscure "addframes" and "alpha" operations on top. Maybe we should put the common ones (like resize and crop) on top and the rest alphabetically. Of course needs some "hand crafting", but would help the enduser
Several are not implemented in the dashboard -> change that somehow.
The current datepicker is not maintained.
Either start to maintain it or switch to another datepicker which is compatible.
vulnerability alert is for hoek, which is some dependency of webpack-dev-server
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.