Merge pull request #73 from metrico/jacovinus-mutiple-label-tooltip

fix: responsive styles for app

Author: jacovinus

Diff for: package-lock.json

@@ -32,6 +32,7 @@
     "react-dom": "^17.0.2",
     "react-flot": "^1.3.0",
     "react-redux": "^7.2.6",
+    "react-responsive": "^9.0.0-beta.6",
     "react-router-dom": "^6.2.1",
     "redux-thunk": "^2.4.1",
     "slate": "^0.73.1",

Diff for: package.json

@@ -1,14 +1,10 @@
 import { Provider } from "react-redux";
 import MainView from "./components/MainView";
-import store from './store/store';
+import store from "./store/store";
 export default function App() {
-    
-		return (
-			<Provider store={store}>
-                
-				<MainView/>
-			
-			</Provider>
-		);
-	
+    return (
+        <Provider store={store}>
+            <MainView />
+        </Provider>
+    );
 }

Diff for: src/App.js

@@ -7,14 +7,15 @@ import { setLabelsBrowserOpen } from "./setLabelsBrowserOpen";
 
 export default function loadLabels(apiUrl) {
     const origin = window.location.origin;
-    const url = apiUrl
+    const url = apiUrl;
     const headers = {
-
         "Access-Control-Allow-Origin": origin,
-        "Access-Control-Allow-Headers": ["Access-Control-Request-Headers", "Content-Type"],
+        "Access-Control-Allow-Headers": [
+            "Access-Control-Request-Headers",
+            "Content-Type",
+        ],
         "Content-Type": "application/json",
-
-    }
+    };
 
     const options = {
         method: "GET",
@@ -23,35 +24,38 @@ export default function loadLabels(apiUrl) {
     };
 
     return function (dispatch) {
-      
-        axios.get(`${url.trim()}/loki/api/v1/labels`, options)
+        axios
+            .get(`${url.trim()}/loki/api/v1/labels`, options)
             ?.then((response) => {
-        if(response){
-            if(response?.data?.data === []) console.log('no labels found')
-            if (response?.data?.data?.length > 0) {
-
-                const labels = response?.data?.data.sort().map((label) => ({
-                    name: label,
-                    selected: false,
-                    values: [],
-                }));
-                dispatch(setLabels(labels || []));
-                dispatch(setApiError(''))
-            }
-
-        }else {
-           dispatch(setLoading(false))
-            dispatch(setApiError('API Not Found, Please adjust API URL'))
-            dispatch(setLabelsBrowserOpen(true))
-            dispatch(setLabels([]))
-        }
-
-            }).catch(error => {
-                console.log(error)
-               dispatch(setLoading(false))
-                const {message,status} = errorHandler(url, error)
-                dispatch(setLabels([]))
-             
+                if (response) {
+                    if (response?.data?.data === [])
+                        console.log("no labels found");
+                    if (response?.data?.data?.length > 0) {
+                        const labels = response?.data?.data
+                            .sort()
+                            .map((label) => ({
+                                name: label,
+                                selected: false,
+                                values: [],
+                            }));
+                        dispatch(setLabels(labels || []));
+                        dispatch(setApiError(""));
+                    }
+                } else {
+                    dispatch(setLoading(false));
+                    dispatch(
+                        setApiError("API Not Found, Please adjust API URL")
+                    );
+                    dispatch(setLabelsBrowserOpen(true));
+                    dispatch(setLabels([]));
+                }
             })
-    }
+            .catch((error) => {
+                console.log(error);
+                dispatch(setLoading(false));
+                const { message, status } = errorHandler(url, error);
+                dispatch(setApiError(`Status: ${status}, ${message}`));
+                dispatch(setLabels([]));
+            });
+    };
 }

Diff for: src/actions/LoadLabels.js

@@ -4,18 +4,12 @@ import setLoading from "./setLoading";
 import store from "../store/store";
 import setMatrixData from "./setMatrixData";
 import { nanoid } from "nanoid";
-import { findRangeByLabel } from "../plugins/daterangepicker/utils";
 import { setStartTime, setStopTime } from "./";
-// *query : LogQl Query
-// *limit : Limit of returned lines
-// *start : The start time for the query as a nanosecond Unix epoch. Defaults to one hour ago
-// *end : The end time for the query as a nanosecond Unix epoch. Defaults to now
-// *step : Resolution step width in either a duration [1s, 5s, 5m etc] or number of seconds
-// *direction : Determines sort order of logs. Either forward or backward. Default is backward
+import { findRangeByLabel } from "../components/StatusBar/components/daterangepicker/utils";
+
 
 export default function loadLogs() {
-  // const step = 120
-  // const direction = 'backward'
+
   const localStore = store.getState();
   const { query, limit, step, apiUrl, label: rangeLabel } = localStore;
   let { start: startTs, stop: stopTs } = localStore;
@@ -51,8 +45,8 @@ export default function loadLogs() {
     },
   };
 
-  const fromNanoSec = (ts) => parseInt(ts / 1000000); // stream type will come in Nanoseconds
-  const toMiliseC = (ts) => parseInt(ts * 1000); // matrix type will come without millisec
+  const fromNanoSec = (ts) => parseInt(ts / 1000000); 
+  const toMiliseC = (ts) => parseInt(ts * 1000); 
   const getTimestamp = (type) => (ts) =>
     type === "streams"
       ? fromNanoSec(ts)
@@ -108,7 +102,7 @@ export default function loadLogs() {
           }
 
           if (type === "matrix") {
-            const idResult = result.map((m) => ({ ...m, id: nanoid() }));
+            const idResult = result?.map((m) => ({ ...m, id: nanoid() }))||[];
             dispatch(setMatrixData(idResult || []));
             dispatch(setLoading(false));
           }

Diff for: src/actions/loadLogs.js

@@ -1,6 +1,8 @@
-export default  (loading) => (dispatch) => {
+const setLoading = (loading) => (dispatch) => {
     dispatch({
-        type: 'SET_LOADING',
-       loading
+        type: "SET_LOADING",
+        loading,
     });
-}
+};
+
+export default setLoading;

Diff for: src/actions/setLoading.js

@@ -1,6 +1,8 @@
-export default (logs) => (dispatch) => {
+const setLogs = (logs) => (dispatch) => {
     dispatch({
-        type: 'SET_LOGS',
-        logs
+        type: "SET_LOGS",
+        logs,
     });
-}
+};
+
+export default setLogs;

Diff for: src/actions/setLogs.js

@@ -0,0 +1,72 @@
+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";
+
+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>
+                    {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);

Diff for: src/components/DataView/DataView.js

@@ -0,0 +1,9 @@
+import { EmptyViewContainer } from "./styled";
+
+export default function EmptyView() {
+    return (
+        <EmptyViewContainer>
+            {"Please adjust search parameters and click on ‘Show Logs’ button"}
+        </EmptyViewContainer>
+    );
+}