Merge pull request #85 from metrico/alexey-feature-light-theme

Light theme feature

src/App.js

@@ -4,7 +4,7 @@ import store from "./store/store";
 export default function App() {
     return (
         <Provider store={store}>
-            <MainView />
+                <MainView />
         </Provider>
     );
 }

src/actions/index.js

@@ -1,19 +1,20 @@
-export * from "./setStartTime";
-export * from "./setStopTime";
-export * from "./setQueryLimit";
-export * from "./setQueryStep";
-export * from "./setRangeOpen";
-export * from "./setTimeRangeLabel";
-export * from "./setApiUrl";
-export * from "./setQuery";
-export * from "./setIsSubmit";
-export * from "./setMatrixData";
-export * from "./setQueryHistory";
-export * from "./setHistoryOpen";
-export * from "./setApiError";
-export * from "./errorHandler";
-export * from "./setLabels";
-export * from "./createAlert";
-export * from "./removeAlert";
-export * from "./setFromTime";
-export * from "./setToTime"; 
+export * from "./setStartTime";
+export * from "./setStopTime";
+export * from "./setQueryLimit";
+export * from "./setQueryStep";
+export * from "./setRangeOpen";
+export * from "./setTimeRangeLabel";
+export * from "./setApiUrl";
+export * from "./setQuery";
+export * from "./setIsSubmit";
+export * from "./setMatrixData";
+export * from "./setQueryHistory";
+export * from "./setHistoryOpen";
+export * from "./setApiError";
+export * from "./errorHandler";
+export * from "./setLabels";
+export * from "./createAlert";
+export * from "./removeAlert";
+export * from "./setFromTime";
+export * from "./setToTime";
+export * from "./setTheme";

src/actions/setTheme.js

@@ -0,0 +1,6 @@
+export const setTheme = (theme) => (dispatch) => {
+    dispatch({
+        type: 'SET_THEME',
+        theme
+    });
+}

src/components/DataView/DataView.js

