13 |
61 | );
62 | }
63 | }
64 |
65 | export default KeyspaceChartFilterNav;
66 |
--------------------------------------------------------------------------------
/src/client/action-creators/connections.js:
--------------------------------------------------------------------------------
1 | import * as types from '../actions/actionTypes';
2 |
3 | //NEEDS COMPLETION ONCE WE GET WHAT THE DATA WILL LOOK LIKE FROM BACKEND
4 | export const updateKeyGraphActionCreator =
5 | (instanceId, dbIndex) => (dispatch) => {
6 | fetch(`/api/keyspaceHistory/${instanceId}/${dbIndex}`)
7 | .then((res) => res.json())
8 | .then((data) => {
9 | const keyspaceHistory = data.keyspaceHistory;
10 | dispatch({
11 | type: types.UPDATE_KEYGRAPH,
12 | payload: keyspaceHistory,
13 | });
14 | })
15 | .catch((err) => {
16 | console.log('error in keyspaceUpdateActionCreator: ', err);
17 | });
18 | };
19 |
20 | //SWITCH DATABASE
21 | export const switchDatabaseActionCreator = (dbIndex) => (
22 | console.log('switched to database', dbIndex),
23 | {
24 | type: types.SWITCH_DATABASE,
25 | payload: dbIndex,
26 | }
27 | );
28 |
29 | //SWITCH INSTANCE action creator
30 |
31 | export const switchInstanceActionCreator = (instanceId) => (
32 | console.log('switched to instance', instanceId),
33 | {
34 | type: types.SWITCH_INSTANCE,
35 | payload: instanceId,
36 | }
37 | );
38 |
39 | //payload:
40 | // databases: 16
41 | // host: "127.0.0.1"
42 | // instanceId: 1
43 | // port: 6379
44 |
45 | export const updateInstanceInfoActionCreator = () => (dispatch) => {
46 | fetch('/api/connections')
47 | .then((res) => res.json())
48 | .then((data) => {
49 | //for stretch features, there may be multiple instances here
50 | dispatch({
51 | type: types.UPDATE_INSTANCEINFO,
52 | payload: data.instances,
53 | });
54 | })
55 | .catch((err) => {
56 | console.log(
57 | 'error fetching instanceinfo in updateDBInfoActionCreator:',
58 | err
59 | );
60 | });
61 | };
62 |
63 | export const updatePageActionCreator = (newPage) => ({
64 | type: types.UPDATE_PAGE,
65 | payload: newPage,
66 | });
67 |
68 | // {
69 | // filterType: something
70 | // filterValue: something
71 | // }
72 | export const updateCurrDisplayActionCreator = (object) => ({
73 | type: types.UPDATE_CURRDISPLAY,
74 | payload: object,
75 | });
76 |
77 | export const updatePageNumActionCreator = (pageNum) => ({
78 | type: types.UPDATE_PAGENUM,
79 | payload: pageNum,
80 | });
81 |
82 | export const updatePageSizeActionCreator = (pageSize) => ({
83 | type: types.UPDATE_PAGESIZE,
84 | payload: pageSize,
85 | });
86 |
--------------------------------------------------------------------------------
/src/client/components/keyspace/KeyspaceComponent.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import KeyspaceTable from './KeyspaceTable.jsx';
4 | import * as actions from '../../action-creators/connections';
5 | import * as keyspaceActions from '../../action-creators/keyspaceConnections';
6 |
7 | const mapStateToProps = (store) => {
8 | return {
9 | currInstance: store.currInstanceStore.currInstance,
10 | currDatabase: store.currDatabaseStore.currDatabase,
11 | keyspace: store.keyspaceStore.keyspace,
12 | currDisplay: store.currDisplayStore.currDisplay,
13 | pageSize: store.dataPageStore.pageSize,
14 | pageNum: store.dataPageStore.pageNum,
15 | };
16 | };
17 | const mapDispatchToProps = (dispatch) => ({
18 | updatePageSize: (pageSize) =>
19 | dispatch(actions.updatePageSizeActionCreator(pageSize)),
20 | updatePageNum: (pageNum) =>
21 | dispatch(actions.updatePageNumActionCreator(pageNum)),
22 | changeKeyspacePage: (instanceId, dbIndex, queryOptions) =>
23 | dispatch(
24 | keyspaceActions.changeKeyspacePageActionCreator(
25 | instanceId,
26 | dbIndex,
27 | queryOptions
28 | )
29 | ),
30 | });
31 |
32 | class KeyspaceComponent extends Component {
33 | constructor(props) {
34 | super(props);
35 | }
36 |
37 | render() {
38 | // console.log('all the props in keyspace component', this.props);
39 |
40 | const currDatabaseData = this.props.keyspace[this.props.currInstance - 1]
41 | .keyspaces[this.props.currDatabase];
42 |
43 | const myCount = currDatabaseData ? currDatabaseData.keyTotal : 0;
44 | return (
45 |
49 |
62 | );
63 | }
64 | }
65 |
66 | export default connect(mapStateToProps, mapDispatchToProps)(KeyspaceComponent);
67 |
--------------------------------------------------------------------------------
/demo-redis-app/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "demo-redis-app",
3 | "version": "1.0.0",
4 | "lockfileVersion": 1,
5 | "requires": true,
6 | "dependencies": {
7 | "denque": {
8 | "version": "1.5.0",
9 | "resolved": "https://registry.npmjs.org/denque/-/denque-1.5.0.tgz",
10 | "integrity": "sha512-CYiCSgIF1p6EUByQPlGkKnP1M9g0ZV3qMIrqMqZqdwazygIA/YP2vrbcyl1h/WppKJTdl1F85cXIle+394iDAQ=="
11 | },
12 | "faker": {
13 | "version": "5.5.3",
14 | "resolved": "https://registry.npmjs.org/faker/-/faker-5.5.3.tgz",
15 | "integrity": "sha512-wLTv2a28wjUyWkbnX7u/ABZBkUkIF2fCd73V6P2oFqEGEktDfzWx4UxrSqtPRw0xPRAcjeAOIiJWqZm3pP4u3g=="
16 | },
17 | "promise-queue": {
18 | "version": "2.2.5",
19 | "resolved": "https://registry.npmjs.org/promise-queue/-/promise-queue-2.2.5.tgz",
20 | "integrity": "sha1-L29ffA9tCBCelnZZx5uIqe1ek7Q="
21 | },
22 | "redis": {
23 | "version": "3.1.2",
24 | "resolved": "https://registry.npmjs.org/redis/-/redis-3.1.2.tgz",
25 | "integrity": "sha512-grn5KoZLr/qrRQVwoSkmzdbw6pwF+/rwODtrOr6vuBRiR/f3rjSTGupbF90Zpqm2oenix8Do6RV7pYEkGwlKkw==",
26 | "requires": {
27 | "denque": "^1.5.0",
28 | "redis-commands": "^1.7.0",
29 | "redis-errors": "^1.2.0",
30 | "redis-parser": "^3.0.0"
31 | }
32 | },
33 | "redis-commands": {
34 | "version": "1.7.0",
35 | "resolved": "https://registry.npmjs.org/redis-commands/-/redis-commands-1.7.0.tgz",
36 | "integrity": "sha512-nJWqw3bTFy21hX/CPKHth6sfhZbdiHP6bTawSgQBlKOVRG7EZkfHbbHwQJnrE4vsQf0CMNE+3gJ4Fmm16vdVlQ=="
37 | },
38 | "redis-errors": {
39 | "version": "1.2.0",
40 | "resolved": "https://registry.npmjs.org/redis-errors/-/redis-errors-1.2.0.tgz",
41 | "integrity": "sha1-62LSrbFeTq9GEMBK/hUpOEJQq60="
42 | },
43 | "redis-parser": {
44 | "version": "3.0.0",
45 | "resolved": "https://registry.npmjs.org/redis-parser/-/redis-parser-3.0.0.tgz",
46 | "integrity": "sha1-tm2CjNyv5rS4pCin3vTGvKwxyLQ=",
47 | "requires": {
48 | "redis-errors": "^1.0.0"
49 | }
50 | },
51 | "redis-server": {
52 | "version": "1.2.2",
53 | "resolved": "https://registry.npmjs.org/redis-server/-/redis-server-1.2.2.tgz",
54 | "integrity": "sha512-pOaSIeSMVFkEFIuaMtpQ3TOr3uI4sUmEHm4ofGks5vTPRseHUszxyIlC70IFjUR9qSeH8o/ARZEM8dqcJmgGJw==",
55 | "requires": {
56 | "promise-queue": "^2.2.5"
57 | }
58 | }
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/client/components/graphs/GraphHolder.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import {
4 | XYPlot,
5 | XAxis,
6 | YAxis,
7 | HorizontalGridLines,
8 | LineSeries,
9 | } from "react-vis";
10 |
11 | const GraphHolder = (props) => {
12 |
13 | const graphDataConverter = (array, initTime) => {
14 | const eventTimesArray = [];
15 | let temp = [];
16 | let xRange = 0;
17 | let yRange = 5000;
18 | console.log("array in graphDataConverter", array);
19 | for (let i = 0; i < array.length; i++) {
20 | if (
21 | array[i].timestamp - initTime >= xRange &&
22 | array[i].timestamp - initTime < yRange
23 | ) {
24 | let date = new Date(array[i].timestamp).toString("MMM, dd");
25 | temp.push({
26 | name: array[i].key,
27 | time: array[i].timestamp,
28 | timeInMsSinceStart: array[i].timestamp - initTime,
29 | formattedTime: date.slice(16, 24),
30 | });
31 | } else {
32 | if (temp.length < 2) break;
33 | else {
34 | eventTimesArray.push(temp);
35 | let date = new Date(array[i].timestamp).toString("MMM, dd");
36 | temp = [
37 | {
38 | name: array[i].key,
39 | time: array[i].timestamp,
40 | timeInMsSinceStart: array[i].timestamp - initTime,
41 | formattedTime: date.slice(16, 24),
42 | },
43 | ];
44 | xRange += 5000;
45 | yRange += 5000;
46 | }
47 | }
48 | }
49 |
50 | const result = [];
51 | console.log("eventtimesarray", eventTimesArray);
52 | // if (props.currDatabase === 0) {
53 | eventTimesArray.forEach((array) => {
54 | // console.log("time", time);
55 | result.push({ x: array[0].formattedTime, y: array.length });
56 | });
57 | // }
58 | return result;
59 | };
60 |
61 | const initialTime = props.events[props.currDatabase][0].timestamp;
62 | const eventsArray = props.events[props.currDatabase];
63 | console.log("intialTime", initialTime, "eventsArray", eventsArray);
64 | const plotData = graphDataConverter(eventsArray, initialTime);
65 | console.log("plotData", plotData);
66 |
67 | return (
68 |
48 |
67 | );
68 | }
69 | }
70 |
71 | export default connect(null, mapDispatchToProps)(App);
72 |
--------------------------------------------------------------------------------
/src/client/components/styles/graphfilters.scss:
--------------------------------------------------------------------------------
1 | @import './config/_variables.scss';
2 |
3 | .graph-filter-nav-container {
4 | display: flex;
5 | margin: 1em 0 2em;
6 | display: flex;
7 | justify-content: space-between;
8 | }
9 |
10 | .graph-search-filters {
11 | width: 50%;
12 | display: flex;
13 | flex-direction: column;
14 |
15 | .MuiInputBase-input {
16 | color: $PRIMARY_LIGHT;
17 | font-family: $PRIMARY_FONT;
18 | }
19 |
20 | .MuiInputLabel-root {
21 | color: $PRIMARY_LIGHT;
22 | font-family: $PRIMARY_FONT;
23 |
24 | @media screen and (max-width: $small) {
25 | font-size: 0.8em;
26 | }
27 | @media screen and (min-width: $large) {
28 | font-size: 1vw;
29 | }
30 | }
31 |
32 | .MuiSelect-icon {
33 | color: $PRIMARY_LIGHT;
34 | }
35 |
36 | .graph-filter-buttons-container {
37 |
38 | @media screen and (max-width: $small) {
39 | margin: 0.5em 0 0;
40 | }
41 | @media screen and (min-width: $large) {
42 | margin: 0.65vw 0 0;
43 | }
44 |
45 | button {
46 | font-family: $PRIMARY_FONT;
47 | color: $PRIMARY_LIGHT;
48 |
49 | @media screen and (max-width: $small) {
50 | margin: 0 2em;
51 | font-size: 0.9em;
52 | // border: 1px solid $PRIMARY_LIGHT;
53 | }
54 | @media screen and (min-width: $large) {
55 | margin: 0 2.5vw;
56 | font-size: 1.12vw;
57 | }
58 |
59 | }
60 | }
61 |
62 | .MuiInput-input {
63 | border-bottom: 1px solid $PRIMARY_LIGHT;
64 | }
65 |
66 | }
67 |
68 | .graph-filter-button-container {
69 | display: flex;
70 | align-items: center;
71 | justify-content: space-around;
72 | width: 50%;
73 |
74 | button {
75 | height: 20%;
76 | align-self: center;
77 | border-radius: 5px;
78 | font-family: $PRIMARY_FONT;
79 |
80 | @media screen and (max-height: $small) {
81 | font-size: 0.8em;
82 | }
83 |
84 | @media screen and (max-height: $large) {
85 | font-size: 1.0vw;
86 | }
87 | }
88 |
89 | button:hover {
90 | cursor: pointer;
91 | }
92 |
93 | #refreshButton {
94 | background-color: $PRIMARY_RED;
95 | border: 1px solid $PRIMARY_RED;
96 | }
97 |
98 | #clear-interval-button {
99 | background-color: transparent;
100 | border: 1px solid $PRIMARY_LIGHT;
101 | color: $PRIMARY_LIGHT;
102 | }
103 |
104 | }
105 |
106 | #keyspace-graph-filter-buttons-container {
107 |
108 | button {
109 | height: 28%;
110 | }
111 | }
--------------------------------------------------------------------------------
/src/client/components/graphs/EventsChartFilterNav.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import EventsChartFilter from "./EventsChartFilter.jsx";
3 | import "../styles/graphfilters.scss";
4 |
5 | class EventsChartFilterNav extends Component {
6 | constructor(props) {
7 | super(props);
8 | }
9 | render() {
10 | // console.log("props in EventsChartFilterNav", this.props);
11 | return (
12 |
49 |
51 |
52 |
53 |
65 |
66 |
55 |
59 |
63 |
64 |
13 |
64 | );
65 | }
66 | }
67 |
68 | export default EventsChartFilterNav;
69 |
--------------------------------------------------------------------------------
/src/client/components/navbars/InstanceNav.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { connect } from "react-redux";
3 | import InstanceComponent from "./InstanceComponent.jsx";
4 | import DatabaseSelector from "./DatabaseSelector.jsx";
5 | import * as actions from "../../action-creators/connections";
6 |
7 | import '../styles/instances.scss';
8 |
9 | const mapStateToProps = (store) => ({
10 | instanceInfo: store.instanceInfoStore.instanceInfo,
11 | currInstance: store.currInstanceStore.currInstance,
12 | currDatabase: store.currDatabaseStore.currDatabase
13 | });
14 |
15 | const mapDispatchToProps = (dispatch) => ({
16 | switchInstance: (instance) => {
17 | dispatch(actions.switchInstanceActionCreator(instance));
18 |
19 | //When switching instances, automatically flip to db0
20 | dispatch(actions.switchDatabaseActionCreator(0));
21 | },
22 | switchDatabase: (database) => {
23 | dispatch(actions.switchDatabaseActionCreator(database));
24 | }
25 | });
26 |
27 | class InstanceNav extends Component {
28 |
29 | constructor(props) {
30 | super(props);
31 | }
32 |
33 | render() {
34 |
35 | const instances = [];
36 | this.props.instanceInfo.forEach((instance, idx) => {
37 |
38 | //If instance is currently selected
39 | //Pass down a DatabaseSelector component
40 | let databases, className;
41 | if (instance.instanceId === this.props.currInstance) {
42 | databases =
31 |
46 |
62 |
63 |
77 |
80 | );
81 | }
82 | }
83 |
84 | export default connect(mapStateToProps, mapDispatchToProps)(InstanceNav);
85 |
--------------------------------------------------------------------------------
/src/server/redis-monitors/models/interfaces.ts:
--------------------------------------------------------------------------------
1 | /*
2 | Library of interfaces to represent data structures used by the RedisMonitors.
3 | */
4 |
5 | import { RedisClient } from 'redis';
6 |
7 | export interface RedisInstance {
8 | readonly host?: string;
9 | readonly port?: number;
10 | readonly url?: string;
11 | readonly recordKeyspaceHistoryFrequency: number;
12 | readonly maxKeyspaceHistoryCount: number;
13 | readonly eventGraphRefreshFrequency: number;
14 | readonly maxEventLogSize: number;
15 | readonly notifyKeyspaceEvents: string;
16 | };
17 |
18 | export interface RedisMonitor {
19 | readonly instanceId: number;
20 | readonly redisClient: RedisClient;
21 | readonly keyspaceSubscriber: RedisClient;
22 | host?: RedisInstance['host'];
23 | port?: RedisInstance['port'];
24 | url?: RedisInstance['url'];
25 | databases?: number; //Check property - should this be optional on object initialization?
26 | keyspaces: Keyspace[];
27 | readonly recordKeyspaceHistoryFrequency: RedisInstance['recordKeyspaceHistoryFrequency'];
28 | readonly maxKeyspaceHistoryCount: RedisInstance['maxKeyspaceHistoryCount'];
29 | readonly eventGraphRefreshFrequency: RedisInstance['eventGraphRefreshFrequency'];
30 | readonly maxEventLogSize: RedisInstance['maxEventLogSize'];
31 | readonly notifyKeyspaceEvents: RedisInstance['notifyKeyspaceEvents'];
32 | };
33 |
34 | export interface Keyspace {
35 | eventLog: EventLog;
36 | keyspaceHistories: KeyspaceHistoriesLog;
37 | keyspaceSnapshot: KeyspaceKeyDetail[];
38 | eventLogSnapshot: KeyspaceEvent[];
39 | };
40 | export interface KeyspaceKeyDetail {
41 | key: string;
42 | value: any;
43 | type: string;
44 | }
45 | export interface EventLog {
46 | head: null | KeyspaceEventNode;
47 | tail: null | KeyspaceEventNode;
48 | eventTotal: number;
49 | maxLength: number;
50 | length: number;
51 | add: (key: string, event: string) => void;
52 | reset: () => void;
53 | returnLogAsArray: (eventTotal: number) => KeyspaceEvent[];
54 | }
55 | export interface KeyspaceEvent {
56 | key: string;
57 | event: string;
58 | timestamp: number;
59 | }
60 |
61 | export interface KeyspaceEventNode extends KeyspaceEvent {
62 | next: null | KeyspaceEventNode;
63 | previous: null | KeyspaceEventNode;
64 | };
65 |
66 | export interface KeyspaceHistoriesLog {
67 | head: null | KeyspaceHistoryNode;
68 | tail: null | KeyspaceHistoryNode;
69 | historiesCount: number;
70 | maxLength: number;
71 | length: number;
72 | add: (keyDetails: KeyDetails[]) => void;
73 | reset: () => void;
74 | returnLogAsArray: (historiesCount: number) => KeyspaceHistory[];
75 | }
76 |
77 | export interface KeyspaceHistory {
78 | timestamp: number;
79 | keys: KeyDetails[];
80 | };
81 |
82 | export interface KeyspaceHistoryNode extends KeyspaceHistory {
83 | next: null | KeyspaceHistoryNode;
84 | previous: null | KeyspaceHistoryNode;
85 | }
86 |
87 | export interface KeyDetails {
88 | key: string,
89 | memoryUsage: number
90 | }
--------------------------------------------------------------------------------
/src/server/redis-monitors/utils.ts:
--------------------------------------------------------------------------------
1 | import { RedisClient } from 'redis';
2 | import { promisify } from 'util';
3 | import { RedisMonitor, KeyDetails } from './models/interfaces';
4 |
5 | export const promisifyClientMethods = (client: RedisClient) => {
6 | /*
7 | Promisifies methods of the client.
8 | */
9 |
10 | //redis processes - currently excluded as this method is being used
11 | //in callback form - need to refactor existing code before utilizing this
12 | client.config = promisify(client.config).bind(client);
13 |
14 | //redis commands: databases
15 | client.flushdb = promisify(client.flushdb).bind(client);
16 | client.flushall = promisify(client.flushall).bind(client);
17 | client.select = promisify(client.select).bind(client);
18 |
19 | //redis commands: data
20 | client.scan = promisify(client.scan).bind(client);
21 | client.type = promisify(client.type).bind(client);
22 |
23 | //redis commands: data: strings
24 | client.set = promisify(client.set).bind(client);
25 | client.get = promisify(client.get).bind(client);
26 | client.mget = promisify(client.mget).bind(client);
27 |
28 | //redis commands: data: lists (note: requires index to get value)
29 | client.lrange = promisify(client.lrange).bind(client);
30 |
31 | //redis commands: data: sets (note: returns all members of set associated with given key)
32 | client.smembers = promisify(client.smembers).bind(client);
33 |
34 | //redis commands: data: sorted sets (note: returns range of elements by index
35 | // min and max. Can use -inf and +inf, or since the indices are 0-based, can use
36 | // 0 for the min and -1 for the max, which is the last element)
37 | client.zrange = promisify(client.zrange).bind(client);
38 |
39 | //redis commands: data: hashes (note: requires id to get all field/value pairs)
40 | client.hgetall = promisify(client.hgetall).bind(client);
41 |
42 | return client;
43 | }
44 |
45 | // const getKeyMemoryUsage = async (key: string, client: RedisClient): PromiseConnections
78 | {instances} 79 |
68 | {/*
87 | );
88 | // }
89 | }
90 | }
91 |
92 | export default connect(mapStateToProps, mapDispatchToProps)(GraphComponent);
93 |
--------------------------------------------------------------------------------
/__tests__/client/react/databaseNav.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { configure, shallow } from 'enzyme';
3 | import Adapter from 'enzyme-adapter-react-16';
4 | import toJson from 'enzyme-to-json';
5 | import renderer from 'react-test-renderer';
6 |
7 | import DatabaseNav from '../../../src/client/components/navbars/DatabaseNav.jsx';
8 | import DatabaseComponent from '../../../src/client/components/navbars/DatabaseComponent.jsx';
9 |
10 | configure({ adapter: new Adapter() });
11 |
12 | describe('React DatabaseNav unit tests', () => {
13 | describe('DatabaseNav', () => {
14 | let wrapper;
15 | const props = {
16 | databaseInfo: [
17 | {
18 | host: 'localhost',
19 | port: '3000',
20 | numberOfDBs: 16,
21 | },
22 | ],
23 | };
24 |
25 | beforeAll(() => {
26 | wrapper = shallow(
69 |
106 | );
107 | }
108 |
109 | export default EventTable;
110 |
--------------------------------------------------------------------------------
/src/client/components/events/EventComponent.jsx:
--------------------------------------------------------------------------------
1 | // import React, { Component } from "react";
2 | // import { connect } from "react-redux";
3 |
4 | // import EventTable from "./EventTable.jsx";
5 |
6 | // const mapStateToProps = (store) => {
7 | // return {
8 | // currInstance: store.currInstanceStore.currInstance,
9 | // currDatabase: store.currDatabaseStore.currDatabase,
10 | // events: store.eventsStore.events,
11 | // currDisplay: store.currDisplayStore.currDisplay,
12 | // };
13 | // };
14 |
15 | // class EventComponent extends Component {
16 | // constructor(props) {
17 | // super(props);
18 | // }
19 |
20 | // render() {
21 | // console.log("props in EventComponent", this.props);
22 | // return (
23 | //
24 | //
31 | // );
32 | // }
33 | // }
34 |
35 | // export default connect(mapStateToProps, null)(EventComponent);
36 |
37 | import React, { Component } from 'react';
38 | import { connect } from 'react-redux';
39 | import EventTable from './EventTable.jsx';
40 | import * as actions from '../../action-creators/connections';
41 | import * as eventActions from '../../action-creators/eventsConnections';
42 |
43 | //withRouter??? -- for props.history -- stretch??
44 |
45 | const mapStateToProps = (store) => {
46 | return {
47 | currInstance: store.currInstanceStore.currInstance,
48 | currDatabase: store.currDatabaseStore.currDatabase,
49 | events: store.eventsStore.events,
50 | currDisplay: store.currDisplayStore.currDisplay,
51 | pageSize: store.dataPageStore.pageSize,
52 | pageNum: store.dataPageStore.pageNum,
53 | };
54 | };
55 | const mapDispatchToProps = (dispatch) => ({
56 | updatePageSize: (pageSize) =>
57 | dispatch(actions.updatePageSizeActionCreator(pageSize)),
58 | updatePageNum: (pageNum) =>
59 | dispatch(actions.updatePageNumActionCreator(pageNum)),
60 | changeEventsPage: (instanceId, dbIndex, queryOptions) =>
61 | dispatch(
62 | eventActions.changeEventsPageActionCreator(
63 | instanceId,
64 | dbIndex,
65 | queryOptions
66 | )
67 | ),
68 | });
69 |
70 | class EventComponent extends Component {
71 | constructor(props) {
72 | super(props);
73 | }
74 |
75 | render() {
76 | // console.log('all the props in event component', this.props);
77 |
78 | const currDatabaseData = this.props.events[this.props.currInstance - 1]
79 | .keyspaces[this.props.currDatabase];
80 |
81 | const myCount = currDatabaseData ? currDatabaseData.eventTotal : 0;
82 |
83 | return (
84 |
85 |
98 | );
99 | }
100 | }
101 |
102 | export default connect(mapStateToProps, mapDispatchToProps)(EventComponent);
103 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "redis-hawk",
3 | "version": "1.0.0",
4 | "description": "granular redis monitoring",
5 | "license": "MIT",
6 | "contributors": [
7 | "Abigail Gjurich",
8 | "Arthur Sato",
9 | "James Espy",
10 | "Wesley Jia"
11 | ],
12 | "keywords": [],
13 | "main": "./client/index.js",
14 | "scripts": {
15 | "build": "webpack",
16 | "test": "IS_TEST=true jest --verbose",
17 | "start": "NODE_ENV=production nodemon dist/server/server.js",
18 | "dev": "NODE_ENV=development webpack serve --open & nodemon dist/server/server.js",
19 | "cp": "copyfiles -u 1 src/server/tests-config/* src/server/assets/* dist/server/"
20 | },
21 | "jest": {
22 | "transform": {
23 | "^.+\\.(ts|tsx)$": "ts-jest",
24 | "^.+\\.jsx?$": "babel-jest"
25 | },
26 | "roots": [
27 | "1
]));
53 | });
54 |
55 | it("the div with the id totals should render the number of total events if on the events page", () => {
56 | wrapper = shallow(1
]));
59 | });
60 | });
61 |
62 | describe("SearchFilter", () => {
63 | let wrapper;
64 | const props = {
65 | whichPage: "keyspace",
66 | keyspace: [
67 | [
68 | {
69 | name: "keyName",
70 | value: "hello",
71 | time: "11:52",
72 | },
73 | ],
74 | ],
75 | events: [
76 | [
77 | {
78 | name: "hey!",
79 | event: "scan",
80 | time: "8:30",
81 | },
82 | ],
83 | ],
84 | currDatabase: 0,
85 | };
86 |
87 | it("renders an input with an id searchInput", () => {
88 | wrapper = shallow(
93 |
132 | );
133 | }
134 |
135 | export default KeyspaceTable;
136 |
--------------------------------------------------------------------------------
/src/client/action-creators/keyspaceConnections.js:
--------------------------------------------------------------------------------
1 | import * as types from '../actions/actionTypes';
2 |
3 | //called on initial load of app in App.jsx
4 | // no requirements in for the deployment of this action creator
5 | //response :
6 | // {
7 | // data: [ (array of instances)
8 | // {
9 | // instanceId: 1,
10 | // keyspaces: [ (array of databases)
11 | // {
12 | // keyTotal: 6347,
13 | // pageSize: 50,
14 | // pageNum: 4,
15 | // data: [
16 | // {
17 | // key: '',
18 | // value: any,
19 | // type: any,
20 | // },
21 | // ],
22 | // },
23 | // ],
24 | // },
25 | // ];
26 | // }
27 | export const loadKeyspaceActionCreator = () => (dispatch) => {
28 | fetch('/api/v2/keyspaces/?pageSize=25&refreshScan=0')
29 | .then((res) => res.json())
30 | .then((response) => {
31 | // console.log('response in loadKeyspaceActionCreator', response);
32 | let fullKeyspace = response.data;
33 | dispatch({
34 | type: types.LOAD_KEYSPACE,
35 | payload: {
36 | keyspace: fullKeyspace,
37 | },
38 | });
39 | });
40 | };
41 |
42 | //for refreshing the keyspace of a certain database at a certain instance - need to know if there are filters or not for dispatch
43 | // arguments: database, instance, page size, page num = 1, refreshScan = 1,
44 | //response:
45 | // {
46 | // keyTotal: 6347,
47 | // pageSize: 50,
48 | // pageNum: 4,
49 | // data: [
50 | // {
51 | // key: '',
52 | // value: '',
53 | // type: any,
54 | // }
55 | // ]
56 | // }
57 | export const refreshKeyspaceActionCreator =
58 | (instanceId, dbIndex, pageSize, pageNum, refreshScan) => (dispatch) => {
59 | fetch(
60 | `api/v2/keyspaces/${instanceId}/${dbIndex}/?pageSize=${pageSize}&pageNum=${pageNum}&refreshScan=${refreshScan}`
61 | )
62 | .then((res) => res.json())
63 | .then((response) => {
64 | console.log('response in refreshKeyspaceActionCreator', response);
65 | let refreshKeyspace = response;
66 | dispatch({
67 | type: types.REFRESH_KEYSPACE,
68 | payload: {
69 | keyspace: refreshKeyspace,
70 | currInstance: instanceId,
71 | currDatabase: dbIndex,
72 | },
73 | });
74 | });
75 | };
76 | //change the page and handle the filters for keyspace
77 | //requirements: instanceId, dbIndex, page Size, page num, keyname filter, keytype filter, refreshScan = 0 - need to know whether there is a
78 | //OPTIONS PARAMETER BEING USED HERE CALLED QUERYOPTIONS
79 | //response:
80 | // {
81 | // keyTotal: 6347,
82 | // pageSize: 50,
83 | // pageNum: 4,
84 | // data: [
85 | // {
86 | // key: '',
87 | // value: '',
88 | // type: any,
89 | // }
90 | // ]
91 | // }
92 | export const changeKeyspacePageActionCreator =
93 | (instanceId, dbIndex, queryOptions) => (dispatch) => {
94 | let URI = `api/v2/keyspaces/${instanceId}/${dbIndex}/?pageSize=${queryOptions.pageSize}&pageNum=${queryOptions.pageNum}`;
95 | //this may have an issue in here - be aware of queryOptions
96 | // if (queryOptions.pageSize) URI += `pageSize=${queryOptions.pageSize}`;
97 | // if (queryOptions.pageNum) URI += `&pageNum=${queryOptions.pageNum}`;
98 | if (queryOptions.keyNameFilter.length !== 0 || queryOptions.keyNameFilter)
99 | URI += `&keynameFilter=${queryOptions.keyNameFilter}`;
100 | if (queryOptions.keyTypeFilter.length !== 0 || queryOptions.keyTypeFilter)
101 | URI += `&keytypeFilter=${queryOptions.keyTypeFilter}`;
102 | if (queryOptions.refreshScan !== undefined)
103 | URI += `&refreshScan=${queryOptions.refreshScan}`;
104 |
105 | console.log('MY CHANGE KEYSPACE PAGE URI', URI);
106 |
107 | fetch(URI)
108 | .then((res) => res.json())
109 | .then((response) => {
110 | console.log('response in changeKeyspaceActionCreator', response);
111 | let nextPageKeyspace = response;
112 | dispatch({
113 | type: types.CHANGE_KEYSPACE_PAGE,
114 | payload: {
115 | keyspace: nextPageKeyspace,
116 | currInstance: instanceId,
117 | currDatabase: dbIndex,
118 | },
119 | });
120 | });
121 | };
122 |
--------------------------------------------------------------------------------
/__tests__/client/react/keyspaceComponent.test.js:
--------------------------------------------------------------------------------
1 | //need to complete pagination
2 |
3 | import React from 'react';
4 | import { configure, shallow } from 'enzyme';
5 | import Adapter from 'enzyme-adapter-react-16';
6 | import toJson from 'enzyme-to-json';
7 | import renderer from 'react-test-renderer';
8 |
9 | import KeyspaceComponent from '../../../src/client/components/keyspace/KeyspaceComponent.jsx';
10 | import KeyspaceTable from '../../../src/client/components/keyspace/KeyspaceTable.jsx';
11 |
12 | configure({ adapter: new Adapter() });
13 |
14 | describe('React Keyspace unit tests', () => {
15 | describe('KeyspaceComponent', () => {
16 | let wrapper;
17 | const props = {
18 | keyspace: [
19 | [
20 | {
21 | name: 'keyName',
22 | value: 'hello',
23 | type: 'SET',
24 | },
25 | ],
26 | ],
27 | currDisplay: 'keyspace',
28 | currDatabase: 0,
29 | };
30 |
31 | beforeAll(() => {
32 | wrapper = shallow(
40 |
46 | ])
47 | ).toEqual(true);
48 | });
49 | });
50 |
51 | describe('KeyspaceTable', () => {
52 | let wrapper;
53 | beforeAll(() => {
54 | wrapper = shallow(
37 |
,
43 | ])
44 | ).toEqual(true);
45 | });
46 | });
47 |
48 | describe('EventTable', () => {
49 | let wrapper;
50 | beforeAll(() => {
51 | wrapper = shallow(
90 |
91 |
98 |
141 | );
142 | }
143 |
144 | //
154 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
99 |
102 |
137 | {/* */}
138 |
139 | {newArea}
140 |
2 | 
3 |
82 | 83 | | Field | Description | 84 | | --- | --- | 85 | | **host** (string) | IP address of the Redis server | 86 | | **port** (number) | Port of the Redis server | 87 | | **url** (string) | URL of the Redis server. The format should be `[redis[s]:]//[[user][:password@]][host][:port][/db-number][?db=db-number[&password=bar[&option=value]]]`. For more information, please reference [IANA](https://www.iana.org/assignments/uri-schemes/prov/redis).| 88 | | **recordKeyspaceHistoryFrequency** (number) | The frequency at which keyspace histories should be recorded, in milliseconds. For more information, please see the configuration notes below. | 89 | 90 |
91 | 92 | The `config.json` defaults to monitoring the default local Redis instance via the following configuration options: 93 | 94 | ``` 95 | { 96 | "host": "127.0.0.1", 97 | "port": 6379, 98 | "recordKeyspaceHistoryFrequency": 60000 99 | } 100 | ``` 101 | ### Notes: 102 | 103 | * If setting `recordKeyspaceHistoryFrequency` to sub-minute frequencies or deployments with extensively high key volumes, please consider the impact on the performance for both your server and monitored Redis deployment. 104 | * Every `recordKeyspaceHistoryFrequency` milliseconds, the server will perform a non-blocking redis `SCAN` command against each database of the instance to record a snapshot of keyspace details. 105 | * While the `SCAN` command is non-blocking and rapid, it may have performance impacts for your Redis deployment if utilized very frequently for larger Redis deployments. 106 | * For more details on `SCAN` performance and behavior, please read the [Redis documentation](https://redis.io/commands/scan). 107 | 108 | ## Feature Roadmap 109 | 110 | The development team intends to continue improving redis-hawk and adding more features. Future features will include: 111 | 112 | * Ability to configure monitoring preferences directly via the `redis-hawk` UI. 113 | * Ability to configure maximum volumes of events and keyspace histories to record. 114 | * Additional graphs, such as viewing memory usage by keys over time 115 | * Additional database-level and instance-level metrics, such as overall memory usage and average key TTL 116 | * Performance recommendations based on observed metrics and patterns in your Redis deployment 117 | -------------------------------------------------------------------------------- /dist/server/redis-monitors/models/data-stores.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | exports.KeyspaceHistory = exports.KeyspaceHistoriesLog = exports.KeyspaceEvent = exports.EventLog = void 0; 4 | var EventLog = (function () { 5 | function EventLog(maxLength) { 6 | if (!Number.isInteger(maxLength) || maxLength <= 0) 7 | throw new TypeError('maxLength must be positive integer!'); 8 | this.head = null; 9 | this.tail = null; 10 | this.eventTotal = 0; 11 | this.length = 0; 12 | this.maxLength = maxLength; 13 | } 14 | EventLog.prototype.add = function (key, event) { 15 | if (this.length >= this.maxLength) { 16 | this.head = this.head.next; 17 | this.head.previous = null; 18 | this.length -= 1; 19 | } 20 | var newEvent = new KeyspaceEvent(key, event); 21 | this.eventTotal += 1; 22 | this.length += 1; 23 | if (!this.head) { 24 | this.head = newEvent; 25 | this.tail = newEvent; 26 | } 27 | else { 28 | this.tail.next = newEvent; 29 | newEvent.previous = this.tail; 30 | this.tail = newEvent; 31 | } 32 | }; 33 | EventLog.prototype.reset = function () { 34 | this.head = null; 35 | this.tail = null; 36 | this.eventTotal = 0; 37 | this.length = 0; 38 | }; 39 | EventLog.prototype.returnLogAsArray = function (eventTotal) { 40 | if (eventTotal === void 0) { eventTotal = 0; } 41 | if (eventTotal < 0 || eventTotal >= this.eventTotal) 42 | return []; 43 | var logAsArray = []; 44 | var count = this.eventTotal - eventTotal; 45 | if (this.length < count) 46 | count = this.length; 47 | var current = this.tail; 48 | while (count > 0) { 49 | var event_1 = { 50 | key: current.key, 51 | event: current.event, 52 | timestamp: current.timestamp 53 | }; 54 | logAsArray.push(event_1); 55 | current = current.previous; 56 | count -= 1; 57 | } 58 | return logAsArray; 59 | }; 60 | return EventLog; 61 | }()); 62 | exports.EventLog = EventLog; 63 | var KeyspaceEvent = (function () { 64 | function KeyspaceEvent(key, event) { 65 | if (typeof (key) !== 'string' || typeof (event) !== 'string') { 66 | throw new TypeError('KeyspaceEvent must be constructed with string args'); 67 | } 68 | this.key = key; 69 | this.event = event; 70 | this.timestamp = Date.now(); 71 | this.next = null; 72 | this.previous = null; 73 | } 74 | return KeyspaceEvent; 75 | }()); 76 | exports.KeyspaceEvent = KeyspaceEvent; 77 | var KeyspaceHistoriesLog = (function () { 78 | function KeyspaceHistoriesLog(maxLength) { 79 | if (!Number.isInteger(maxLength) || maxLength <= 0) 80 | throw new TypeError('maxLength must be positive integer!'); 81 | this.head = null; 82 | this.tail = null; 83 | this.historiesCount = 0; 84 | this.maxLength = maxLength; 85 | this.length = 0; 86 | } 87 | KeyspaceHistoriesLog.prototype.add = function (keyDetails) { 88 | if (this.length >= this.maxLength) { 89 | this.head = this.head.next; 90 | this.head.previous = null; 91 | this.length -= 1; 92 | } 93 | var newHistory = new KeyspaceHistory(keyDetails); 94 | this.historiesCount += 1; 95 | this.length += 1; 96 | if (!this.head) { 97 | this.head = newHistory; 98 | this.tail = newHistory; 99 | } 100 | else { 101 | this.tail.next = newHistory; 102 | newHistory.previous = this.tail; 103 | this.tail = newHistory; 104 | } 105 | }; 106 | KeyspaceHistoriesLog.prototype.reset = function () { 107 | this.head = null; 108 | this.tail = null; 109 | this.historiesCount = 0; 110 | this.length = 0; 111 | }; 112 | KeyspaceHistoriesLog.prototype.returnLogAsArray = function (historiesCount) { 113 | if (historiesCount === void 0) { historiesCount = 0; } 114 | if (historiesCount < 0 || historiesCount >= this.historiesCount) 115 | return []; 116 | var logAsArray = []; 117 | var count = this.historiesCount - historiesCount; 118 | if (this.length < count) 119 | count = this.length; 120 | var current = this.tail; 121 | while (count > 0) { 122 | var history_1 = { 123 | keys: current.keys, 124 | timestamp: current.timestamp 125 | }; 126 | logAsArray.push(history_1); 127 | current = current.previous; 128 | count -= 1; 129 | } 130 | return logAsArray; 131 | }; 132 | return KeyspaceHistoriesLog; 133 | }()); 134 | exports.KeyspaceHistoriesLog = KeyspaceHistoriesLog; 135 | ; 136 | var KeyspaceHistory = (function () { 137 | function KeyspaceHistory(keys) { 138 | if (!Array.isArray(keys)) { 139 | throw new TypeError('KeyspaceHistory must be constructed with an array of KeyDetails'); 140 | } 141 | this.keys = keys; 142 | this.timestamp = Date.now(); 143 | this.next = null; 144 | this.previous = null; 145 | } 146 | return KeyspaceHistory; 147 | }()); 148 | exports.KeyspaceHistory = KeyspaceHistory; 149 | ; 150 | -------------------------------------------------------------------------------- /src/client/components/styles/styles.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); 2 | 3 | html { 4 | height: 100vh; 5 | width: 100vw; 6 | } 7 | 8 | body { 9 | /* display: inline-block; */ 10 | height: 100%; 11 | width: 100%; 12 | margin: 0 auto; 13 | padding: 1em 0; 14 | background-color: rgb(35, 35, 35); 15 | color: rgb(200, 200, 200); 16 | } 17 | 18 | #root { 19 | height: 100%; 20 | width: 100%; 21 | font-family: 'Roboto', sans-serif; 22 | } 23 | 24 | #app { 25 | height: 100%; 26 | width: 100%; 27 | position: relative; 28 | display: flex; 29 | } 30 | 31 | #graphsComponentContainer { 32 | position: absolute; 33 | display: flex; 34 | justify-content: center; 35 | align-items: center; 36 | top: 30%; 37 | height: 55%; 38 | width: 60%; 39 | left: 30%; 40 | border: 1px solid #000000; 41 | background-color: black; 42 | box-sizing: border-box; 43 | box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 44 | overflow: scroll; 45 | } 46 | 47 | #eventComponentContainer { 48 | position: absolute; 49 | display: flex; 50 | flex-direction: column; 51 | justify-content: center; 52 | align-items: center; 53 | top: 30%; 54 | left: 30%; 55 | height: 55%; 56 | width: 60%; 57 | border: 1px solid #000000; 58 | box-sizing: border-box; 59 | box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 60 | } 61 | 62 | #keyspaceComponentContainer { 63 | display: flex; 64 | flex-direction: column; 65 | justify-content: center; 66 | position: absolute; 67 | top: 50%; 68 | left: 30%; 69 | height: 55%; 70 | width: 60%; 71 | border: 1px solid #000000; 72 | box-sizing: border-box; 73 | box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 74 | } 75 | #tableContainer { 76 | background-color: black; 77 | } 78 | 79 | #tableCell { 80 | /* color: white; */ 81 | } 82 | 83 | #tableBody { 84 | /* color: white; */ 85 | } 86 | 87 | .filterNavContainer { 88 | position: absolute; 89 | display: flex; 90 | justify-content: space-between; 91 | flex-direction: row; 92 | top: 18%; 93 | left: 30%; 94 | height: 25%; 95 | width: 60%; 96 | border-bottom: 1px solid grey; 97 | box-sizing: border-box; 98 | } 99 | 100 | .filterNavContainer > .filter-button { 101 | background-color: rgb(233, 0, 0); 102 | border: 1px solid rgb(233, 0, 0); 103 | border-radius: 5px; 104 | margin: 2em 0; 105 | color: rgb(0, 0, 0); 106 | } 107 | 108 | #filter-form { 109 | display: flex; 110 | align-items: center; 111 | } 112 | 113 | #filter-form > * { 114 | margin: 0 0.25em; 115 | } 116 | 117 | #filter-form > .form-filter-button { 118 | background-color: transparent; 119 | border: 1px solid rgb(201, 76, 3); 120 | color: rgb(200, 200, 200); 121 | border-radius: 5px; 122 | padding: 0.25em 0.5em; 123 | width: 10%; 124 | } 125 | 126 | .filterNavContainer > .filter-button:hover, 127 | .form-filter-button:hover { 128 | cursor: pointer; 129 | } 130 | 131 | #refreshButton { 132 | position: relative; 133 | width: 10%; 134 | 135 | z-index: 1; 136 | } 137 | 138 | .searchFilterDiv { 139 | display: flex; 140 | flex-direction: row; 141 | justify-content: center; 142 | align-items: center; 143 | } 144 | 145 | .filterContainer { 146 | display: flex; 147 | flex-direction: column; 148 | justify-content: center; 149 | align-items: center; 150 | width: 40%; 151 | } 152 | 153 | .databaseNavContainer { 154 | position: absolute; 155 | top: 5%; 156 | height: 80%; 157 | width: 10%; 158 | box-sizing: border-box; 159 | border: 1px solid grey; 160 | border-radius: 10px; 161 | overflow-y: auto; 162 | padding: 1em 2.5em 1em; 163 | font-size: 1.1em; 164 | } 165 | 166 | .InstanceNav-Container { 167 | position: absolute; 168 | top: 5%; 169 | left: 10%; 170 | height: 80%; 171 | width: 18%; 172 | box-sizing: border-box; 173 | border: 1px solid grey; 174 | border-radius: 10px; 175 | overflow-y: auto; 176 | padding: 1em 2.5em 1em; 177 | font-size: 1.1em; 178 | } 179 | 180 | #instanceHolder > .singleInstance { 181 | padding: 0.25em 0 0.25em 1em; 182 | } 183 | 184 | #instanceHolder > .singleInstance:hover { 185 | cursor: pointer; 186 | } 187 | 188 | #redisInstance > p { 189 | margin: 0.5em 0.25em; 190 | } 191 | 192 | #redisInstance span { 193 | font-weight: bold; 194 | text-decoration: underline; 195 | } 196 | 197 | #databaseHolder > .singleDatabase { 198 | padding: 0.25em 0 0.25em 1em; 199 | } 200 | 201 | #databaseHolder > .singleDatabase:hover { 202 | cursor: pointer; 203 | } 204 | 205 | #pageNavContainer { 206 | position: absolute; 207 | display: flex; 208 | flex-direction: row; 209 | justify-content: space-evenly; 210 | align-items: center; 211 | top: 2%; 212 | left: 25%; 213 | height: 15%; 214 | width: 70%; 215 | } 216 | 217 | #pageNavContainer .page-toggle { 218 | text-decoration: none; 219 | color: rgb(233, 0, 0); 220 | border: 1px solid red; 221 | border-radius: 5px; 222 | padding: 1em 6em; 223 | } 224 | 225 | #pageNavContainer .selected-page-toggle { 226 | text-decoration: none; 227 | color: white; 228 | background-color: rgb(233, 0, 0); 229 | border-radius: 5px; 230 | padding: 1em 6em; 231 | } 232 | 233 | #keyListComponentContainer { 234 | position: absolute; 235 | height: 20px; 236 | width: 100px; 237 | color: black; 238 | background-color: orange; 239 | } 240 | 241 | #redisInstance { 242 | height: 10%; 243 | } 244 | #databaseHolder { 245 | height: 90%; 246 | } 247 | 248 | .MuiToolbar-root { 249 | color: rgb(200, 200, 200); 250 | font-family: 'Roboto', sans-serif; 251 | } 252 | .MuiDataGrid-main { 253 | color: rgb(200, 200, 200); 254 | font-family: 'Roboto', sans-serif; 255 | } 256 | 257 | .MuiInputLabel-formControl { 258 | color: rgb(200, 200, 200); 259 | font-family: 'Roboto', sans-serif; 260 | } 261 | 262 | .MuiFormControl-root { 263 | color: rgb(200, 200, 200); 264 | } 265 | 266 | .MuiInputBase-root { 267 | color: rgb(200, 200, 200); 268 | } 269 | 270 | .table-header { 271 | font-weight: bold; 272 | } 273 | -------------------------------------------------------------------------------- /dist/server/controllers/utils.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { 3 | function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } 4 | return new (P || (P = Promise))(function (resolve, reject) { 5 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 6 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 7 | function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } 8 | step((generator = generator.apply(thisArg, _arguments || [])).next()); 9 | }); 10 | }; 11 | var __generator = (this && this.__generator) || function (thisArg, body) { 12 | var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; 13 | return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; 14 | function verb(n) { return function (v) { return step([n, v]); }; } 15 | function step(op) { 16 | if (f) throw new TypeError("Generator is already executing."); 17 | while (_) try { 18 | if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; 19 | if (y = 0, t) op = [op[0] & 2, t.value]; 20 | switch (op[0]) { 21 | case 0: case 1: t = op; break; 22 | case 4: _.label++; return { value: op[1], done: false }; 23 | case 5: _.label++; y = op[1]; op = [0]; continue; 24 | case 7: op = _.ops.pop(); _.trys.pop(); continue; 25 | default: 26 | if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } 27 | if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } 28 | if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } 29 | if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } 30 | if (t[2]) _.ops.pop(); 31 | _.trys.pop(); continue; 32 | } 33 | op = body.call(thisArg, _); 34 | } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } 35 | if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; 36 | } 37 | }; 38 | Object.defineProperty(exports, "__esModule", { value: true }); 39 | exports.getKeyspace = void 0; 40 | var getValue = function (key, type, redisClient) { return __awaiter(void 0, void 0, void 0, function () { 41 | var value, _a; 42 | return __generator(this, function (_b) { 43 | switch (_b.label) { 44 | case 0: 45 | _a = type; 46 | switch (_a) { 47 | case 'string': return [3, 1]; 48 | case 'list': return [3, 3]; 49 | case 'set': return [3, 5]; 50 | case 'zset': return [3, 7]; 51 | case 'hash': return [3, 9]; 52 | } 53 | return [3, 11]; 54 | case 1: return [4, redisClient.get(key)]; 55 | case 2: 56 | value = _b.sent(); 57 | ; 58 | return [3, 11]; 59 | case 3: return [4, redisClient.lrange(key, 0, -1)]; 60 | case 4: 61 | value = _b.sent(); 62 | ; 63 | return [3, 11]; 64 | case 5: return [4, redisClient.smembers(key)]; 65 | case 6: 66 | value = _b.sent(); 67 | ; 68 | return [3, 11]; 69 | case 7: return [4, redisClient.zrange(key, 0, -1)]; 70 | case 8: 71 | value = _b.sent(); 72 | ; 73 | return [3, 11]; 74 | case 9: return [4, redisClient.hgetall(key)]; 75 | case 10: 76 | value = _b.sent(); 77 | ; 78 | return [3, 11]; 79 | case 11: 80 | ; 81 | return [2, value]; 82 | } 83 | }); 84 | }); }; 85 | var getKeyspace = function (redisClient, dbIdx) { return __awaiter(void 0, void 0, void 0, function () { 86 | var res, scanResults, cursor, keys, _i, keys_1, key, type, value; 87 | return __generator(this, function (_a) { 88 | switch (_a.label) { 89 | case 0: 90 | res = []; 91 | return [4, redisClient.select(dbIdx)]; 92 | case 1: 93 | _a.sent(); 94 | return [4, redisClient.scan('0', 'COUNT', '100')]; 95 | case 2: 96 | scanResults = _a.sent(); 97 | cursor = scanResults[0]; 98 | keys = scanResults[1]; 99 | _a.label = 3; 100 | case 3: 101 | _i = 0, keys_1 = keys; 102 | _a.label = 4; 103 | case 4: 104 | if (!(_i < keys_1.length)) return [3, 8]; 105 | key = keys_1[_i]; 106 | return [4, redisClient.type(key)]; 107 | case 5: 108 | type = _a.sent(); 109 | return [4, getValue(key, type, redisClient)]; 110 | case 6: 111 | value = _a.sent(); 112 | res.push({ 113 | key: key, 114 | type: type, 115 | value: value 116 | }); 117 | _a.label = 7; 118 | case 7: 119 | _i++; 120 | return [3, 4]; 121 | case 8: return [4, redisClient.scan(cursor, 'COUNT', '100')]; 122 | case 9: 123 | scanResults = _a.sent(); 124 | cursor = scanResults[0]; 125 | keys = scanResults[1]; 126 | _a.label = 10; 127 | case 10: 128 | if (cursor !== '0') return [3, 3]; 129 | _a.label = 11; 130 | case 11: return [2, res]; 131 | } 132 | }); 133 | }); }; 134 | exports.getKeyspace = getKeyspace; 135 | -------------------------------------------------------------------------------- /__tests__/server/data-stores.ts: -------------------------------------------------------------------------------- 1 | const { EventLog, KeyspaceEvent } = require('../../src/server/redis-monitors/models/data-stores'); 2 | 3 | //These unit tests need to be updated based on changed data stores. 4 | //Route integration tests still provide coverage and are currently consistently passing. 5 | xdescribe('RedisMonitors Data Stores Unit Tests', () => { 6 | 7 | xdescribe('Keyspace Event', () => { 8 | 9 | const key = 'message:1'; 10 | const eventType = 'set'; 11 | const event = new KeyspaceEvent(key, eventType); 12 | 13 | it('should have a next and previous property', () => { 14 | expect(event).toEqual(expect.objectContaining({ 15 | previous: null, 16 | next: null 17 | })); 18 | }); 19 | 20 | it('should set the key and event properties using the constructor arguments', () => { 21 | expect(event.key).toEqual(key); 22 | expect(event.event).toEqual(eventType); 23 | }) 24 | 25 | it('should have a timestamp property for when the KeyspaceEvent was initialized', () => { 26 | expect(Date.now() - event.timestamp).toBeLessThan(1000); //less than 1000ms ago 27 | }) 28 | 29 | it('should not allow non-string arguments', () => { 30 | expect(() => { 31 | new KeyspaceEvent(1, eventType) 32 | }).toThrow(TypeError); 33 | 34 | expect(() => { 35 | new KeyspaceEvent(key, []) 36 | }).toThrow(TypeError); 37 | }); 38 | 39 | }); 40 | 41 | xdescribe('Event Log', () => { 42 | 43 | let eventLog = new EventLog(); 44 | 45 | it('should have a head and a tail', () => { 46 | expect(eventLog).toEqual(expect.objectContaining({ 47 | head: null, 48 | tail: null, 49 | })); 50 | }); 51 | 52 | it('should have an eventTotal initialized to 0', () => { 53 | expect(eventLog.eventTotal).toEqual(0); 54 | }); 55 | 56 | describe('Add Method', () => { 57 | 58 | let eventLog = new EventLog(); 59 | 60 | it('should add the first Keyspace Event as the head and tail', () => { 61 | 62 | const event = new KeyspaceEvent('somekey', 'get'); 63 | eventLog.add('somekey', 'get'); 64 | expect(eventLog.head.key).toEqual(event.key); 65 | expect(eventLog.head.event).toEqual(event.event); 66 | expect(eventLog.tail.key).toEqual(event.key); 67 | expect(eventLog.tail.event).toEqual(event.event); 68 | }); 69 | 70 | it('should change the tail when adding additional Keyspace Events', () => { 71 | eventLog.add('anotherkey', 'set'); 72 | expect(eventLog.tail).not.toBe(eventLog.head); 73 | }) 74 | 75 | it('should not change the head when adding additional Keyspace Events', () => { 76 | const currentHead = eventLog.head; 77 | eventLog.add('thirdkey', 'mget'); 78 | expect(eventLog.head).toBe(currentHead); 79 | }); 80 | 81 | it('should set the previous and next properties correctly on the newest Keyspace Event', () => { 82 | eventLog.add('fourthkey', 'set'); 83 | expect(eventLog.tail.previous.key).toEqual('thirdkey'); 84 | expect(eventLog.tail.next).toEqual(null); 85 | }); 86 | 87 | it('should properly set the next property of the previous KeyspaceEvent when adding a new KeyspaceEvent', () => { 88 | expect(eventLog.tail.previous.next).toBe(eventLog.tail); 89 | }); 90 | 91 | }); 92 | 93 | describe('returnLogAsArray method', () => { 94 | 95 | const eventLog = new EventLog(); 96 | 97 | const newEvents = [ 98 | { key: 'message:1', event: 'set' }, 99 | { key: 'message:2', event: 'set' }, 100 | { key: 'message:3', event: 'set' }, 101 | { key: 'message:3', event: 'get' }, 102 | { key: 'message:4', event: 'set' }, 103 | { key: 'message:1', event: 'get' }, 104 | ]; 105 | 106 | newEvents.forEach(event => { 107 | eventLog.add(event.key, event.event); 108 | }) 109 | 110 | it('should return an array of KeyspaceEvent objects', () => { 111 | 112 | const arrayLog = eventLog.returnLogAsArray(); 113 | expect(arrayLog).toBeInstanceOf(Array); 114 | arrayLog.forEach(event => { 115 | expect(event).toEqual(expect.objectContaining({ 116 | key: expect.any(String), 117 | event: expect.any(String), 118 | timestamp: expect.any(Number) 119 | })); 120 | }); 121 | }); 122 | 123 | it('should return the KeyspaceEvent objects in the order of most recent to least recent', () => { 124 | 125 | const arrayLog = eventLog.returnLogAsArray(); 126 | let previousTimestamp = arrayLog[0].timestamp; 127 | 128 | arrayLog.slice(1).forEach(event => { 129 | expect(previousTimestamp).toBeGreaterThanOrEqual(event.timestamp); 130 | previousTimestamp = event.timestamp; 131 | }); 132 | }); 133 | 134 | it('should return all of the KeyspaceEvents in the log if no eventTotal argument is provided', () => { 135 | 136 | const arrayLog = eventLog.returnLogAsArray(); 137 | arrayLog.forEach((event, idx) => { 138 | expect(event.key).toEqual(newEvents[newEvents.length - idx - 1].key); 139 | expect(event.event).toEqual(newEvents[newEvents.length - idx - 1].event); 140 | }); 141 | }); 142 | 143 | it('should return the correct number of KeyspaceEvents if an eventTotal argument is provided', () => { 144 | 145 | const arrayLog = eventLog.returnLogAsArray(2); 146 | expect(arrayLog).toHaveLength(newEvents.length - 2); 147 | }); 148 | 149 | it('should return the correct number of KeyspaceEvents if an eventTotal argument is provided', () => { 150 | 151 | const arrayLog = eventLog.returnLogAsArray(2); 152 | expect(arrayLog).toHaveLength(newEvents.length - 2); 153 | }); 154 | 155 | it('should return the most recent KeyspaceEvents if an eventTotal argument is provided, in order of most to least recent', () => { 156 | 157 | const arrayLog = eventLog.returnLogAsArray(2); 158 | let previousTimestamp = arrayLog[0].timestamp; 159 | 160 | arrayLog.slice(1).forEach(event => { 161 | expect(previousTimestamp).toBeGreaterThanOrEqual(event.timestamp); 162 | previousTimestamp = event.timestamp; 163 | }); 164 | }); 165 | 166 | }); 167 | 168 | }); 169 | }); -------------------------------------------------------------------------------- /__tests__/client/redux/eventReducers.test.js: -------------------------------------------------------------------------------- 1 | import eventSubject from "../../../src/client/reducers/eventsReducer"; 2 | 3 | describe("events reducer", () => { 4 | let state; 5 | 6 | beforeEach(() => { 7 | state = { 8 | currInstance: 1, 9 | currDatabase: 0, 10 | events: [ 11 | { 12 | instanceId: 1, 13 | keyspaces: [ 14 | { 15 | eventTotal: 0, 16 | pageSize: 50, 17 | pageNum: 4, 18 | data: [ 19 | { 20 | key: "loading", 21 | event: "loading", 22 | timestamp: "loading", 23 | }, 24 | ], 25 | }, 26 | ], 27 | }, 28 | ], 29 | }; 30 | }); 31 | describe("default state", () => { 32 | it("should return a default state when given an undefined input", () => { 33 | expect(eventSubject(undefined, { type: undefined })).toEqual(state); 34 | }); 35 | }); 36 | 37 | describe("unrecognized action types", () => { 38 | it("should return the original value without any duplication", () => { 39 | const action = { type: "wannabemyfriend?" }; 40 | expect(eventSubject(state, action)).toBe(state); 41 | }); 42 | }); 43 | 44 | describe("LOAD_ALL_EVENTS", () => { 45 | const action = { 46 | type: "LOAD_ALL_EVENTS", 47 | payload: { 48 | events: [ 49 | { 50 | instanceId: 1, 51 | keyspaces: [ 52 | { 53 | eventTotal: 0, 54 | pageSize: 1, 55 | pageNum: 1, 56 | data: [ 57 | { 58 | key: "Arthur", 59 | event: "Set", 60 | timestamp: "07:00", 61 | }, 62 | ], 63 | }, 64 | ], 65 | }, 66 | ], 67 | currDatabase: 0, 68 | }, 69 | }; 70 | it("loads all events from server", () => { 71 | const { events } = eventSubject(state, action); 72 | expect( 73 | events[state.currInstance - 1].keyspaces[state.currDatabase] 74 | ).toEqual({ 75 | key: "Arthur", 76 | event: "Set", 77 | timestamp: "07:00", 78 | }); 79 | }); 80 | it("returns a state object not strictly equal to the original", () => { 81 | const eventState = eventSubject(state, action); 82 | // expect(eventState).toEqual(state) 83 | expect(eventState).not.toBe(state); 84 | }); 85 | it("returns an events value not strictly equal to the original", () => { 86 | const { events } = eventSubject(state, action); 87 | expect(events).not.toBe(state.events); 88 | }); 89 | }); 90 | describe("REFRESH_EVENTS", () => { 91 | const action = { 92 | type: "REFRESH_EVENTS", 93 | payload: { 94 | events: [ 95 | { 96 | instanceId: 1, 97 | keyspaces: [ 98 | { 99 | eventTotal: 2, 100 | pageSize: 1, 101 | pageNum: 2, 102 | data: [ 103 | { 104 | key: "Arthur", 105 | event: "Set", 106 | timestamp: "07:00", 107 | }, 108 | { 109 | key: "Abby", 110 | event: "Set", 111 | timestamp: "07:10", 112 | }, 113 | ], 114 | }, 115 | ], 116 | }, 117 | ], 118 | currDatabase: 0, 119 | }, 120 | }; 121 | it("returns specific page of events", () => { 122 | const { events } = eventSubject(state, action); 123 | expect( 124 | events[state.currInstance - 1].keyspaces[state.currDatabase].data 125 | ).toEqual([ 126 | { 127 | key: "Arthur", 128 | event: "Set", 129 | timestamp: "07:00", 130 | }, 131 | { 132 | key: "Abby", 133 | event: "Set", 134 | timestamp: "07:10", 135 | }, 136 | ]); 137 | }); 138 | it("returns a state object not strictly equal to the original", () => { 139 | const eventState = eventSubject(state, action); 140 | // expect(eventState).toEqual(state) 141 | expect(eventState).not.toBe(state); 142 | }); 143 | it("returns an events value not strictly equal to the original", () => { 144 | const { events } = eventSubject(state, action); 145 | expect(events).not.toBe(state.events); 146 | }); 147 | }); 148 | 149 | describe("CHANGE_EVENTS_PAGE", () => { 150 | const action = { 151 | type: "CHANGE_EVENTS_PAGE", 152 | payload: { 153 | events: [ 154 | { 155 | instanceId: 1, 156 | keyspaces: [ 157 | { 158 | eventTotal: 2, 159 | pageSize: 1, 160 | pageNum: 2, 161 | data: [ 162 | { 163 | key: "Arthur", 164 | event: "Set", 165 | timestamp: "07:00", 166 | }, 167 | { 168 | key: "Abby", 169 | event: "Set", 170 | timestamp: "07:10", 171 | }, 172 | ], 173 | }, 174 | ], 175 | }, 176 | ], 177 | currDatabase: 0, 178 | }, 179 | }; 180 | it("changes the page of events", () => { 181 | const { events } = eventSubject(state, action); 182 | expect( 183 | events[state.currInstance - 1].keyspaces[state.currDatabase].data 184 | ).toEqual([ 185 | { 186 | key: "Arthur", 187 | event: "Set", 188 | timestamp: "07:00", 189 | }, 190 | { 191 | key: "Abby", 192 | event: "Set", 193 | timestamp: "07:10", 194 | }, 195 | ]); 196 | }); 197 | it("returns a state object not strictly equal to the original", () => { 198 | const eventState = eventSubject(state, action); 199 | // expect(eventState).toEqual(state) 200 | expect(eventState).not.toBe(state); 201 | }); 202 | it("returns an events value not strictly equal to the original", () => { 203 | const { events } = eventSubject(state, action); 204 | expect(events).not.toBe(state.events); 205 | }); 206 | }); 207 | }); 208 | -------------------------------------------------------------------------------- /src/client/components/navbars/FilterNav.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { connect } from 'react-redux'; 3 | import SearchFilter from './SearchFilter.jsx'; 4 | import * as actions from '../../action-creators/connections'; 5 | import * as keyspaceActions from '../../action-creators/keyspaceConnections'; 6 | import * as eventActions from '../../action-creators/eventsConnections'; 7 | 8 | import '../styles/filternav.scss'; 9 | 10 | const mapStateToProps = (store) => { 11 | return { 12 | keyspace: store.keyspaceStore.keyspace, 13 | events: store.eventsStore.events, 14 | keyGraph: store.keyGraphStore.keyGraph, 15 | currDatabase: store.currDatabaseStore.currDatabase, 16 | currPage: store.currPageStore.currPage, 17 | currDisplay: store.currDisplayStore.currDisplay, 18 | currInstance: store.currInstanceStore.currInstance, 19 | pageSize: store.dataPageStore.pageSize, 20 | pageNum: store.dataPageStore.pageNum, 21 | }; 22 | }; 23 | const mapDispatchToProps = (dispatch) => ({ 24 | refreshEvents: (currInstance, currDatabase, pageSize, pageNum, refreshData) => 25 | dispatch( 26 | eventActions.refreshEventsActionCreator( 27 | currInstance, 28 | currDatabase, 29 | pageSize, 30 | pageNum, 31 | refreshData 32 | ) 33 | ), 34 | changeEventsPage: (instanceId, dbIndex, queryOptions) => 35 | dispatch( 36 | eventActions.changeEventsPageActionCreator( 37 | instanceId, 38 | dbIndex, 39 | queryOptions 40 | ) 41 | ), 42 | changeKeyspacePage: (instanceId, dbIndex, queryOptions) => 43 | dispatch( 44 | keyspaceActions.changeKeyspacePageActionCreator( 45 | instanceId, 46 | dbIndex, 47 | queryOptions 48 | ) 49 | ), 50 | refreshKeyspace: (instanceId, dbIndex, pageSize, pageNum, refreshScan) => 51 | dispatch( 52 | keyspaceActions.refreshKeyspaceActionCreator( 53 | instanceId, 54 | dbIndex, 55 | pageSize, 56 | pageNum, 57 | refreshScan 58 | ) 59 | ), 60 | updateKeyGraph: (keyGraph) => 61 | dispatch(actions.updateKeyGraphActionCreator(keyGraph)), 62 | updateCurrDisplay: (object) => 63 | dispatch(actions.updateCurrDisplayActionCreator(object)), 64 | updatePageNum: (pageNum) => { 65 | actions.updatePageActionCreator(pageNum); 66 | }, 67 | }); 68 | 69 | class FilterNav extends Component { 70 | constructor(props) { 71 | super(props); 72 | } 73 | 74 | render() { 75 | if (this.props.currPage === 'graphs') { 76 | return ; 77 | } else if (this.props.currPage === 'events') { 78 | return ( 79 |
80 |
123 | );
124 |
125 | //KEYSPACE PAGE : COMPLETED
126 | } else {
127 | return (
128 |
129 |
171 | );
172 | }
173 | }
174 | }
175 |
176 | export default connect(mapStateToProps, mapDispatchToProps)(FilterNav);
177 |
--------------------------------------------------------------------------------
/src/client/components/navbars/SearchFilter.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { makeStyles } from '@material-ui/core/styles';
3 | import InputLabel from '@material-ui/core/InputLabel';
4 | import MenuItem from '@material-ui/core/MenuItem';
5 |
6 | import FormControl from '@material-ui/core/FormControl';
7 | import Select from '@material-ui/core/Select';
8 | import Button from '@material-ui/core/Button';
9 | import TextField from '@material-ui/core/TextField';
10 |
11 | const useStyles = makeStyles((theme) => ({
12 | formControl: {
13 | margin: theme.spacing(1),
14 | minWidth: 120,
15 | },
16 | }));
17 |
18 | export default function SearchFilter(props) {
19 | const classes = useStyles();
20 | const [value, setValue] = React.useState('');
21 | const [category, setCategory] = React.useState('');
22 |
23 | const handleChange = (event) => {
24 | setValue(event.target.value);
25 | console.log('handlechange', event.target.value);
26 | };
27 | function selectChange(event) {
28 | setCategory(event.target.value);
29 | console.log('selectchange', event.target.value);
30 | }
31 |
32 | //submitting the filter
33 | function handleSubmit() {
34 | //change the state of currDisplay
35 | props.updateCurrDisplay({
36 | filterType: 'keyType',
37 | filterValue: category,
38 | });
39 | props.updateCurrDisplay({ filterType: 'keyName', filterValue: value });
40 |
41 | const queryOptions = {
42 | pageSize: props.pageSize,
43 | pageNum: props.pageNum,
44 | keyNameFilter: props.currDisplay.keyNameFilter,
45 | keyTypeFilter: props.currDisplay.keyTypeFilter,
46 | refreshScan: 0,
47 | };
48 | props.changeKeyspacePage(
49 | props.currInstance,
50 | props.currDatabase,
51 | queryOptions
52 | );
53 | }
54 |
55 | function handleEventSubmit() {
56 | props.updateCurrDisplay({
57 | filterType: 'keyEvent',
58 | filterValue: category,
59 | });
60 | props.updateCurrDisplay({ filterType: 'keyName', filterValue: value });
61 | const queryOptions = {
62 | pageSize: props.pageSize,
63 | pageNum: props.pageNum,
64 | keyNameFilter: props.currDisplay.keyNameFilter,
65 | keyEventFilter: props.currDisplay.keyEventFilter,
66 | refreshScan: 0,
67 | };
68 | console.log('myquery options in handle event submit', queryOptions);
69 | props.changeEventsPage(
70 | props.currInstance,
71 | props.currDatabase,
72 | queryOptions
73 | );
74 | }
75 |
76 | function clearFilter() {
77 | setValue('');
78 | setCategory('');
79 | document.getElementById('standard-secondary').value = '';
80 |
81 | props.updateCurrDisplay({ filterType: 'keyName', filterValue: '' });
82 | props.updateCurrDisplay({ filterType: 'keyType', filterValue: '' });
83 | console.log('value', value);
84 | console.log('category', category);
85 | const queryOptions = {
86 | pageSize: props.pageSize,
87 | pageNum: props.pageNum,
88 | refreshScan: 0,
89 | keyNameFilter: props.currDisplay.keyNameFilter,
90 | keyTypeFilter: props.currDisplay.keyTypeFilter,
91 | };
92 | props.changeKeyspacePage(
93 | props.currInstance,
94 | props.currDatabase,
95 | queryOptions
96 | );
97 | }
98 |
99 | function clearEventFilter() {
100 | setValue('');
101 | setCategory('');
102 | document.getElementById('standard-secondary').value = '';
103 | document.getElementById('secondary-secondary').value = '';
104 |
105 | props.updateCurrDisplay({ filterType: 'keyName', filterValue: '' });
106 | props.updateCurrDisplay({ filterType: 'keyEvent', filterValue: '' });
107 | const queryOptions = {
108 | pageSize: props.pageSize,
109 | pageNum: props.pageNum,
110 | refreshScan: 0,
111 | keyNameFilter: props.currDisplay.keyNameFilter,
112 | keyEventFilter: props.currDisplay.keyEventFilter,
113 | };
114 | props.changeEventsPage(
115 | props.currInstance,
116 | props.currDatabase,
117 | queryOptions
118 | );
119 | }
120 |
121 | const newArea = [];
122 |
123 | if (props.currPage === 'keyspace') {
124 | return (
125 |
126 |
127 |
134 |
135 | key type filter
136 |
146 |
147 |
161 | );
162 |
163 | ////////////////////////
164 | } else if (props.currPage === 'events') {
165 | return (
166 |
150 |
153 |
154 |
157 | {/* */}
158 |
159 | {newArea}
160 |
167 |
168 |
175 |
176 |
183 |
196 | );
197 | }
198 | }
199 |
--------------------------------------------------------------------------------
186 |
189 |
192 | {/* */}
193 |
194 | {newArea}
195 |