rokka-io / rokka-dashboard Goto Github PK

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.

https://twitter.com/garybernhardt/status/1062760973457514496

Despite the form element being not disabled, i can't check the checkboxes.

Chrome Version 74.0.3729.157 / Mac OS

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

1. Add a metadata (ie. name=merchant_sku, datatype=Array, Value=12345, 6789)

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
        }
      }
    }
  }
}

• Signup
• Login
• new stack
• ...?

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

https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes

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

• remove future class from past month (#51)
• disable click events on future class (#51)
• remove outline from next and prev arrow buttons

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:

1. open images list
2. select an image
3. add some custom metadata to it (e.g. test with value value)
4. go back to image list
5. add the option test to search for and the value value

Actual result:

• the search goes endless and doesn't find anything
• in the select field, there's now test and user:test
• when you select user:test it will add another option user:user:test
• when you click on the X button it's adding null as the option

Expected result:

• It executes a search by test and finds (if the backend responds) that image.
• The select field contains test only
• Pressing on X removes the search and lists all images unfiltered

Improve 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.

Actual:
Dragging a folder onto the drop-zone will show the "uploading..." message.

Expected:
Either nothing, or feedback so the user realizes it's not doing anything.

e.g. secondary_image for composition

• Remove it on the new stacks page
• Make sure to still display it if a stack has set it

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.

• ring-ui date picker would be nice, but how they package it we can't use it
• airbnb/react-dates: see #43 - there seems to be some bugs and it's slower than the current date picker.
• ...?

vulnerability alert is for hoek, which is some dependency of webpack-dev-server