@@ -1,73 +1,76 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
-
-import { DataViewCont, DataViewStyled, Loader } from "./styled";
-import ClokiChart from "../../plugins/charts";
-import QueryHistory from "../../plugins/queryhistory";
-import LogsRow from "./LogsRow";
-import EmptyView from "./EmptyView";
-// import Table from "../../plugins/tables/Table";
-
-class DataView extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            limit: props.limit || 100,
-            messages: props.messages || [],
-            matrixData: props.matrixData || [],
-            loading: false,
-        };
-    }
-
-    getMatrixForChart = () => {
-        return this.props.matrixData;
-    };
-    getLimit = () => {
-        return this.props.limit;
-    };
-
-    render() {
-        return (
-            <DataViewStyled>
-                <DataViewCont>
-                    {/* <Table/> */}
-                    {this.props.messages.length > 0 &&
-                    this.getMatrixForChart().length < 1
-                        ? this.props.messages.map((message, key) => (
-                              <LogsRow
-                                  message={message}
-                                  toggleTagsActive={this.toggleTagsActive}
-                                  key={key}
-                              />
-                          ))
-                        : null}
-
-                    {this.getMatrixForChart().length > 0 ? (
-                        <ClokiChart
-                            chartLimit={this.getLimit()}
-                            matrixData={this.getMatrixForChart()}
-                        />
-                    ) : null}
-                    {this.props.messages.length < 1 &&
-                        this.getMatrixForChart().length < 1 &&
-                        !this.props.loading && <EmptyView />}
-                    <QueryHistory />
-                    {this.props.loading && <Loader />}
-                </DataViewCont>
-            </DataViewStyled>
-        );
-    }
-}
-
-const mapStateToProps = (state) => {
-    return {
-        messages: state.logs,
-        start: state.start,
-        stop: state.stop,
-        limit: state.limit,
-        loading: state.loading,
-        matrixData: state.matrixData,
-    };
-};
-
-export default connect(mapStateToProps)(DataView);
+import React, { Component } from "react";
+import { connect } from "react-redux";
+
+import { DataViewCont, DataViewStyled, Loader } from "./styled";
+
+import ClokiChart from "../../plugins/charts";
+import QueryHistory from "../../plugins/queryhistory";
+import LogsRow from "./LogsRow";
+import EmptyView from "./EmptyView";
+import { ThemeProvider } from "@emotion/react";
+import { themes } from "../../theme/themes";
+class DataView extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            limit: props.limit || 100,
+            messages: props.messages || [],
+            matrixData: props.matrixData || [],
+            loading: false,
+            theme: props.theme,
+        };
+    }
+    getMatrixForChart = () => {
+        return this.props.matrixData;
+    };
+    getLimit = () => {
+        return this.props.limit;
+    };
+
+    render() {
+        return (
+            <ThemeProvider theme={themes[this.props.theme]}>
+                <DataViewStyled>
+                    <DataViewCont>
+                        {this.props.messages.length > 0 &&
+                        this.getMatrixForChart().length < 1
+                            ? this.props.messages.map((message, key) => (
+                                  <LogsRow
+                                      message={message}
+                                      toggleTagsActive={this.toggleTagsActive}
+                                      key={key}
+                                  />
+                              ))
+                            : null}
+
+                        {this.getMatrixForChart().length > 0 ? (
+                            <ClokiChart
+                                chartLimit={this.getLimit()}
+                                matrixData={this.getMatrixForChart()}
+                            />
+                        ) : null}
+                        {this.props.messages.length < 1 &&
+                            this.getMatrixForChart().length < 1 &&
+                            !this.props.loading && <EmptyView />}
+                        <QueryHistory />
+                        {this.props.loading && <Loader />}
+                    </DataViewCont>
+                </DataViewStyled>
+            </ThemeProvider>
+        );
+    }
+}
+
+const mapStateToProps = (state) => {
+    return {
+        messages: state.logs,
+        start: state.start,
+        stop: state.stop,
+        limit: state.limit,
+        loading: state.loading,
+        matrixData: state.matrixData,
+        theme: state.theme,
+    };
+};
+
+export default connect(mapStateToProps)(DataView);

src/components/DataView/EmptyView.js

@@ -1,9 +1,17 @@
+import { ThemeProvider } from "@emotion/react";
+import { useSelector } from "react-redux";
+import { themes } from "../../theme/themes";
 import { EmptyViewContainer } from "./styled";
 
 export default function EmptyView() {
+    const theme = useSelector( store => store.theme)
     return (
-        <EmptyViewContainer>
-            {"Please adjust search parameters and click on ‘Show Logs’ button"}
-        </EmptyViewContainer>
+        <ThemeProvider theme={themes[theme]}>
+            <EmptyViewContainer>
+                {
+                    "Please adjust search parameters and click on ‘Show Logs’ button"
+                }
+            </EmptyViewContainer>
+        </ThemeProvider>
     );
 }

src/components/DataView/LogsRow.js

