harvester/harvester-ui

Harvester UI

harvester-ui

Harvester UI. For the other Rancher UI see rancher/ui.

Build Setup

Running for development

This is what you probably want to get started.

# install dependencies
$ yarn install

# serve with hot reload at https://localhost:8005
# using the endpoint for your Steve (or Rancher) API
$ API=http://localhost:8989 yarn dev

# build for production and launch server
$ yarn build
$ yarn start

# generate static project
$ yarn generate

Running with standalone Steve on a Mac

cd steve
make run-host

cd harvester-ui
docker build -f Dockerfile.dev -t rancher/harvester-ui:dev
docker run -v $(pwd):/src \
  -v dashboard_node:/src/node_modules \
  -p 8005:8005 \
  -e API=http://172.17.0.1:8989 \
  rancher/harvester-ui:dev

# The first time will take forever installing node_modules into the volume; it will be faster next time.
#
# Goto https://localhost:8005

Creating a Steve user

Steve does not currently create any default user to login to when it is first run. Use kubectl to apply this to create an admin/admin user:

---
apiVersion: management.cattle.io/v3
kind: User
metadata:
  name: admin
principalIds:
  - local://admin
enabled: true
username: admin
# bcrypt hash of "admin" , or use e.g. https://bcrypt-generator.com/ to generate your own
password: $2a$10$lQpf/73orx5T3TBzbu.xNOXFgODGsR4wc39vTGc6Hbt8cdQVza.Pq
---
apiVersion: rbac.authorization.k8s.io/v1
kind: ClusterRoleBinding
metadata:
  name: default-admin
roleRef:
  apiGroup: rbac.authorization.k8s.io
  kind: ClusterRole
  name: cluster-admin
subjects:
- apiGroup: rbac.authorization.k8s.io
  kind: User
  name: admin

License

Copyright (c) 2014-2021 Rancher Labs, Inc.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

harvester-ui's Issues

Settings list page

• Make the settings page match the one we have for Cluster Manager (remove Age, add Value field to table and show the value for that setting) We have a component you should be using for this... connect with Vincent.

Table and list page should look like this:

The question about deployment

When I execute the following command, everything is fine

API=http://localhost:6443 yarn dev

