kimchi-project / kimchi

An HTML5 management interface for KVM guests
https://github.com/kimchi-project/kimchi/releases/latest
Other
3.11k stars 364 forks source link

Change icon to distinguish image generated template and iso generated template #606

Open lvroyce opened 9 years ago

lvroyce commented 9 years ago

Image generate template and ISO generated template use the same icon, which makes them difficult to distinguish, we need to use a different one for ISO template.

samhenri commented 8 years ago

Should this be done with the Template modal window when selecting a template or with the whole template list? The icons in the modal window are for remote or local images. The /storagevolumes/ request usually looks like this:

[
  {
    "os_distro":"ubuntu",
    "capacity":686817280,
    "name":"ubuntu-16.04-server-amd64.iso",
    "format":"iso",
    "bootable":true,
    "isvalid":true,
    "used_by":[],
    "allocation":686821376,
    "os_version":"16.04",
    "has_permission":true,
    "path":"/var/lib/kimchi/isos/ubuntu-16.04-server-amd64.iso",
    "type":"file"
  }
]

While the /distros/ will receive something like this:

[
  {
    "os_distro":"debian",
    "path":"http://ftp.acc.umu.se/debian-cd/8.5.0-live/amd64/iso-hybrid/debian-live-8.5.0-amd64-gnome-desktop.iso",
    "name":"Debian jessie",
    "os_arch":"x86_64",
    "os_version":"8.5"
  }
]

And the main Templates page looks like this:

[
  {
    "cpu_info":{
      "maxvcpus":1,
      "vcpus":1
    },
    "graphics":{
      "type":"vnc",
      "listen":"127.0.0.1"
    },
    "cdrom":"http://mirrors.kernel.org/fedora/releases/23/Live/x86_64/Fedora-Live-KDE-x86_64-23-10.iso",
    "networks":[
      "default"
    ],
    "icon":"plugins/kimchi/images/icon-fedora.png",
    "os_distro":"fedora",
    "name":"fedora23.1470402536421",
    "disks":[
      {
        "index":0,
        "format":"qcow2",
        "pool":{
          "type":"dir",
          "name":"/plugins/kimchi/storagepools/default"
        },
        "size":10
      }
    ],
    "invalid":{},
    "os_version":"23",
    "memory":{
      "current":974,
      "maxmemory":974
    },
    "folder":[]
  }
]

Where exactly should we display this new icon? Should we look only to local images and get the "format" key from the JSON, trim the "path" and/or "cdrom" values and get the file extension? I don't have any local image configured but here's what the modal window looks like today: following_isos For local images it shows this icon: http://fontawesome.io/icon/hdd-o/ Should we remove this icon and replace for a different icon for .iso and .img files or display a new icon next to this HD drive icon (and the globe icon too, if we have to check for remote paths)? Currently there are no FontAwesome icons that we could use to distinguish img from iso files. I think we can use their SVG source from http://fontawesome.io/icon/file-o/ and add a black label on top of it with the extension.

peterpennings commented 8 years ago

@alinefm @danielhb any updates on this issue?

danielhb commented 8 years ago

"Should we remove this icon and replace for a different icon for .iso and .img files or display a new icon next to this HD drive icon (and the globe icon too, if we have to check for remote paths)?"

A new icon next to the HD drive/Globe icon would be good.

"Currently there are no FontAwesome icons that we could use to distinguish img from iso files. I think we can use their SVG source from http://fontawesome.io/icon/file-o/ and add a black label on top of it with the extension."

Looks good to me!

samhenri commented 8 years ago

@danielhb @alinefm Just to confirm, if 'remote' then show the icon based on the extension on the file path and if local from the 'format' key or should I ignore that the user can rename the file to a different extension and go ahead and use the same logic to local and remote images?

samhenri commented 8 years ago

I've generated these two SVG files. I tried with a black rectangle behind the text but I think it wasn't readable enough. Let me know what you think.

file-o-iso file-o-img

alinefm commented 8 years ago

Just a complement. The icon has added in the "Add Template" dialog to identify the type of the input file (ISO or IMG, local or remote). But this specific issue is related to the Template view (List and Gallery view) and "Add guest" dialog. Said that, I will keep this issue open to track the Template and "Add guest" which may have the same icons to identify the Template type. In addition to local ISO, local IMG and remote ISO, we also support netboot Templates so we also need an icon to identify netboot template which must be different from remote ISO. Also do not forget to add a mouse hover message to user can know on what the icon is related to.

samhenri commented 8 years ago

Hi @alinefm, the original post didn't mentioned where the icons should be placed and as the discussion advanced we kept working on the modal window. So, since we'll have to work on the Template list and view, I have more questions: -Should we add the remote and local image icons to the template view? I think two icons would look weird specially because this label on the "file" icon is not very readable in small sizes. I guess we should add the format as an overlay above the globe and hdd icons and then use these two new icons on the grid/list. -Where should we add these icons on the grid/list? For the list I think we could append the icon before the template name and for the gallery view we could copy the styles used on the modal window and place the icons in the corner. Just remember that the "invalid template" icon is shown on the same spot so we need to define a priority. I think the invalid template icon should appear before the the local/remote/netboot icon. What do you think? -Any suggestion for the netboot icon? I don't think we should repeat the globe pattern but I've seen some icons that are basically a globe above a HDD drive. What do you think of this? http://jsfiddle.net/sguimaraes/f0zg3282/

alinefm commented 8 years ago

Hi @samhenri

I agree with all your suggestion. Go ahead on that. =)