From 0c3cd80728a638ac52c82bd4f5b843762847f19a Mon Sep 17 00:00:00 2001
From: Ken Hibino <ken.hibino7@gmail.com>
Date: Mon, 4 Jan 2021 09:31:10 -0800
Subject: [PATCH] Change response shape from redis_info endpoint

---
 main.go                             |  9 ++++++---
 redis_info_handlers.go              | 11 ++++++++++-
 ui/src/actions/redisInfoActions.ts  |  4 ++--
 ui/src/api.ts                       |  7 ++++++-
 ui/src/reducers/redisInfoReducer.ts |  5 ++++-
 ui/src/views/RedisInfoView.tsx      | 14 ++++++++++++++
 6 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/main.go b/main.go
index 10fb204..f29ec97 100644
--- a/main.go
+++ b/main.go
@@ -57,16 +57,19 @@ func (srv *staticFileServer) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 	http.FileServer(http.Dir(srv.staticPath)).ServeHTTP(w, r)
 }
 
-const addr = "127.0.0.1:8080"
+const (
+	addr      = "127.0.0.1:8080"
+	redisAddr = "localhost:6379" // TODO: make this configurable
+)
 
 func main() {
 	inspector := asynq.NewInspector(asynq.RedisClientOpt{
-		Addr: "localhost:6379",
+		Addr: redisAddr,
 	})
 	defer inspector.Close()
 
 	rdb := redis.NewClient(&redis.Options{
-		Addr: "localhost:6379",
+		Addr: redisAddr,
 	})
 	defer rdb.Close()
 
diff --git a/redis_info_handlers.go b/redis_info_handlers.go
index c32138a..8d5dd6a 100644
--- a/redis_info_handlers.go
+++ b/redis_info_handlers.go
@@ -14,6 +14,11 @@ import (
 //   - http.Handler(s) for redis info related endpoints
 // ****************************************************************************
 
+type RedisInfoResponse struct {
+	Addr string            `json:"address"`
+	Info map[string]string `json:"info"`
+}
+
 func newRedisInfoHandlerFunc(rdb *redis.Client) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		ctx := context.Background()
@@ -23,7 +28,11 @@ func newRedisInfoHandlerFunc(rdb *redis.Client) http.HandlerFunc {
 			return
 		}
 		info := parseRedisInfo(res)
-		if err := json.NewEncoder(w).Encode(info); err != nil {
+		resp := RedisInfoResponse{
+			Addr: redisAddr,
+			Info: info,
+		}
+		if err := json.NewEncoder(w).Encode(resp); err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
diff --git a/ui/src/actions/redisInfoActions.ts b/ui/src/actions/redisInfoActions.ts
index d05b7fc..09215d3 100644
--- a/ui/src/actions/redisInfoActions.ts
+++ b/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 {
diff --git a/ui/src/api.ts b/ui/src/api.ts
index cfc7d29..9e24fcc 100644
--- a/ui/src/api.ts
+++ b/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`,
diff --git a/ui/src/reducers/redisInfoReducer.ts b/ui/src/reducers/redisInfoReducer.ts
index 3129e58..35504f1 100644
--- a/ui/src/reducers/redisInfoReducer.ts
+++ b/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:
diff --git a/ui/src/views/RedisInfoView.tsx b/ui/src/views/RedisInfoView.tsx
index b8bb1ae..690c154 100644
--- a/ui/src/views/RedisInfoView.tsx
+++ b/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>