Change response shape from redis_info endpoint

ui/src/actions/redisInfoActions.ts

@@ -1,5 +1,5 @@
 import { Dispatch } from "redux";
-import { getRedisInfo, RedisInfo } from "../api";
+import { getRedisInfo, RedisInfoResponse } from "../api";
 
 // List of redis-info related action types.
 export const GET_REDIS_INFO_BEGIN = "GET_REDIS_INFO_BEGIN";
@@ -12,7 +12,7 @@ interface GetRedisInfoBeginAction {
 
 interface GetRedisInfoSuccessAction {
   type: typeof GET_REDIS_INFO_SUCCESS;
-  payload: RedisInfo;
+  payload: RedisInfoResponse;
 }
 
 interface GetRedisInfoErrorAction {

ui/src/api.ts

@@ -68,6 +68,11 @@ export interface ListQueueStatsResponse {
   stats: { [qname: string]: DailyStat[] };
 }
 
+export interface RedisInfoResponse {
+  address: string;
+  info: RedisInfo;
+}
+
 // Return value from redis INFO command.
 // See https://redis.io/commands/info#return-value.
 export interface RedisInfo {
@@ -723,7 +728,7 @@ export async function listSchedulerEnqueueEvents(
   return resp.data;
 }
 
-export async function getRedisInfo(): Promise<RedisInfo> {
+export async function getRedisInfo(): Promise<RedisInfoResponse> {
   const resp = await axios({
     method: "get",
     url: `${BASE_URL}/redis_info`,

ui/src/reducers/redisInfoReducer.ts

@@ -8,11 +8,13 @@ import { RedisInfo } from "../api";
 
 interface RedisInfoState {
   loading: boolean;
+  address: string;
   data: RedisInfo | null;
 }
 
 const initialState: RedisInfoState = {
   loading: false,
+  address: "",
   data: null,
 };
 
@@ -36,7 +38,8 @@ export default function redisInfoReducer(
     case GET_REDIS_INFO_SUCCESS:
       return {
         loading: false,
-        data: action.payload,
+        address: action.payload.address,
+        data: action.payload.info,
       };
 
     default:

ui/src/views/RedisInfoView.tsx

@@ -25,6 +25,7 @@ function mapStateToProps(state: AppState) {
   return {
     loading: state.redis.loading,
     redisInfo: state.redis.data,
+    redisAddress: state.redis.address,
     pollInterval: state.settings.pollInterval,
   };
 }
@@ -38,11 +39,24 @@ function RedisInfoView(props: Props) {
 
   usePolling(getRedisInfoAsync, pollInterval);
 
+  console.log("DEBUG: redisInfo", props.redisInfo);
+
+  // Metrics to show
+  // - Used Memory
+  // - Memory Fragmentation Ratio
+  // - Connected Clients
+  // - Connected Replicas (slaves)
+  // - Persistence (rdb_last_save_time, rdb_changes_since_last_save)
+  // - Errors (rejected_connections)
+
   return (
     <Container maxWidth="lg" className={classes.container}>
       <Grid container spacing={3}>
         <Grid item xs={12}>
           <Typography variant="h5">Redis Info</Typography>
+          <Typography variant="subtitle1" color="textSecondary">
+            Connected to: {props.redisAddress}
+          </Typography>
         </Grid>
       </Grid>
     </Container>