Dashbuilder search component

[buger]

Hello!

Will be great to add some dynamic search capability to the tables elements, or maybe enchance dropdown element to have search activity. When there are a lot of elements in table, like hundreds, it is getting very hard to find the row you need.

Thanks!

[jesuino]

Hello @buger

The internal table does not have a search, but we have an external component that has a search capability, see this example:

datasets:
    - uuid: gists
      url: https://api.github.com/gists
      cacheEnabled: true
      expression: >-
          $map($, function($v){
              [$v.created_at,$v.description,$v.files ~> $keys ~> $count]
          })
      columns:
          - id: Created            
          - id: Description
          - id: Total Files
pages:
    - components:
          - displayer:
                component: table
                lookup:
                    uuid: gists

Here's what it looks like:

You can edit it here: https://start.kubesmarts.org/#/import?url=https://raw.githubusercontent.com/jesuino/dashbuilder-yaml-samples/main/basic/Table.dash.yaml

We plan to make this default sometime in future!

[buger]

Amazing, thank you! But how I can add this external component to my local installation? It seems to be using some new syntax? In your example you have:

    - components:
          - displayer:
                component: table
                external:
                    height: 500px 

And I use what currently in the docs:

            components:
              - settings:
                  filter:
                    enabled: true
                    selfapply: true
                    notification: true
                    listening: true
                  table:
                    sort:
                      enabled: true
                      columnId: deployments_count
                      order: DESCENDING

@jesuino

[jesuino]

Hello @buger

The latest dashbuilder version include this component. It is external, but we provide it in the Dashbuilder bundle. Check the folder dashbuilder/components to see all components we provide:

[wsiqueir@localhost dashbuilder-client]$ ls dashbuilder/component/
echarts  map  svg-heatmap  table  timeseries  uniforms  victory-charts

There's a mention to the table component on documentation:

https://www.dashbuilder.org/docs/#_external_components_2

• Notice that displayer is the same as settings we will soon update the docs with this information.

[buger]

I found an interesting issue with external components, and why it was not loading for me, but hard to say why it happens. Before I was uisng https://www.npmjs.com/package/serve to run static server, and for some reason it was going to some kind of redirect loop with iframe pointing to external component. Replicating very easy just run serve --cors. When I replaced it with http-server which you recommend in npm docs it started loading table component.

However how I hit another issues. Data for some reson is not loading there 🤔

I just copy pasted your example, even with gist data source, like this, it shows 0 records 🤔

      - columns:
          - span: 12
            components:
              - settings:
                  component: table
                  lookup:
                    uuid: gists

If I make it standard table, data gets shown as expected:

      - columns:
          - span: 12
            components:
              - settings:
                  lookup:
                    uuid: gists
                  table:

I also tried running your yaml definitin as it is, and again it shows 0 records. How it performs transferring data to iframe, using some kind of postMessage?

I have some 404 errors in http server logs, can it be related somehow?

2023-05-18T07:11:48.282Z]  "GET /tyk.dash.yaml" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Safari/605.1.15"
[2023-05-18T07:11:48.753Z]  "GET /sw.js?params=%7B%22offlineMode%22%3Afalse%2C%22debug%22%3Afalse%7D" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Safari/605.1.15"
[2023-05-18T07:11:48.753Z]  "GET /sw.js?params=%7B%22offlineMode%22%3Afalse%2C%22debug%22%3Afalse%7D" Error (404): "Not found"

Thanks!

[buger]

I have isolated this issue to Safari. Google Chrome displays table with data as expected 🤔 Any ideas on how to overcome this issue? I guess some service worker API differences.

[buger]

And one more question, I see that this component supports being filtered by others, but not yet can filter others. E.g. I can't click on some column, and make it filter other charts?

Can you point me to the source code of this table component, maybe I can try to add this functionality by myself? Any hints?

Thanks!

[jesuino]

Hello @buger

Thanks for the feedback.

We have a known issue with Safari and External Components:

https://issues.redhat.com/browse/KOGITO-7870

Fix is pending...

For the filter capability, it is possible a component to filter other. The external component Table also supports filter but there's a specific parameter that we need to set selectable, see:

datasets:
    - uuid: products
      content: >-
          [
            ["Computers", "Scanner", 5, 3],
            ["Computers", "Printer", 7, 4],
            ["Computers", "Laptop", 3, 2],
            ["Electronics", "Camera", 10, 7],
            ["Electronics", "Headphones", 5, 9]
          ]
      columns:
          - id: Section
            type: LABEL
          - id: Product
            type: LABEL
          - id: Quantity
            type: NUMBER
          - id: Quantity2
            type: NUMBER
pages:
    - components:
          - settings:
                component: table
                filter:
                    notification: true
                table:
                    selectable: true
                lookup:
                    uuid: products
          - settings:
                type: BARCHART
                filter:
                    listening: true
                lookup:
                    uuid: products
                    group:
                        - columnGroup:
                              source: Product
                          functions:
                              - source: Product
                              - source: Quantity
                                function: SUM
                              - source: Quantity2
                                function: SUM

Check it here:

https://start.kubesmarts.org/#/import?url=https://raw.githubusercontent.com/jesuino/dashbuilder-yaml-samples/main/Filter%20External%20Table.dash.yaml

[buger]

Works great, thanks! If I can help somehow fixing this bug, let me know.

[buger]

Feel free to close this ticket