Add Stop icon to Icon component and implement

LogsFilters component

Common/Types/Icon/IconProp.ts

@@ -19,6 +19,7 @@ enum IconProp {
     Help = 'Help',
     JSON = 'JSON',
     Signal = 'Signal',
+    Stop = 'Stop',
     Database = 'Database',
     ChevronDown = 'ChevronDown',
     Pencil = 'Pencil',

CommonUI/src/Components/Icon/Icon.tsx

@@ -141,6 +141,10 @@ const Icon: FunctionComponent<ComponentProps> = ({
                 d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z"
             />
         );
+    }else if (icon === IconProp.Stop) {
+        return getSvgWrapper(
+            <path strokeLinecap="round" strokeLinejoin="round" d="M5.25 7.5A2.25 2.25 0 017.5 5.25h9a2.25 2.25 0 012.25 2.25v9a2.25 2.25 0 01-2.25 2.25h-9a2.25 2.25 0 01-2.25-2.25v-9z" />
+        );
     } else if (icon === IconProp.Copy) {
         return getSvgWrapper(
             <path

CommonUI/src/Components/LogsViewer/LogsFilters.tsx

@@ -1,5 +1,7 @@
 import React, { FunctionComponent, ReactElement, useEffect } from 'react';
 import Input from '../Input/Input';
+import Button from '../Button/Button';
+import IconProp from 'Common/Types/Icon/IconProp';
 
 export interface FiterOptions {
     searchText?: string | undefined;
@@ -7,28 +9,77 @@ export interface FiterOptions {
 
 export interface ComponentProps {
     onFilterChanged: (filterOptions: FiterOptions) => void;
+    onAutoScrollChanged: (turnOnAutoScroll: boolean) => void;
 }
 
-const LogsFilter: FunctionComponent<ComponentProps> = (
+const LogsFilters: FunctionComponent<ComponentProps> = (
     props: ComponentProps
 ): ReactElement => {
     const [filterOptions, setFilterOptions] = React.useState<FiterOptions>({});
 
+    const [turnOnAutoScroll, setTurnOnAutoScroll] = React.useState<boolean>(true);
+
+
+
     useEffect(() => {
         props.onFilterChanged(filterOptions);
     }, [filterOptions]);
 
     return (
         <div>
-            <Input
-                onChange={(value: string) => {
-                    setFilterOptions({
-                        searchText: value,
-                    });
-                }}
-            />
+            <div>
+                <Input
+                    placeholder="Search"
+                    onChange={(value: string) => {
+                        setFilterOptions({
+                            searchText: value,
+                        });
+                    }}
+                />
+            </div>
+            <div className="flex">
+                <Input
+                    placeholder="Start Time"
+                    onChange={(value: string) => {
+                        setFilterOptions({
+                            searchText: value,
+                        });
+                    }}
+                    type={'datetime-local'}
+                />
+                <Input
+                    placeholder="End Time"
+                    onChange={(value: string) => {
+                        setFilterOptions({
+                            searchText: value,
+                        });
+                    }}
+                    type={'datetime-local'}
+                />
+            </div>
+            <div>
+                <Input
+                    placeholder="SQL Query"
+                    onChange={(value: string) => {
+                        setFilterOptions({
+                            searchText: value,
+                        });
+                    }}
+                />
+            </div>
+
+            <div>
+                {!turnOnAutoScroll && <Button title='Start Autoscroll' icon={IconProp.Play} onClick={()=>{
+                    setTurnOnAutoScroll(true);
+                    props.onAutoScrollChanged(true);
+                }} /> }
+                {turnOnAutoScroll && <Button title='Stop Autoscroll' icon={IconProp.Stop} onClick={()=>{
+                    setTurnOnAutoScroll(false);
+                    props.onAutoScrollChanged(false);
+                }} /> }
+            </div>
         </div>
     );
 };
 
-export default LogsFilter;
+export default LogsFilters;

CommonUI/src/Components/LogsViewer/LogsViewer.tsx

@@ -1,9 +1,12 @@
 import Log from 'Model/AnalyticsModels/Log';
 import React, { FunctionComponent, ReactElement, Ref } from 'react';
 import LogItem from './LogItem';
+import LogsFilters, { FiterOptions } from './LogsFilters';
 
 export interface ComponentProps {
     logs: Array<Log>;
+    onFilterChanged: (filterOptions: FiterOptions) => void;
+
 }
 
 const LogsViewer: FunctionComponent<ComponentProps> = (
@@ -30,71 +33,49 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
         };
     }, []);
 
-    // if scrolled up set autoscrol to false, if scrolled to the bottom set it to true
-
-    React.useEffect(() => {
-        const logsViewer: HTMLDivElement | null = logsViewerRef.current;
-
-        if (!logsViewer) {
-            return;
-        }
-
-        const scrollPosition: number =
-            logsViewer.scrollTop + logsViewer.offsetHeight;
-        const scrollHeight: number = logsViewer.scrollHeight;
-
-        if (scrollPosition < scrollHeight) {
-            setAutoScroll(false);
-        } else {
-            setAutoScroll(true);
-        }
-    }, [props.logs]);
 
     // Keep scroll to the bottom of the log
 
+    const scrollToBottom = (): void => {
+        const logsViewer: HTMLDivElement | null = logsViewerRef.current;
+
+        if (logsViewer) {
+            logsViewer.scrollTop = logsViewer.scrollHeight;
+        }
+    }
+
+
     React.useEffect(() => {
         if (!autoScroll) {
             return;
         }
 
-        const logsViewer: HTMLDivElement | null = logsViewerRef.current;
-
-        if (logsViewer) {
-            logsViewer.scrollTop = logsViewer.scrollHeight;
-        }
+        scrollToBottom();
     }, [props.logs]);
 
-    /** 
-     * 
-     * ::-webkit-scrollbar {
-    height: 12px;
-    width: 12px;
-    background: #000;
-}
-
-::-webkit-scrollbar-thumb {
-    background: #393812;
-    -webkit-border-radius: 1ex;
-    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
-}
-
-::-webkit-scrollbar-corner {
-    background: #000;
-}
-     * 
-    */
-
     return (
-        <div
-            ref={logsViewerRef}
-            className="shadow-xl rounded-xl bg-slate-800 p-5 overflow-hidden hover:overflow-y-auto dark-scrollbar"
-            style={{
-                height: screenHeight - 330,
-            }}
-        >
-            {props.logs.map((log: Log, i: number) => {
-                return <LogItem key={i} log={log} />;
-            })}
+        <div>
+            <div className='mb-5'>
+                <LogsFilters onAutoScrollChanged={(autoscroll: boolean)=>{
+                    setAutoScroll(autoscroll);
+
+                    if(autoScroll){
+                        scrollToBottom();
+                    }
+                }} onFilterChanged={props.onFilterChanged} />
+            </div>
+            <div
+                ref={logsViewerRef}
+                className="shadow-xl rounded-xl bg-slate-800 p-5 overflow-hidden hover:overflow-y-auto dark-scrollbar"
+                style={{
+                    height: screenHeight - 330,
+                }}
+            >
+
+                {props.logs.map((log: Log, i: number) => {
+                    return <LogItem key={i} log={log} />;
+                })}
+            </div>
         </div>
     );
 };

Dashboard/src/Components/LogsViewer/LogsViewer.tsx

@@ -94,10 +94,6 @@ const DashboardLogsViewer: FunctionComponent<ComponentProps> = (
                 }
             );
 
-        setInterval(() => {
-            Realtime.emit('HERE', { message: "I'm HERE" });
-        }, 1000);
-
         return () => {
             disconnectFunction();
         };
@@ -113,7 +109,7 @@ const DashboardLogsViewer: FunctionComponent<ComponentProps> = (
 
     return (
         <div id={props.id}>
-            <LogsViewer logs={logs} />
+            <LogsViewer onFilterChanged={()=>{}} logs={logs} />
         </div>
     );
 };

Examples/otel-dotnet/obj/staticwebassets.pack.sentinel

@@ -31,3 +31,5 @@
 2.0
 2.0
 2.0
+2.0
+2.0