logs page filtered indicator

webpack/constants.ts

@@ -243,6 +243,9 @@ export namespace ToolTips {
     that you can put your Tools in, which should be reflective of your real
     FarmBot hardware configuration.`;
 
+  // Logs
+  export const LOGS =
+    `View and filter log messages.`;
 }
 
 export namespace Content {

webpack/logs/__tests__/index_test.tsx

@@ -6,6 +6,7 @@ import * as React from "react";
 import { mount } from "enzyme";
 import { Logs, LogsFilterMenu } from "../index";
 import { Log } from "../../interfaces";
+import { ToolTips } from "../../constants";
 
 describe("<Logs />", () => {
   function fakeLogs(): Log[] {
@@ -31,16 +32,22 @@ describe("<Logs />", () => {
 
   it("renders", () => {
     const wrapper = mount(<Logs logs={fakeLogs()} />);
-    ["Logs", "View and filter log messages.", "Type", "Message", "Time", "Info",
+    ["Logs", ToolTips.LOGS, "Type", "Message", "Time", "Info",
       "Fake log message 1", "Success", "Fake log message 2"]
       .map(string =>
         expect(wrapper.text().toLowerCase()).toContain(string.toLowerCase()));
+    const filterBtn = wrapper.find("button").first();
+    expect(filterBtn.text().toLowerCase()).toEqual("filter");
+    expect(filterBtn.hasClass("gray")).toBeTruthy();
   });
 
   it("filters logs", () => {
     const wrapper = mount(<Logs logs={fakeLogs()} />);
     wrapper.setState({ info: false });
     expect(wrapper.text()).not.toContain("Fake log message 1");
+    const filterBtn = wrapper.find("button").first();
+    expect(filterBtn.text().toLowerCase()).toEqual("filters active");
+    expect(filterBtn.hasClass("green")).toBeTruthy();
   });
 });
 

webpack/logs/index.tsx

@@ -8,6 +8,7 @@ import { t } from "i18next";
 import { Popover, Position } from "@blueprintjs/core";
 import * as _ from "lodash";
 import { LogsTableProps, LogsState, LogsFilterMenuProps, LogsProps } from "./interfaces";
+import { ToolTips } from "../constants";
 
 export const formatLogTime = (created_at: number) =>
   moment.unix(created_at).local().format("MMM D, h:mma");
@@ -89,18 +90,29 @@ export class Logs extends React.Component<LogsProps, Partial<LogsState>> {
   toggle = (name: keyof LogsState) =>
     () => this.setState({ [name]: !this.state[name] });
 
+  get filterActive() {
+    const filterKeys = Object.keys(this.state)
+      .filter(x => !(x === "autoscroll"));
+    const filterValues = filterKeys
+      .map((key: keyof LogsState) => this.state[key]);
+    return !filterValues.every(x => x);
+  }
+
   render() {
+    const filterBtnColor = this.filterActive ? "green" : "gray";
     return <Page className="logs">
       <Row>
-        <Col xs={10}>
+        <Col xs={11}>
           <h3>
             <i>{t("Logs")}</i>
           </h3>
-          <ToolTip helpText={"View and filter log messages."} />
+          <ToolTip helpText={ToolTips.LOGS} />
         </Col>
-        <Col xs={2}>
+        <Col xs={1}>
           <Popover position={Position.BOTTOM_RIGHT}>
-            <i className="fa fa-gear" style={{ float: "right" }} />
+            <button className={`fb-button ${filterBtnColor}`}>
+              {this.filterActive ? t("Filters active") : t("filter")}
+            </button>
             <LogsFilterMenu toggle={this.toggle} state={this.state} />
           </Popover>
         </Col>

webpack/logs/interfaces.ts

@@ -4,8 +4,7 @@ export interface LogsProps {
   logs: Log[]
 }
 
-export interface LogsState {
-  autoscroll: boolean;
+export interface Filters {
   success: boolean;
   busy: boolean;
   warn: boolean;
@@ -15,6 +14,10 @@ export interface LogsState {
   debug: boolean;
 }
 
+export interface LogsState extends Filters {
+  autoscroll: boolean;
+}
+
 export interface LogsTableProps {
   logs: Log[];
   state: LogsState;