but when I access the url(https://xx.xx.xx.xx:8005), I get error logs

Remove progress from image list view

• Remove progress, the state should show if it's still in progress and it's worthless once it's uploaded.
  

Network text changes & "Type" question

Text Changes:

• On Network list page : If the Network NIC isn't moved into Edit host, then the warning message should change to -
  "You must configure a network in Settings before you can create a new network." have "Settings" be a link to the network settings.

• If the physical NIC is invalid in settings: on Network list page: CHange the text to say "Physical NIC value in Setting is invalid". Have "Settings" be a link to the network settings.

• In Network setting if you enter a wrong NIC, the message should say '[nic field info] is not a valid physical NIC."

Questions in Settings & Create Network:

1. I noticed in Network Setting and Create Network, in the Type drop-down you can only select VLAN. If that is the only option it probably shouldn't be a drop-down (or a field at all)

2. If you can have more than one "Type", then the behavior should be: If only 1, show it as a regular read-only field (not a drop-down). Once there is more than 1, it should change to active and a drop-down field.

Labels Enhancement

Now we can delete all labels of resources, maybe some labels should not be deleted.
We should provide the configuration that labels cannot be deleted in it.

Browser header name

Dashboard => Harvester

Virtual Machine list page

• Change top title from VirtualMachines to Virtual Machines
  

• Change left menu pane from Virtual Machine to Virtual Machines (add the s)
  

• Remove the console drop-down button and put the two actions in the action menu for each VM

Move this:

Into here:

• Why is there a namespace field? Can I change where it is going? I didn't see that in the Create? If it's always going to be the same and I can't switch it can we remove this field?

websocket address error

Steps to reproduce:

Create a VM
when status is not running
click serial console

on VM detail page, the status is always Active

on the VM detail page, the status is always Active regardless of the current status is either failed or an error.

Create Volumes UI polish

• Top title should say "Volume: Create"

• 1st line Name & Description component

• Should have 3 tab component after

• First tab should be Basic Information, 1st line Source & Image, 2nd line Size/Unit (1 UnitInput component) & Storage Class

• Second tab should be Labels & Annotations (there is a component for this)

• Third tab should be Advanced Options

Icons are not correct?

• The icons in the Action menu are not the same ones we are using?
  

• We aren't using icons on the Left menu pane? Should these be here?
  

Hardware address should be not case sensitive

Although the VM is running, ConsoleBar is unavailable

Log out take me to broken page instead of back to log in page.

Issue:
When I log out as a local user it takes me back to a broken page instead of log in

Console button not work

The console button is not work in virtual machine detail page, shown as below.

Cursor can not shift right in web vnc console.

The cursor can not shift right to click sound icon.

Redesign Login page

The login page is not consistent with our new login.
@lvuch - will give you mocks

Add Chinese Simplified Translation

add Chinese Simplified translation of Harvester

Make the window title is consistent with VM name

Template list page UI polish

• Make each template their own "section"

• Have name of template at top

• Table column titles should be: State, Version, Age

• Add set as default to the action menu on the left for each version.

Top Menu issues

Top left menu:

• Cow should be 1/2 cow coming in from left
• Harvester text is wrong font size - 14 px

Harvester:

Cluster Explorer:

Left menu pane:

• Rename "Home" to "Dashboard"
  

Can't click on Create button, but it doesn't looked disabled (Network)

Issue: On the Network list page, the Create button is disabled (I assume because the NIC isn't setup), but the button looks active. Should have disabled "look".

Create button says created even thou it wasn't in Create Network

• If I don't enter a Vlan ID, the create button says it was created.
  

Redesign home page to be a Dashboard

The home page needs to be changed to full Dashboard: We should probably discuss what info you would like to see in each section but I took a first shot:

Create Image UI polish

• Put Image Name & Description on top (use name/description component)
• Put Url field on second line
• Take Label & Annotation out of tabs and move them below URL, like this (there might be a component for this?):
  

failed to create multiple instances

Issues:

1. failed to create multiple instances, the second VM shows
   Error creating DataVolume aa-disk-0-c5cs8: admission webhook "datavolume-validate.cdi.kubevirt.io" denied the request: Destination PVC already exists
2. VM listing page did not show all new added VMs, need to refresh the page to get it to display correctly.

Networks list page

add annotations

version: 1
config:
  - type: physical
    name: enp1s0
    subnets:
      - type: dhcp
  - type: physical
    name: enp2s0
    subnets:
      - type: static
        address: 10.10.1.110/24
        gateway: 10.10.1.0

Add networks.harvester.cattle.io/ips: [“10.10.1.22/24”] to annotation when there is an address

volume size error tip undefine

harvester.validation.sizeRange il18 miss
find harvester.validation.volume.sizeRange not harvester.validation.sizeRange

harvester-ui/utils/validators/vm-datavolumes.js

Line 19 in 514c4f6

errors.push(t('harvester.validation.sizeRange'));

Redesign all Detail pages

All the detail pages will need to be redesigned.
@lvuch - will give you mocks
@vincent99 - will give you the new top menu

Networks page is always showing the error message

The networks page is always showing the error message even if the network condition is successfully configured.

Log In shouldn't tell which field has failed - general message is better

Issue - when my log in has failed it tells me that my password has failed (recognized the user & failed the password). We shouldn't tell the user which field failed. No matter what fails it should say "Log in failed: Check your credentials, or your account may not be authorized to log in."

Reorder Left Menu pane

• Dashboard
• Hosts
• Virtual Machines
• Volumes
• Images
• Advanced ^ (drop-down menu - this is basically for things you set once or not often enough to show all the time)
  • VM Templates
  • Networks
  • SSH Keys
  • Users
  • Settings

Example:

Add Edit to host

We should add the ability to Edit the host &

• Allow a friendly name to be set

• Move the Network setting from setting into the edit host. Each host may have it's own physical NIC so setting one globally isn't a good idea?

SSH key configuration does not take effect

Version
master 11/17

Steps to reproduce

1. Create an ssh key
2. Create a VM and select the ssh key
3. Failed to log in with the ssh key

Other details
The VM yaml is :

      volumes:
      - cloudInitNoCloud:
          userData: |
            #cloud-config
            # some other stuff...
            sshAuthorizedKeys:
              - >-
                ssh-rsa
                AAAAB3NzaC1yc2EAAAADAQABAAABAQCmAZFWNfXPfzV2o203bW1107LpQeynoQ4JhByXRDM3rd1gHW60Xdcbpr7Yi9JHiqSR7YIW+mMpmjacr9bwQ1EjkfsozxHrx69IFfvYRpasBaXdBdHD/Ye3DZ28rQvEEZbyWsa9bIWcWb/m/PPmb2I4p2gX7dGxFxR/DCwUyNk95pra+w5z2H7IyXMHwTI+60dV+GguHaWfCwA/LUnDsq253hJsmAvn4Sr3G2hXqO0x+bD7hWwJHYHi6z1ZU62W3ex7w6D/0+YNh1AhTCkBI9gSKOqnWbkAekbvItSKVVqN9IfkXvvZBsgKPKjledhAHnAvXjt/+Pfkq3RhSEZp7+iL

The expected key should be ssh_authorized_keys instead of sshAuthorizedKeys.
ref: https://cloudinit.readthedocs.io/en/latest/topics/examples.html

Create Template UI polish

• This should be exactly the same as Create Virtual Machine.

• Only show "Set as Default" checkbox on the creation of more then 1 version.

Create VirtualMachine UI polish

• On all drop-down that have a static list that is under 10 items, they should be marked so that the cursor doesn't show when I click on the drop-down. Set the drop-down field :searchable="false"

• Use the Name/Description component (move count to end) <NameNsDescription>

• Use VM Template needs to be moved out of the Create screen & be before in a selection page. (Lauren will give you design for that) <CruResource>

• Change Image boxes to a searchable drop-down with list of images.
  <LabeledSelect>

• Remove Add Image button (should not leave create screen in middle)

• All other fields will go into the side-tabbed component (where the tabs are on the left side not on top) <Tabbed :side-tabs="true">
  

• 1st tab - Basic - Fields going into this tab: CPU, Memory, Authentication, Start VM on create checkbox

• Memory field should just be GiB and should use the <UnitInput>
  

• Authentication field should be multi-select drop-down <LabledSelect :multiple="true" :searchable="true" ...>

• New SSH key button, either remove it. Or take out modal and put into two fields side by side and rename to Create SSH Key. Also if you decide to add the key, need to automatically show it after create & have it checked (show up in the drop-down)

• 2nd tab - Volumes (Change from Disks) - (Will new volumes I create here get added to Volumes list page?)

• Change table to be a "block" control with Add Volume & Add Existing Volume buttons. Fields that won't change should be on top (Name/Type). Design: Block control is standard and you can get from Lauren or Vincent (<ArrayListGrouped>):

• Can we change "blank" in Source drop-down to "New"?

• 3rd tab - Networks

• Change Table to be "block" control. Same as above... design. Name & Model on first row, Network & Type on second, with Mac address on third.

• For the tooltip, remove the text "Protip:" Change text to say "Guest system address."

• 4th tab - Advanced Options - put all advanced fields in this tab.

• Remove tooltip from Host Name field in Advanced. Host Names by default normally have to be lowercase, number & - only. This is a standard. Also you don't have to remember the host name because we don't hide it? They can always come back and get it if they need to. Also as Advanced Users they should really be expected to know what these fields are for and their limits.