Fixed bugs in retention cell and retention dialog (#7276)

* Fixed a bug when there are so many retention rules that it becomes unclickable; fixed a bug when retention dialog is at bottom and becomes unreachable

* Using class for CSS instead of inline style

web-console/src/dialogs/retention-dialog.scss

@@ -18,12 +18,16 @@
 
 .retention-dialog {
   width: 750px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) !important;
 
   .dialog-body {
     overflow: scroll;
     max-height: 70vh;
 
-    .bp3-form-group {
+    .form-group {
       margin: 0 0 5px;
     }
 

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

@@ -20,6 +20,10 @@
   height: 100%;
   width: 100%;
 
+  .clickable-cell {
+    cursor: pointer;
+  }
+
   .ReactTable {
     position: absolute;
     top: 50px;

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

@@ -362,9 +362,12 @@ GROUP BY 1`);
                 text = DatasourcesView.formatRules(rules);
               }
 
-              return <span>
+              return <span
+                onClick={() => this.setState({retentionDialogOpenOn: { datasource: row.original.datasource, rules: row.original.rules }})}
+                className={"clickable-cell"}
+              >
                 {text}&nbsp;
-                <a onClick={() => this.setState({retentionDialogOpenOn: { datasource: row.original.datasource, rules: row.original.rules }})}>&#x270E;</a>
+                <a>&#x270E;</a>
               </span>;
             }
           },