fix issue of no fields to customize when switching to table graph type

ui/src/dashboards/components/TableOptions.tsx

@@ -62,10 +62,14 @@ export class TableOptions extends PureComponent<Props, {}> {
   get computedFieldNames() {
     const {dataLabels} = this.props
 
-    return dataLabels.map(label => {
-      const existing = this.fieldNames.find(f => f.internalName === label)
-      return existing || {internalName: label, displayName: '', visible: true}
-    })
+    return dataLabels.length
+      ? dataLabels.map(label => {
+          const existing = this.fieldNames.find(f => f.internalName === label)
+          return (
+            existing || {internalName: label, displayName: '', visible: true}
+          )
+        })
+      : [this.timeColumn]
   }
 
   public handleChooseSortBy = (option: Option) => {
@@ -96,9 +100,13 @@ export class TableOptions extends PureComponent<Props, {}> {
   }
 
   public handleFieldUpdate = field => {
-    const {handleUpdateTableOptions, tableOptions} = this.props
-    const {fieldNames, sortBy} = tableOptions
-    const updatedFields = fieldNames.map(
+    const {handleUpdateTableOptions, tableOptions, dataLabels} = this.props
+    const {sortBy, fieldNames} = tableOptions
+    const fields =
+      fieldNames.length >= dataLabels.length
+        ? fieldNames
+        : this.computedFieldNames
+    const updatedFields = fields.map(
       f => (f.internalName === field.internalName ? field : f)
     )
     const updatedSortBy =
@@ -146,6 +154,8 @@ export class TableOptions extends PureComponent<Props, {}> {
       text: field.displayName || field.internalName,
     }))
 
+    const fields = fieldNames.length > 1 ? fieldNames : this.computedFieldNames
+
     return (
       <FancyScrollbar
         className="display-options--cell y-axis-controls"
@@ -173,7 +183,7 @@ export class TableOptions extends PureComponent<Props, {}> {
             />
           </div>
           <GraphOptionsCustomizeFields
-            fields={fieldNames}
+            fields={fields}
             onFieldUpdate={this.handleFieldUpdate}
           />
           <ThresholdsList showListHeading={true} onResetFocus={onResetFocus} />