@@ -1,39 +1,44 @@
-import { formatDate, getRowColor, toggleActiveStyles } from "./helpers";
-import { LogRow, RowLogContent, RowTimestamp } from "./styled";
-import ValueTags from "./ValueTags";
-import { useSelector, useDispatch } from "react-redux";
-import setLogs from "../../actions/setLogs";
-
-export default function LogsRow({ message }) {
-    const dispatch = useDispatch();
-    const messages = useSelector((store) => store.logs);
-
-    function toggleTagsActive(idx) {
-        let arrCopy = [...messages];
-        arrCopy.forEach((entry) => {
-            if (entry.id === idx) {
-                entry.showLabels = entry.showLabels ? false : true;
-            }
-        });
-        dispatch(setLogs(arrCopy));
-    }
-
-    return (
-        <LogRow
-            rowColor={getRowColor(message.tags)}
-            onClick={(e) => {
-                toggleTagsActive(message.id);
-            }}
-        >
-            <div className="log-ts-row">
-                <RowTimestamp>{formatDate(message.timestamp)}</RowTimestamp>
-                <RowLogContent>{message.text}</RowLogContent>
-            </div>
-            {message.tags && (
-                <div className={toggleActiveStyles(message)}>
-                    <ValueTags tags={message.tags} />
-                </div>
-            )}
-        </LogRow>
-    );
-}
+import { formatDate, getRowColor, toggleActiveStyles } from "./helpers";
+import { LogRow, RowLogContent, RowTimestamp } from "./styled";
+import ValueTags from "./ValueTags";
+import { useSelector, useDispatch, useStore } from "react-redux";
+import setLogs from "../../actions/setLogs";
+import { ThemeProvider } from "@emotion/react";
+import { themes } from "../../theme/themes";
+
+export default function LogsRow({ message }) {
+    const dispatch = useDispatch();
+    const messages = useSelector((store) => store.logs);
+
+    const theme = useStore().getState().theme;
+    function toggleTagsActive(idx) {
+        let arrCopy = [...messages];
+        arrCopy.forEach((entry) => {
+            if (entry.id === idx) {
+                entry.showLabels = entry.showLabels ? false : true;
+            }
+        });
+        dispatch(setLogs(arrCopy));
+    }
+
+    return (
+        <ThemeProvider theme={themes[theme]}>
+            <LogRow
+                rowColor={getRowColor(message.tags)}
+                onClick={(e) => {
+                    toggleTagsActive(message.id);
+                }}
+            >
+                <div className="log-ts-row">
+                    <RowTimestamp>{formatDate(message.timestamp)}</RowTimestamp>
+                    <RowLogContent>{message.text}</RowLogContent>
+                </div>
+                {message.tags && (
+                    <div className={toggleActiveStyles(message)}>
+                        <ValueTags tags={message.tags} />
+                    </div>
+                )}
+            </LogRow>
+        </ThemeProvider>
+    );
+}

src/components/DataView/ValueTags.js

@@ -5,8 +5,19 @@ import loadLabelValues from "../../actions/loadLabelValues";
 import loadLogs from "../../actions/loadLogs";
 import { ZoomIn, ZoomOut } from "@mui/icons-material/";
 import { useSelector } from "react-redux";
+import { themes } from "../../theme/themes";
+import { ThemeProvider } from "@emotion/react";
+import styled from '@emotion/styled'
 
+const ValueTagsStyled = styled.div`
+    color: ${props => props.theme.textPrimary};
+    flex:1;
+    &:hover {
+        background: ${props => props.theme.widgetContainer};
+    }
+`
 export default function ValueTags({ tags }) {
+    const theme = useSelector((store) => store.theme);
     const isEmbed = useSelector((store) => store.isEmbed);
     async function addLabel(e, key, value, isInverted = false) {
         e.preventDefault();
@@ -48,8 +59,10 @@ export default function ValueTags({ tags }) {
     }
 
     return (
-        <>
+
+        <ThemeProvider theme={themes[theme]}>
             {Object.entries(tags).map(([key, value], k) => (
+                <ValueTagsStyled key={key}>
                 <div className={"value-tags"} key={k}>
                     {!isEmbed && (
                         <>
@@ -59,23 +72,24 @@ export default function ValueTags({ tags }) {
                                 onClick={(e) => addLabel(e, key, value)}
                                 className={"icon"}
                             >
-                                <ZoomIn color="primary" />
+                                <ZoomIn color="primary" style={{width:'18px',height:'18px'}}/>
                             </span>
                             <span
                                 aria-label="Filter out value"
                                 title="Filter out value"
                                 onClick={(e) => addLabel(e, key, value, true)}
                                 className={"icon"}
                             >
-                                <ZoomOut color="primary" />
+                                <ZoomOut color="primary" style={{width:'18px',height:'18px'}}/>
                             </span>
                         </>
                     )}
 
-                    <span>{key}</span>
-                    <span>{value}</span>
+                    <span style={{flex:1}}>{key}</span>
+                    <span style={{flex:4}}>{value}</span>
                 </div>
+                </ValueTagsStyled>
             ))}
-        </>
+        </ThemeProvider>
     );
 }