Add Book icon and update Image component props

Common/Types/Icon/IconProp.ts

@@ -20,6 +20,7 @@ enum IconProp {
     Calendar = 'Calendar',
     Help = 'Help',
     Reload = 'Reload',
+    Book = 'Book',
     JSON = 'JSON',
     Signal = 'Signal',
     Stop = 'Stop',

CommonUI/src/Components/Icon/Icon.tsx

@@ -297,6 +297,14 @@ const Icon: FunctionComponent<ComponentProps> = ({
                 d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"
             />
         );
+    } else if (icon === IconProp.Book) {
+        return getSvgWrapper(
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"
+            />
+        );
     } else if (icon === IconProp.Chat) {
         return getSvgWrapper(
             <path

CommonUI/src/Components/Image/Image.tsx

@@ -8,7 +8,7 @@ import URLFromProject from 'Common/Types/API/URL';
 
 export interface ComponentProps {
     onClick?: () => void | undefined;
-    imageUrl?: URLFromProject | Route | undefined;
+    imageUrl?: URLFromProject | Route | ReactElement | undefined;
     height?: number | undefined;
     file?: File | undefined;
     className?: string | undefined;

CommonUI/src/Components/ImageTiles/ImageTiles.tsx

@@ -1,33 +1,58 @@
 import React, { FunctionComponent, ReactElement } from 'react';
 import URL from 'Common/Types/API/URL';
 import Navigation from '../../Utils/Navigation';
+import Image from '../Image/Image';
+import FieldLabelElement from '../Detail/FieldLabel';
 
 export interface ImageTile {
-    image: ReactElement; 
-    navigateToUrl: URL
+    image: ReactElement;
+    navigateToUrl: URL;
+    title: string;
 }
 
 export interface ComponentProps {
     tiles: Array<ImageTile>;
+    title: string;
+    description: string;
 }
 
 const ImageTilesElement: FunctionComponent<ComponentProps> = (
     props: ComponentProps
 ): ReactElement => {
     return (
-        <div className='grid'>
-            {/** Generate a squares in a grid in tailwind. One square for each tile */}
-            {props.tiles.map((tile: ImageTile, i: number) => {
-                return (
-                    <div className='grid-item' key={i} onClick={()=>{
-                        Navigation.navigate(tile.navigateToUrl, {
-                            openInNewTab: true
-                        });
-                    }}>
-                        {tile.image}
-                    </div>
-                );
-            })}
+        <div>
+            <div>
+                <FieldLabelElement
+                    title={props.title}
+                    description={props.description}
+                />
+            </div>
+            <div className="flex mt-5 mb-5 space-x-5">
+                {/** Generate a squares in a grid in tailwind. One square for each tile */}
+                {props.tiles.map((tile: ImageTile, i: number) => {
+                    return (
+                        <div
+                            key={i}
+                            className="p-3 cursor-pointer pb-5"
+                            onClick={() => {
+                                Navigation.navigate(tile.navigateToUrl, {
+                                    openInNewTab: true,
+                                });
+                            }}
+                        >
+                            <div>
+                                <Image
+                                    className="h-20 w-20"
+                                    imageUrl={tile.image}
+                                />
+                            </div>
+                            <div className="text-sm text-gray-400 w-full text-center mt-2">
+                                {tile.title}
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
         </div>
     );
 };

Dashboard/src/App.tsx

@@ -15,7 +15,6 @@ import OngoingScheduledEvents from './Pages/Home/OngoingScheduledMaintenance';
 
 import useAsyncEffect from 'use-async-effect';
 
-import Logs from './Pages/Logs/Logs';
 import Navigation from 'CommonUI/src/Utils/Navigation';
 import RouteMap from './Utils/RouteMap';
 import PageMap from './Utils/PageMap';
@@ -348,18 +347,6 @@ const App: () => JSX.Element = () => {
                     }
                 />
 
-                {/* Logs */}
-
-                <PageRoute
-                    path={RouteMap[PageMap.LOGS]?.toString() || ''}
-                    element={
-                        <Logs
-                            {...commonPageProps}
-                            pageRoute={RouteMap[PageMap.LOGS] as Route}
-                        />
-                    }
-                />
-
                 {/* Settings Routes */}
 
                 <PageRoute

Dashboard/src/Components/Images/SvgImages/java.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 90.63 122.88" style="enable-background:new 0 0 90.63 122.88" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#5382A1;} .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#E76F00;}</style><g><path class="st0" d="M29.19,95.03c0,0-4.7,2.73,3.34,3.65c9.74,1.11,14.71,0.95,25.44-1.08c0,0,2.82,1.77,6.76,3.3 C40.68,111.22,10.29,100.31,29.19,95.03L29.19,95.03z"/><path class="st0" d="M26.25,81.58c0,0-5.27,3.9,2.78,4.73c10.4,1.07,18.62,1.16,32.83-1.58c0,0,1.97,1.99,5.06,3.08 C37.83,96.32,5.43,88.48,26.25,81.58L26.25,81.58z"/><path class="st1" d="M51.03,58.76c5.93,6.82-1.56,12.96-1.56,12.96s15.05-7.77,8.14-17.5C51.15,45.15,46.2,40.64,73,25.1 C73,25.1,30.94,35.6,51.03,58.76L51.03,58.76z"/><path class="st0" d="M82.84,104.98c0,0,3.47,2.86-3.83,5.08c-13.88,4.21-57.79,5.48-69.99,0.17c-4.38-1.91,3.84-4.55,6.42-5.11 c2.7-0.59,4.24-0.48,4.24-0.48c-4.88-3.43-31.52,6.74-13.53,9.66C55.2,122.25,95.56,110.72,82.84,104.98L82.84,104.98z"/><path class="st0" d="M31.45,67.64c0,0-22.33,5.3-7.91,7.23c6.09,0.82,18.23,0.63,29.54-0.32c9.24-0.78,18.52-2.44,18.52-2.44 s-3.26,1.4-5.62,3.01c-22.68,5.96-66.49,3.19-53.88-2.91C22.77,67.05,31.45,67.64,31.45,67.64L31.45,67.64z"/><path class="st0" d="M71.51,90.03c23.05-11.98,12.39-23.49,4.95-21.94c-1.82,0.38-2.64,0.71-2.64,0.71s0.68-1.06,1.97-1.52 c14.72-5.17,26.04,15.26-4.75,23.36C71.05,90.64,71.4,90.32,71.51,90.03L71.51,90.03z"/><path class="st1" d="M57.61,0c0,0,12.77,12.77-12.11,32.41c-19.95,15.75-4.55,24.74-0.01,35C33.85,56.91,25.3,47.66,31.03,39.05 C39.45,26.41,62.76,20.29,57.61,0L57.61,0z"/><path class="st0" d="M33.71,122.49c22.13,1.42,56.11-0.79,56.92-11.26c0,0-1.55,3.97-18.29,7.12c-18.89,3.55-42.18,3.14-56,0.86 C16.34,119.22,19.17,121.56,33.71,122.49L33.71,122.49z"/></g></svg>

Dashboard/src/Components/Telemetry/Documentation.tsx

@@ -11,56 +11,72 @@ import JavaImage from '../Images/SvgImages/java.svg';
 import CSharpImage from '../Images/SvgImages/csharp.svg';
 
 import URL from 'Common/Types/API/URL';
+import Card from 'CommonUI/src/Components/Card/Card';
 
-
-const TelemetryDocumentation: FunctionComponent = (
-
-): ReactElement => {
-
-    const docUrl: URL = URL.fromString("https://github.com/OneUptime/oneuptime/tree/master/Docs/Telemetry/OpenTelemetry");
+const TelemetryDocumentation: FunctionComponent = (): ReactElement => {
+    const docUrl: URL = URL.fromString(
+        'https://github.com/OneUptime/oneuptime/tree/master/Docs/Telemetry/OpenTelemetry'
+    );
 
     return (
-        <ImageTiles
-            tiles={[
-                {
-                    image: JavaScriptImage,
-                    navigateToUrl: docUrl
-                },
-                {
-                    image: TypeScriptImage,
-                    navigateToUrl: docUrl
-                },
-                {
-                    image: ReactImage,
-                    navigateToUrl: docUrl
-                },
-                {
-                    image: NodeImage,
-                    navigateToUrl: docUrl
-                },
-                {
-                    image: RustImage,
-                    navigateToUrl: docUrl
-                },
-                {
-                    image: GoImage,
-                    navigateToUrl: docUrl
-                },
-                {
-                    image: PythonImage,
-                    navigateToUrl: docUrl
-                },
-                {
-                    image: JavaImage,
-                    navigateToUrl: docUrl
-                },
-                {
-                    image: CSharpImage,
-                    navigateToUrl: docUrl
-                },
-
-            ]}
-        />
+        <Card
+            title={'Documentation'}
+            description={
+                'Learn how to integrate OneUptime with your application or resources to collect logs, metriics and traces data.'
+            }
+        >
+            <ImageTiles
+                title="Integrate with OpenTelemetry"
+                description="OneUptime supports a native integration with OpenTelemetry. OpenTelemetry is a collection of tools, APIs, and SDKs used to instrument, generate, collect, and export telemetry data (metrics, logs, and traces) for analysis in order to understand your software performance and behavior."
+                tiles={[
+                    {
+                        image: JavaScriptImage,
+                        navigateToUrl: docUrl,
+                        title: 'JavaScript',
+                    },
+                    {
+                        image: TypeScriptImage,
+                        navigateToUrl: docUrl,
+                        title: 'TypeScript',
+                    },
+                    {
+                        image: ReactImage,
+                        navigateToUrl: docUrl,
+                        title: 'React',
+                    },
+                    {
+                        image: NodeImage,
+                        navigateToUrl: docUrl,
+                        title: 'Node',
+                    },
+                    {
+                        image: RustImage,
+                        navigateToUrl: docUrl,
+                        title: 'Rust',
+                    },
+                    {
+                        image: GoImage,
+                        navigateToUrl: docUrl,
+                        title: 'Go',
+                    },
+                    {
+                        image: PythonImage,
+                        navigateToUrl: docUrl,
+                        title: 'Python',
+                    },
+                    {
+                        image: JavaImage,
+                        navigateToUrl: docUrl,
+                        title: 'Java',
+                    },
+                    {
+                        image: CSharpImage,
+                        navigateToUrl: docUrl,
+                        title: 'C#',
+                    },
+                ]}
+            />
+        </Card>
     );
 };
 

Dashboard/src/Pages/Telemetry/Services/View/Documentation.tsx

@@ -6,12 +6,11 @@ import RouteMap, { RouteUtil } from '../../../../Utils/RouteMap';
 import PageComponentProps from '../../../PageComponentProps';
 import SideMenu from './SideMenu';
 import Navigation from 'CommonUI/src/Utils/Navigation';
-import ModelDelete from 'CommonUI/src/Components/ModelDelete/ModelDelete';
 import ObjectID from 'Common/Types/ObjectID';
 import TelemetryService from 'Model/Models/TelemetryService';
 import TelemetryDocumentation from '../../../../Components/Telemetry/Documentation';
 
-const ServiceDelete: FunctionComponent<PageComponentProps> = (
+const TelemetryDocumentationPage: FunctionComponent<PageComponentProps> = (
     _props: PageComponentProps
 ): ReactElement => {
     const modelId: ObjectID = Navigation.getLastParamAsObjectID(1);
@@ -68,4 +67,4 @@ const ServiceDelete: FunctionComponent<PageComponentProps> = (
     );
 };
 
-export default ServiceDelete;
+export default TelemetryDocumentationPage;

Dashboard/src/Pages/Telemetry/Services/View/SideMenu.tsx

@@ -28,6 +28,18 @@ const DashboardSideMenu: FunctionComponent<ComponentProps> = (
                     }}
                     icon={IconProp.Info}
                 />
+                <SideMenuItem
+                    link={{
+                        title: 'Documentation',
+                        to: RouteUtil.populateRouteParams(
+                            RouteMap[
+                                PageMap.TELEMETRY_SERVICES_VIEW_DOCUMENTATION
+                            ] as Route,
+                            { modelId: props.modelId }
+                        ),
+                    }}
+                    icon={IconProp.Book}
+                />
             </SideMenuSection>
             <SideMenuSection title="Telemetry">
                 <SideMenuItem

Dashboard/src/Routes/TelemetryRoutes.tsx

@@ -100,7 +100,7 @@ const TelemetryRoutes: FunctionComponent<ComponentProps> = (
                             {...props}
                             pageRoute={
                                 RouteMap[
-                                PageMap.TELEMETRY_SERVICES_VIEW
+                                    PageMap.TELEMETRY_SERVICES_VIEW
                                 ] as Route
                             }
                         />
@@ -111,7 +111,7 @@ const TelemetryRoutes: FunctionComponent<ComponentProps> = (
             <PageRoute
                 path={
                     TelemetryRouthPath[
-                    PageMap.TELEMETRY_SERVICES_VIEW_DELETE
+                        PageMap.TELEMETRY_SERVICES_VIEW_DELETE
                     ] || ''
                 }
                 element={
@@ -120,7 +120,7 @@ const TelemetryRoutes: FunctionComponent<ComponentProps> = (
                             {...props}
                             pageRoute={
                                 RouteMap[
-                                PageMap.TELEMETRY_SERVICES_VIEW_DELETE
+                                    PageMap.TELEMETRY_SERVICES_VIEW_DELETE
                                 ] as Route
                             }
                         />
@@ -139,7 +139,7 @@ const TelemetryRoutes: FunctionComponent<ComponentProps> = (
                             {...props}
                             pageRoute={
                                 RouteMap[
-                                PageMap.TELEMETRY_SERVICES_VIEW_LOGS
+                                    PageMap.TELEMETRY_SERVICES_VIEW_LOGS
                                 ] as Route
                             }
                         />
@@ -150,7 +150,7 @@ const TelemetryRoutes: FunctionComponent<ComponentProps> = (
             <PageRoute
                 path={
                     TelemetryRouthPath[
-                    PageMap.TELEMETRY_SERVICES_VIEW_TRACES
+                        PageMap.TELEMETRY_SERVICES_VIEW_TRACES
                     ] || ''
                 }
                 element={
@@ -159,7 +159,7 @@ const TelemetryRoutes: FunctionComponent<ComponentProps> = (
                             {...props}
                             pageRoute={
                                 RouteMap[
-                                PageMap.TELEMETRY_SERVICES_VIEW_TRACES
+                                    PageMap.TELEMETRY_SERVICES_VIEW_TRACES
                                 ] as Route
                             }
                         />
@@ -170,7 +170,7 @@ const TelemetryRoutes: FunctionComponent<ComponentProps> = (
             <PageRoute
                 path={
                     TelemetryRouthPath[
-                    PageMap.TELEMETRY_SERVICES_VIEW_METRICS
+                        PageMap.TELEMETRY_SERVICES_VIEW_METRICS
                     ] || ''
                 }
                 element={
@@ -179,7 +179,7 @@ const TelemetryRoutes: FunctionComponent<ComponentProps> = (
                             {...props}
                             pageRoute={
                                 RouteMap[
-                                PageMap.TELEMETRY_SERVICES_VIEW_METRICS
+                                    PageMap.TELEMETRY_SERVICES_VIEW_METRICS
                                 ] as Route
                             }
                         />
@@ -190,7 +190,7 @@ const TelemetryRoutes: FunctionComponent<ComponentProps> = (
             <PageRoute
                 path={
                     TelemetryRouthPath[
-                    PageMap.TELEMETRY_SERVICES_VIEW_DASHBOARDS
+                        PageMap.TELEMETRY_SERVICES_VIEW_DASHBOARDS
                     ] || ''
                 }
                 element={
@@ -199,7 +199,7 @@ const TelemetryRoutes: FunctionComponent<ComponentProps> = (
                             {...props}
                             pageRoute={
                                 RouteMap[
-                                PageMap.TELEMETRY_SERVICES_VIEW_DASHBOARDS
+                                    PageMap.TELEMETRY_SERVICES_VIEW_DASHBOARDS
                                 ] as Route
                             }
                         />
@@ -210,7 +210,7 @@ const TelemetryRoutes: FunctionComponent<ComponentProps> = (
             <PageRoute
                 path={
                     TelemetryRouthPath[
-                    PageMap.TELEMETRY_SERVICES_VIEW_SETTINGS
+                        PageMap.TELEMETRY_SERVICES_VIEW_SETTINGS
                     ] || ''
                 }
                 element={
@@ -219,7 +219,7 @@ const TelemetryRoutes: FunctionComponent<ComponentProps> = (
                             {...props}
                             pageRoute={
                                 RouteMap[
-                                PageMap.TELEMETRY_SERVICES_VIEW_SETTINGS
+                                    PageMap.TELEMETRY_SERVICES_VIEW_SETTINGS
                                 ] as Route
                             }
                         />
@@ -227,11 +227,10 @@ const TelemetryRoutes: FunctionComponent<ComponentProps> = (
                 }
             />
 
-
             <PageRoute
                 path={
                     TelemetryRouthPath[
-                    PageMap.TELEMETRY_SERVICES_VIEW_DOCUMENTATION
+                        PageMap.TELEMETRY_SERVICES_VIEW_DOCUMENTATION
                     ] || ''
                 }
                 element={
@@ -240,15 +239,14 @@ const TelemetryRoutes: FunctionComponent<ComponentProps> = (
                             {...props}
                             pageRoute={
                                 RouteMap[
-                                PageMap.TELEMETRY_SERVICES_VIEW_DOCUMENTATION
+                                    PageMap
+                                        .TELEMETRY_SERVICES_VIEW_DOCUMENTATION
                                 ] as Route
                             }
                         />
                     </Suspense>
                 }
             />
-
-
         </Routes>
     );
 };