Skip to content

GitLab

  • Menu
Projects Groups Snippets
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
  • G g1
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 68
    • Issues 68
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 4
    • Merge requests 4
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Incidents
  • Packages & Registries
    • Packages & Registries
    • Container Registry
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • cto
  • g1
  • Issues
  • #32

Closed
Open
Created Apr 02, 2018 by S Anand@s.anandOwner0 of 6 tasks completed0/6 tasks

Create Gramex UI components

Dashboard ML

We want a markup language to define dashboards.

It must extend HTML

For example:

<div class="container">
  <div class="g-filters">
    - col type="date": Date
    - col type="select": City
  </div>
</div>

This is like the web components approach. This will allow us to seamlessly mix HTML (which is fully extensible) and progressively add components.

Each component may add additional CSS, JS, libraries

This should be a JavaScript library on npm that runs on the browser and node.js that manipulates the original HTML into a revised HTML (including CSS, JS).

The library controls the output of the entire page. Where required, it:

  • adds links to JS / CSS / font / image / ... libraries
  • adds snippets of HTML / CSS / JS at the appropriate locations

This should include a Markdown component

For example:

<div class="g-markdown">
    # Heading
    Text is unindented first.
    ```yaml
    Code fences are supported
    ```
    ```vegam
    // ... including arbitrary extensions
    ```
</div>

Another example:

<div class="filters bg-white shadow pt-2 pb-2">
  <div class="g-filters">
    // example
    [
      {'on': 'filter-time', 'type': 'daterange'},
      {'on': 'filter-status', 'type': 'select', 'name': 'status', 'value': 'Status'},
      {'on': 'filter-users', 'type': 'select', 'name': 'user.id', 'value': 'User Name'},
      {'on': 'filter-uri', 'type': 'select', 'name': 'uri', 'value': 'Page Name'},
      {'on': 'filter-ip', 'type': 'select', 'name': 'ip', 'value': 'IP'}
    ]
  </div>
</div>

This should have a set of components we use in Gramex

  • Markdown
  • Filters
  • Charts

Anything that can be done reasonably easily in Bootstrap is lower priority

Next steps

Actions for @pratap.vardhan

  • Define a spec for markdown, filters and charts Mon 2-Apr-2018
  • Implement a prototype for all three Wed 4-Apr-2018 (assuming no Republic)
  • Productionization
Edited Apr 16, 2018 by Pratap Vardhan
To upload designs, you'll need to enable LFS and have an admin enable hashed storage. More information
Assignee
Assign to
Time tracking