feat: add SonarCloud dashboard

config-ui/README.md

@@ -14,6 +14,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+
 # DevLake - Configuration UI
 
 The **Config-UI Application** is a **React.js** SPA (Single-Page-Application) that manages the setup and configuration of a **DevLake** Instance.

config-ui/env.example

@@ -19,7 +19,6 @@
 # DEVLAKE_PATH_PREFIX=
 # DEVLAKE_TITLE_CUSTOM=
 # DEVLAKE_COLOR_CUSTOM=
-# DEVLAKE_COPYRIGHT_HIDE=
 
 # All plugins are loaded by default, optional plugins can be loaded
 # eg. DEVLAKE_PLUGINS=github,gitlab

config-ui/package.json

@@ -3,6 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "packageManager": "[email protected]",
+  "type": "module",
   "scripts": {
     "start": "vite",
     "build": "vite build",

config-ui/public/onboard/step-1/github.md

@@ -22,7 +22,7 @@ limitations under the License.
    ![1](/onboard/assets/github/1.png)
 
 2. What is the turnaround time for your Code Review process?
-   
+
    ![2](/onboard/assets/github/2.png)
 
 3. How effective is your CI/CD pipeline?

config-ui/public/onboard/step-3/azuredevops.md

@@ -31,4 +31,4 @@ Yes, data transformations can be applied by setting up a Scope Config for the se
 
 ##### Q4. How often is the data synchronized?
 
-Data synchronization occurs daily. This frequency can be modified on the project details page as needed.
+Data synchronization occurs daily. This frequency can be modified on the project details page as needed.

config-ui/src/app/routrer.tsx

@@ -30,11 +30,8 @@ import {
   ProjectGeneralSettings,
   ProjectWebhook,
   ProjectAdditionalSettings,
-  BlueprintHomePage,
-  BlueprintDetailPage,
   BlueprintConnectionDetailPage,
   Pipelines,
-  Pipeline,
   ApiKeys,
   NotFound,
 } from '@/routes';
@@ -112,31 +109,15 @@ export const router = createBrowserRouter(
               path: 'advanced',
               children: [
                 {
-                  path: 'blueprints',
-                  element: <BlueprintHomePage />,
-                },
-                {
-                  path: 'blueprints/:id',
-                  element: <BlueprintDetailPage />,
-                },
-                {
-                  path: 'blueprints/:bid/:unique',
-                  element: <BlueprintConnectionDetailPage />,
+                  path: 'keys',
+                  element: <ApiKeys />,
                 },
                 {
                   path: 'pipelines',
                   element: <Pipelines />,
                 },
-                {
-                  path: 'pipeline/:id',
-                  element: <Pipeline />,
-                },
               ],
             },
-            {
-              path: 'keys',
-              element: <ApiKeys />,
-            },
           ],
         },
       ],

config-ui/src/index.css

@@ -71,7 +71,6 @@ p {
   height: 100vh;
 }
 
-
 .ant-tour-title {
   padding-right: 28px;
-}
+}

config-ui/src/main.tsx

@@ -16,7 +16,7 @@
  *
  */
 
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { RouterProvider } from 'react-router-dom';
 import { ConfigProvider } from 'antd';
@@ -27,7 +27,9 @@ import { store } from './app/store';
 import { router } from './app/routrer';
 import './index.css';
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root') as HTMLElement);
+
+root.render(
   <ConfigProvider
     theme={{
       token: {
@@ -39,5 +41,4 @@ ReactDOM.render(
       <RouterProvider router={router} fallbackElement={<PageLoading />} />
     </Provider>
   </ConfigProvider>,
-  document.getElementById('root'),
 );

config-ui/src/plugins/components/scope-config-form/index.tsx

@@ -150,7 +150,7 @@ export const ScopeConfigForm = ({
               title="Data Entities"
               description={
                 <>
-                  Select the data entities you wish to collect for the Data Scope. 
+                  Select the data entities you wish to collect for the Data Scope.
                   <ExternalLink link="{DOC_URL.DATA_ENTITIES}">Learn about data entities</ExternalLink>
                 </>
               }

config-ui/src/routes/layout/config.tsx

@@ -20,7 +20,6 @@ import {
   AppstoreOutlined,
   ProjectOutlined,
   ExperimentOutlined,
-  KeyOutlined,
   DashboardOutlined,
   FileSearchOutlined,
   ApiOutlined,
@@ -54,20 +53,15 @@ export const menuItems: MenuItem[] = [
     icon: <ExperimentOutlined />,
     children: [
       {
-        key: '/advanced/blueprints',
-        label: 'Blueprints',
+        key: '/advanced/keys',
+        label: 'API Keys',
       },
       {
         key: '/advanced/pipelines',
-        label: 'Pipelines',
+        label: 'Pipeline Results',
       },
     ],
   },
-  {
-    key: '/keys',
-    label: 'API Keys',
-    icon: <KeyOutlined />,
-  },
 ];
 
 const getMenuMatchs = (items: MenuItem[], parentKey?: string) => {

config-ui/src/routes/layout/layout.tsx

@@ -113,28 +113,22 @@ export const Layout = () => {
             background: 'transparent',
           }}
         >
-          {headerItems
-            .filter((item) =>
-              import.meta.env.DEVLAKE_COPYRIGHT_HIDE ? !['Dashboards', 'GitHub', 'Slack'].includes(item.label) : true,
-            )
-            .map((item, i, arr) => (
-              <ExternalLink key={item.label} link={item.link} style={{ display: 'flex', alignItems: 'center' }}>
-                {item.icon}
-                <span style={{ marginLeft: 4 }}>{item.label}</span>
-                {i !== arr.length - 1 && <Divider type="vertical" />}
-              </ExternalLink>
-            ))}
+          {headerItems.map((item, i, arr) => (
+            <ExternalLink key={item.label} link={item.link} style={{ display: 'flex', alignItems: 'center' }}>
+              {item.icon}
+              <span style={{ marginLeft: 4 }}>{item.label}</span>
+              {i !== arr.length - 1 && <Divider type="vertical" />}
+            </ExternalLink>
+          ))}
         </Header>
         <Content style={{ overflowY: 'auto' }}>
-          <div style={{ padding: 24, margin: '0 auto', maxWidth: 1280 }}>
+          <div style={{ padding: 24, margin: '0 auto', maxWidth: 1280, minWidth: 960 }}>
             <OnboardCard style={{ marginBottom: 32 }} />
             <Outlet />
           </div>
-          {!import.meta.env.DEVLAKE_COPYRIGHT_HIDE && (
-            <Footer>
-              <p style={{ textAlign: 'center' }}>Apache 2.0 License</p>
-            </Footer>
-          )}
+          <Footer>
+            <p style={{ textAlign: 'center' }}>Apache 2.0 License</p>
+          </Footer>
         </Content>
       </AntdLayout>
     </AntdLayout>