[Question][Module Name] UI is diferent from manuals to my latest installation

[chrisolido]

Question

I am new to devlake and manage to install the latest release.

When I look at the manual I see this :

and my personal installed

How to make my UI like this as my stack is

• github
• jira
• circleci

Screenshots

If applicable, add screenshots to help explain.

Additional context

Add any other context here.

[dosubot[bot]]

To make your DevLake UI look like the one in the manual, which features a grid-based layout with icons and labels for various data sources, you need to ensure that the Menu component in your layout is configured correctly. The provided code already includes a Menu component with menuItems that should contain the necessary icons and labels.

Here is the relevant part of the code that sets up the grid-based layout with icons and labels:

<Sider>
  {import.meta.env.DEVLAKE_TITLE_CUSTOM ? (
    <h2 style={{ margin: '36px 0', textAlign: 'center', color: '#fff' }}>
      {import.meta.env.DEVLAKE_TITLE_CUSTOM}
    </h2>
  ) : (
    <Logo style={{ padding: 24 }} />
  )}
  <Menu
    mode="inline"
    theme="dark"
    items={menuItems}
    openKeys={openKeys}
    selectedKeys={selectedKeys}
    onClick={({ key }) => navigate(key)}
    onOpenChange={(keys) => setOpenKeys(keys)}
  />
  <div style={{ position: 'absolute', right: 0, bottom: 20, left: 0, color: '#fff', textAlign: 'center' }}>
    {version}
  </div>
</Sider>

Ensure that menuItems is properly defined with the necessary icons and labels for your data sources. The menuItems should be an array of objects where each object represents a menu item with properties like label, icon, and key.

Example of menuItems configuration:

const menuItems = [
  {
    key: '1',
    icon: <SomeIconComponent />,
    label: 'GitHub',
  },
  {
    key: '2',
    icon: <AnotherIconComponent />,
    label: 'JIRA',
  },
  {
    key: '3',
    icon: <AnotherIconComponent />,
    label: 'CircleCI',
  },
  // Add more items as needed
];

This configuration will ensure that your DevLake UI features a grid-based layout with icons and labels for various data sources, similar to the one in the manual ^[1].

Details

About Dosu This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

[github-actions[bot]]

This issue has been automatically marked as stale because it has been inactive for 60 days. It will be closed in next 7 days if no further activity occurs.

[github-actions[bot]]

This issue has been closed because it has been inactive for a long time. You can reopen it if you encounter the similar problem in the future.