github.com/turbot/steampipe@v1.7.0-rc.0.0.20240517123944-7cef272d4458/ui/dashboard/README.md (about)

     1  # Steampipe Dashboards
     2  
     3  This will allow you to develop the dashboards UI locally. To get started:
     4  
     5  - Ensure you have `steampipe` installed - https://steampipe.io/downloads
     6  - Ensure you have `node` LTS installed - https://nodejs.org/en/download/
     7  - Ensure you have `yarn` installed - https://yarnpkg.com/getting-started/install
     8  
     9  ## Start Steampipe
    10  
    11  - Start your local Steampipe service, and dashboard service, with `steampipe dashboard` (ensure you have navigated to your mod folder with `cd <mod_folder>` first)
    12  
    13  ## UI Setup
    14  
    15  - Navigate to the dashboard UI with `cd ui/dashboard`
    16  - Run `yarn install`
    17  - Run `yarn start`
    18  - The browser will open at http://localhost:3000
    19  - Any changes you make to the source code will be reflected in the dashboard UI in realtime  
    20  
    21  ## Component library
    22  
    23  To browse the dashboard component library do the following:
    24  
    25  - `cd ui/dashboard`
    26  - `yarn install`
    27  - `yarn storybook`
    28  
    29  Your default browser will open up the component library.
    30  
    31  ## Adding new `chart` types
    32  
    33  - Navigate to `ui/dashboard/src/components/dashboards/charts`
    34  - Add a folder for the new chart type and add `index.tsx`
    35  - Ensure you call `registerComponent` before the export
    36  - Import this new chart in `ui/dashboard/src/utils/registerComponents.ts`
    37  - Add Storybook stories for your component in `index.stories.js`
    38  
    39  - ## Adding new `flow` types
    40  
    41  - Navigate to `ui/dashboard/src/components/dashboards/flows`
    42  - Add a folder for the new flow type and add `index.tsx`
    43  - Ensure you call `registerComponent` before the export
    44  - Import this new flow in `ui/dashboard/src/utils/registerComponents.ts`
    45  - Add Storybook stories for your component in `index.stories.js`
    46  
    47  - ## Adding new `hierarchy` types
    48  
    49  - Navigate to `ui/dashboard/src/components/dashboards/hierarchies`
    50  - Add a folder for the new hierarchy type and add `index.tsx`
    51  - Ensure you call `registerComponent` before the export
    52  - Import this new hierarchy in `ui/dashboard/src/utils/registerComponents.ts`
    53  - Add Storybook stories for your component in `index.stories.js`