cloudwan / gohan_webui Goto Github PK

View Code? Open in Web Editor NEW

6.0 6.0 15.0 3.94 MB

Gohan Web UI s javascript based webui project for Gohan. MVC will be auto generated based on Gohan schema

License: Other

Shell 0.22% HTML 0.05% JavaScript 96.99% Makefile 0.03% SCSS 2.71%

gohan_webui's People

Contributors

Stargazers

Watchers

Forkers

stepek hewasntoffbymuch thayashi hari-sk latromi juniper marcin-ptaszynski sealionkat gdg michal-damiecki blewin

gohan_webui's Issues

Error on deleting last element on next page on TableView

How to reproduce

Create 6 resources.
Go to next page using pagination
Delete 6th resource.

You see this error pop up.

Cannot read property 'map' of null

proper error handling on form

create / update form will get frozn when I got non-400 errors.

Problem statement

When a Gohan schema has a lot of resources, sidebar menu may contain so many items and this makes hard to find target item.

Proposed UI change

Grouping sidebars using serviceGroup property on sidebar definition or Gohan schema metadata.
Add service selector button on the header. We will show only selected sidebar items with the same serviceGroup defined in the routes.

Configuration change

add "serviceGroup" in the configuration. Service group configuration object contrail a hash object where a key is ID and value should contain metadata for the group. Currently, only title property would be used.

{
    "authUrl": "http://__HOST__:9091/v2.0",
    "gohan": {
        "schema": "/gohan/v0.1/schemas",
        "url": "http://__HOST__:9091"
    },
    "sidebar": [
        {
            "path": "",
            "title": "cat",
            "serviceGroup": "manmal"
        }
    ],
    "serviceGroup": {
        "manmal": {
           "title": "Manmal"
        },
        "fish": {
           "title": "Fish"
        },
    },
}

Implementation update

app/components/Navbar

Add service selector using the serviceGroup configuration. We will pick up the first item from sidebar Item for each group.

app/components/sidebar

filter menuItem by current serviceGroup in the current route.

UI freezes when we have multiple child resources

Issue

UI freezes when we have multiple child resources on detail page on V2.

How to reproduce

Use this schema

policies:
- action: '*'
  effect: allow
  id: admin_statement
  principal: admin
  resource:
    path: .*
schemas:
- description: Customers
  id: customer
  plural: customers
  schema:
    properties:
      description:
        description: Description
        permission:
        - create
        - update
        title: Description
        type: string
      id:
        description: ID
        permission:
        - create
        title: ID
        type: string
        view:
        - detail
      name:
        description: Name
        permission:
        - create
        - update
        title: Name
        type: string
      tenant_id:
        description: Tenant ID
        permission:
        - create
        title: Tenant ID
        type: string
        view:
        - detail
    propertiesOrder:
    - id
    - name
    - description
    - tenant_id
    required: []
    type: object
  singular: customer
  title: Customers
- description: Device Types
  id: device_type
  plural: device_types
  schema:
    properties:
      description:
        description: Description
        permission:
        - create
        - update
        title: Description
        type: string
      id:
        description: ID
        permission:
        - create
        title: ID
        type: string
        view:
        - detail
      name:
        description: Name
        permission:
        - create
        - update
        title: Name
        type: string
      tenant_id:
        description: Tenant ID
        permission:
        - create
        title: Tenant ID
        type: string
        view:
        - detail
    propertiesOrder:
    - id
    - name
    - description
    - tenant_id
    required: []
    type: object
  singular: device_type
  title: Device Types
- description: Devices
  id: device
  parent: customer
  plural: devices
  schema:
    properties:
      customer_id:
        description: parent object
        permission:
        - create
        relation: customer
        title: customer
        type: string
        unique: false
      description:
        description: Description
        permission:
        - create
        - update
        title: Description
        type: string
      device_type_id:
        description: Device Type
        permission:
        - create
        - update
        relation: device_type
        relation_property: device_type
        title: Device Type
        type: string
      id:
        description: ID
        permission:
        - create
        - update
        title: ID
        type: string
        view:
        - detail
      mac_address:
        description: MAC Address
        permission:
        - create
        title: MAC Address
        type: string
      name:
        description: Name
        permission:
        - create
        - update
        title: Name
        type: string
        view:
        - detail
        - list
        - create
      tenant_id:
        description: Tenant ID
        permission:
        - create
        title: Tenant ID
        type: string
        view:
        - detail
    propertiesOrder:
    - id
    - mac_address
    - name
    - description
    - tenant_id
    - customer_id
    - device_type_id
    required:
    - mac_address
    - customer_id
    type: object
  singular: device
  title: Devices
- description: Devices2
  id: device2
  parent: customer
  plural: devices2
  schema:
    properties:
      customer_id:
        description: parent object
        permission:
        - create
        relation: customer
        title: customer
        type: string
        unique: false
      description:
        description: Description
        permission:
        - create
        - update
        title: Description
        type: string
      device_type_id:
        description: Device Type
        permission:
        - create
        - update
        relation: device_type
        relation_property: device_type
        title: Device Type
        type: string
      id:
        description: ID
        permission:
        - create
        - update
        title: ID
        type: string
        view:
        - detail
      mac_address:
        description: MAC Address
        permission:
        - create
        title: MAC Address
        type: string
      name:
        description: Name
        permission:
        - create
        - update
        title: Name
        type: string
        view:
        - detail
        - list
        - create
      tenant_id:
        description: Tenant ID
        permission:
        - create
        title: Tenant ID
        type: string
        view:
        - detail
    propertiesOrder:
    - id
    - mac_address
    - name
    - description
    - tenant_id
    - customer_id
    - device_type_id
    required:
    - mac_address
    - customer_id
    type: object
  singular: device2
  title: Devices2

Create customer resource and go detail page
Push create button on device

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.