Put all local storage keys and functions into one file in util (#7314)

* Add all local storage keys and functions into one file in util

* Use LocalStorageKey type instead of string

* Remove druid author key

web-console/src/utils/general.tsx

@@ -128,18 +128,6 @@ export function getHeadProp(results: Record<string, any>[], prop: string): any {
 
 // ----------------------------
 
-export function localStorageSet(key: string, value: string): void {
-  if (typeof localStorage === 'undefined') return;
-  localStorage.setItem(key, value);
-}
-
-export function localStorageGet(key: string): string | null {
-  if (typeof localStorage === 'undefined') return null;
-  return localStorage.getItem(key);
-}
-
-// ----------------------------
-
 export function validJson(json: string): boolean {
   try {
     JSON.parse(json);

web-console/src/utils/index.tsx

@@ -21,3 +21,4 @@ export * from './druid-query';
 export * from './query-manager';
 export * from './rune-decoder';
 export * from './table-column-selection-handler';
+export * from './local-storage-keys';

web-console/src/utils/local-storage-keys.tsx

@@ -0,0 +1,42 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const LocalStorageKeys = {
+  DATASOURCE_TABLE_COLUMN_SELECTION: "datasource-table-column-selection" as "datasource-table-column-selection",
+  SEGMENT_TABLE_COLUMN_SELECTION: "segment-table-column-selection" as "segment-table-column-selection",
+  SUPERVISOR_TABLE_COLUMN_SELECTION: "supervisor-table-column-selection" as "supervisor-table-column-selection",
+  TASK_TABLE_COLUMN_SELECTION: "task-table-column-selection" as "task-table-column-selection",
+  SERVER_TABLE_COLUMN_SELECTION: "historical-table-column-selection" as "historical-table-column-selection",
+  MIDDLEMANAGER_TABLE_COLUMN_SELECTION: "middleManager-table-column-selection" as "middleManager-table-column-selection",
+  LOOKUP_TABLE_COLUMN_SELECTION: "lookup-table-column-selection" as "lookup-table-column-selection",
+  QUERY_KEY: 'druid-console-query' as 'druid-console-query'
+
+};
+export type LocalStorageKeys = typeof LocalStorageKeys[keyof typeof LocalStorageKeys];
+
+// ----------------------------
+
+export function localStorageSet(key: LocalStorageKeys, value: string): void {
+  if (typeof localStorage === 'undefined') return;
+  localStorage.setItem(key, value);
+}
+
+export function localStorageGet(key: LocalStorageKeys): string | null {
+  if (typeof localStorage === 'undefined') return null;
+  return localStorage.getItem(key);
+}

web-console/src/utils/table-column-selection-handler.tsx

@@ -16,14 +16,14 @@
  * limitations under the License.
  */
 
-import { localStorageGet, localStorageSet } from "./general";
+import { localStorageGet, LocalStorageKeys, localStorageSet } from "../utils";
 
 export class TableColumnSelectionHandler {
-  tableName: string;
+  tableName: LocalStorageKeys;
   hiddenColumns: string[];
   updateComponent: () => void;
 
-  constructor(tableName: string, updateComponent: () => void) {
+  constructor(tableName: LocalStorageKeys, updateComponent: () => void) {
     this.tableName = tableName;
     this.updateComponent = updateComponent;
     this.getHiddenTableColumns();

web-console/src/views/datasource-view.tsx

@@ -33,7 +33,7 @@ import {
   countBy,
   formatBytes,
   formatNumber,
-  getDruidErrorMessage,
+  getDruidErrorMessage, LocalStorageKeys,
   lookupBy,
   pluralIfNeeded,
   queryDruidSql,
@@ -42,7 +42,6 @@ import {
 
 import "./datasource-view.scss";
 
-const datasourceTableColumnSelection = "datasource-table-column-selection";
 const tableColumns: string[] = ["Datasource", "Availability", "Retention", "Compaction", "Size", "Num rows", "Actions"];
 
 export interface DatasourcesViewProps extends React.Props<any> {
@@ -111,7 +110,7 @@ export class DatasourcesView extends React.Component<DatasourcesViewProps, Datas
     };
 
     this.tableColumnSelectionHandler = new TableColumnSelectionHandler(
-      datasourceTableColumnSelection, () => this.setState({})
+      LocalStorageKeys.DATASOURCE_TABLE_COLUMN_SELECTION, () => this.setState({})
     );
   }
 

web-console/src/views/lookups-view.tsx

@@ -27,14 +27,13 @@ import { TableColumnSelection } from "../components/table-column-selection";
 import { LookupEditDialog } from "../dialogs/lookup-edit-dialog";
 import { AppToaster } from "../singletons/toaster";
 import {
-  getDruidErrorMessage,
+  getDruidErrorMessage, LocalStorageKeys,
   QueryManager,
   TableColumnSelectionHandler
 } from "../utils";
 
 import "./lookups-view.scss";
 
-const lookupTableColumnSelection = "lookup-table-column-selection";
 const tableColumns: string[] = ["Lookup Name", "Tier", "Type", "Version", "Config"];
 
 export interface LookupsViewProps extends React.Props<any> {
@@ -74,7 +73,7 @@ export class LookupsView extends React.Component<LookupsViewProps, LookupsViewSt
       allLookupTiers: []
     };
     this.tableColumnSelectionHandler = new TableColumnSelectionHandler(
-      lookupTableColumnSelection, () => this.setState({})
+      LocalStorageKeys.LOOKUP_TABLE_COLUMN_SELECTION, () => this.setState({})
     );
   }
 

web-console/src/views/segments-view.tsx

@@ -29,7 +29,7 @@ import { AppToaster } from "../singletons/toaster";
 import {
   addFilter,
   formatBytes,
-  formatNumber,
+  formatNumber, LocalStorageKeys,
   makeBooleanFilter,
   parseList,
   queryDruidSql,
@@ -38,7 +38,6 @@ import {
 
 import "./segments-view.scss";
 
-const segmentTableColumnSelection = "segment-table-column-selection";
 const tableColumns: string[] = ["Segment ID", "Datasource", "Start", "End", "Version", "Partition",
   "Size", "Num rows", "Replicas", "Is published", "Is realtime", "Is available"];
 
@@ -100,7 +99,7 @@ export class SegmentsView extends React.Component<SegmentsViewProps, SegmentsVie
     });
 
     this.tableColumnSelectionHandler = new TableColumnSelectionHandler(
-      segmentTableColumnSelection, () => this.setState({})
+      LocalStorageKeys.SEGMENT_TABLE_COLUMN_SELECTION, () => this.setState({})
     );
   }
 

web-console/src/views/servers-view.tsx

@@ -29,15 +29,13 @@ import { TableColumnSelection } from "../components/table-column-selection";
 import {
   addFilter,
   formatBytes,
-  formatBytesCompact,
+  formatBytesCompact, LocalStorageKeys,
   queryDruidSql,
   QueryManager, TableColumnSelectionHandler
 } from "../utils";
 
 import "./servers-view.scss";
 
-const serverTableColumnSelection = "historical-table-column-selection";
-const middleManagerTableColumnSelection = "middleManager-table-column-selection";
 const serverTableColumns: string[] = ["Server", "Tier", "Curr size", "Max size", "Usage", "Load/drop queues", "Host", "Port"];
 const middleManagerTableColumns: string[] = ["Host", "Usage", "Availability groups", "Last completed task time", "Blacklisted until"];
 
@@ -93,11 +91,11 @@ export class ServersView extends React.Component<ServersViewProps, ServersViewSt
     };
 
     this.serverTableColumnSelectionHandler = new TableColumnSelectionHandler(
-      serverTableColumnSelection, () => this.setState({})
+      LocalStorageKeys.SERVER_TABLE_COLUMN_SELECTION, () => this.setState({})
     );
 
     this.middleManagerTableColumnSelectionHandler = new TableColumnSelectionHandler(
-      middleManagerTableColumnSelection, () => this.setState({})
+      LocalStorageKeys.MIDDLEMANAGER_TABLE_COLUMN_SELECTION, () => this.setState({})
     );
   }
 

web-console/src/views/sql-view.tsx

@@ -26,7 +26,7 @@ import { SqlControl } from '../components/sql-control';
 import {
   decodeRune,
   HeaderRows,
-  localStorageGet,
+  localStorageGet, LocalStorageKeys,
   localStorageSet,
   queryDruidRune,
   queryDruidSql, QueryManager
@@ -45,7 +45,6 @@ export interface SqlViewState {
 }
 
 export class SqlView extends React.Component<SqlViewProps, SqlViewState> {
-  static QUERY_KEY = 'druid-console-query';
 
   private sqlQueryManager: QueryManager<string, HeaderRows>;
 
@@ -112,9 +111,9 @@ export class SqlView extends React.Component<SqlViewProps, SqlViewState> {
 
     return <div className="sql-view app-view">
       <SqlControl
-        initSql={initSql || localStorageGet(SqlView.QUERY_KEY)}
+        initSql={initSql || localStorageGet(LocalStorageKeys.QUERY_KEY)}
         onRun={q => {
-          localStorageSet(SqlView.QUERY_KEY, q);
+          localStorageSet(LocalStorageKeys.QUERY_KEY, q);
           this.sqlQueryManager.runQuery(q);
         }}
       />

web-console/src/views/tasks-view.tsx

@@ -32,15 +32,13 @@ import {
   addFilter,
   countBy,
   formatDuration,
-  getDruidErrorMessage,
+  getDruidErrorMessage, LocalStorageKeys,
   queryDruidSql,
   QueryManager, TableColumnSelectionHandler
 } from "../utils";
 
 import "./tasks-view.scss";
 
-const supervisorTableColumnSelection = "supervisor-table-column-selection";
-const taskTableColumnSelection = "task-table-column-selection";
 const supervisorTableColumns: string[] = ["Datasource", "Type", "Topic/Stream", "Status", "Actions"];
 const taskTableColumns: string[] = ["Task ID", "Type", "Datasource", "Created time", "Status", "Duration", "Actions"];
 
@@ -117,11 +115,11 @@ export class TasksView extends React.Component<TasksViewProps, TasksViewState> {
     };
 
     this.supervisorTableColumnSelectionHandler = new TableColumnSelectionHandler(
-      supervisorTableColumnSelection, () => this.setState({})
+      LocalStorageKeys.SUPERVISOR_TABLE_COLUMN_SELECTION, () => this.setState({})
     );
 
     this.taskTableColumnSelectionHandler = new TableColumnSelectionHandler(
-      taskTableColumnSelection, () => this.setState({})
+      LocalStorageKeys.TASK_TABLE_COLUMN_SELECTION, () => this.setState({})
     );
   }