edge / account

Account portal for managing Edge services

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Storage

willgarrett64 opened this issue · comments

Copying from Discord:

  1. /storage I imagine being similar to either /dns or /cdn. It depends on the complexity of the deploy (as in whether it requires its own page)
    image
    image

  2. /storage/:id similar to /dns/:id, with two tabs: Files and Configure
    Files:

  • Upload file form
  • Files list, each with details and cog for actions (edit/delete)

Configure:

  • Whatever config is needed (I imagine here we can list/manage(?) connected CDNs)
  • Delete storage and files

This is just the idea for now. Depending on complexity of Storage, and what other features it needs, we may want more tabs (like CDN/Servers) for things like Metrics, Destroy, etc
image
image

Questions/ideas/thoughts:

  • Do we want a feature to migrate/copy files to/from another storage instance? (Maybe one for the future)
  • Will files be split into directories or just a flat structure?
  • We could add a drag/drop for file uploads.
  • Do we think it would be cleaner to have a table for files rather than list items like in the above screenshot (dns records tab)

Regarding the CDN<->Storage link, I think it's easy enough to add the conditional so that the CDN interface is different for those with beta access. However, as the Content Delivery tab doesn't have a (beta) flag we would need to make it clear somewhere on the CDN page that the drop-down list of storages (for cdn origin) is a beta feature. That being said, I agree that maybe it's best that all the config is done from within the Storage page for now.

We will also need to make it clear the costs somewhere, but I'll need to know more of the pricing structure first. If it fits, maybe we can do another "estimated costs" slider like with CDN deploy (see screenshot).

@adamkdean what I would like from you is a bit more technical detail regarding the config. I think I can get started on a lot of this tomorrow though until you get that over to me.

Config wise, as discussed, a default option and a custom JSON option for now. Only JSON validation check to be done is to check it's a valid JSON object.

image

Do we want a feature to migrate/copy files to/from another storage instance? (Maybe one for the future)

Not right now

Will files be split into directories or just a flat structure?

Directories will be needed yeah

We could add a drag/drop for file uploads.

Good idea, I was thinking this, similar to how easy imgur is

Do we think it would be cleaner to have a table for files rather than list items like in the above screenshot (dns records tab)

Table (as discussed today) would be best for this

Regarding files we will have a file explorer that looks something like this:
image

Plus an option to drag and drop files (there will need to be somewhere in the UI saying this is possible, but that's TBD)
image

File data structure could be like one of two following examples:

// flat
[
  { "filename": "photos/1.jpg", "size": 213490 },
  { "filename": "photos/2.jpg", "size": 213490 },
  { "filename": "photos/3.jpg", "size": 213490 },
  { "filename": "docs/letter.pdf", "size": 213490 },
  { "filename": "something.doc", "size": 213490 }
]

// nested
[
  {
    "directory": "photos",
    "children": [
      { "filename": "1.jpg", "size": 213490 },
      { "filename": "2.jpg", "size": 213490 },
      { "filename": "3.jpg", "size": 213490 }
    ]
  },
  {
    "directory": "docs",
    "children": [
      { "filename": "docs/letter.pdf", "size": 213490 }
    ]
  },
  { "filename": "something.doc", "size": 213490 }
]

I think something more like the second is better as it allows for empty directories, rather than UI determining directory from the file name.

Note to self (and to @adamkdean), will be good to have created and updated timestamps for files/directories (uploaded / last modified).

Some additional features to discuss, maybe for a later stage and not for initial beta launch)

  • multi-select (files and/or folders)
  • multi-delete (using the above multi-select)
  • move file and or folder (and multi-move using above multi-select)
  • navigation using back/forward buttons (on mouse and/or in browser)

Add API key:

  • after deploy, show API key with a "Go to instance" button, rather than auto-redirect
  • on instance management, add API Key tab. Here the key will be hidden (shown by clicking eye icon), and a button to regenerate key (with confirmation modal)

Some notes on how the multi-select of items (files/dirs) works

  • still have the checkbox, but also selected items are highlighted with grey background (see below)
  • click on the item selects/deselects it, and deselects all other items
  • ctrl + click on the item selects/deselects it, and leaves all other items as they are
  • shift + click on the item selects/deselects all items between the last selected item and the item clicked
  • click on the checkbox acts the same as normal ctrl + click
  • shift + click on the checkbox acts same as normal shift + click
  • clicking on any of the other buttons/input (when editing) doesn't affect the selected state of the item
  • if some items are selected but not all, the select-all checkbox has minus symbol [-] (see below)
  • clicking the select-all checkbox will select all, or if all already selected it will deselect all. In addition to selecting/deselecting all, it will set the "last-selected" item as the last (when selecting) or first (when deselecting). E.g. if you deselect all, and then shift + - click on the 5th item, it'll select all items from the first to the 5th. If you select all and then shift + click on the 5th item, it will deselect all from the last to the 5th item.
  • clicking the item name will either open the directory or open the file info in the split-pane (see below)