How to use the ko/components/componentUtils.registerComponent function in ko

});
  }
}

// Ace requires that the child to clone is first child, so we need separate components for single line & multi line
componentUtils.registerComponent(
  'hue-simple-ace-editor',
  {
    createViewModel: function(params, componentInfo) {
      return new SimpleAceEditor(params, componentInfo.element);
    }
  },
  SIMPLE_ACE_TEMPLATE
);

componentUtils.registerComponent(
  'hue-simple-ace-editor-multi',
  {
    createViewModel: function(params, componentInfo) {
      return new SimpleAceEditor(params, componentInfo.element);
    }
  },
  SIMPLE_ACE_MULTI_TEMPLATE
);

exportToFile() {
    // savePath('');
    // $('#saveResultsModal' + snippet.id()).modal('show');
  }

  exportToReport() {
    // saveTarget('dashboard');
    // if (notebook.canSave()) {
    //   notebook.save()
    // } else {
    //   $('#saveAsModaleditor').modal('show');
    // }
  }
}

componentUtils.registerComponent(NAME, ResultDownloadActions, TEMPLATE);

/**
   *
   * @param {EditableSession} editableSession
   * @return {Promise}
   */
  async closeSession(editableSession) {
    editableSession.loading(true);
    const session = editableSession.session;
    await sessionManager.closeSession(session);
    await this.showSessions(this.activeTypeFilter);
  }

  saveDefaultUserProperties(session) {}
}

componentUtils.registerComponent(NAME, SessionPanel, TEMPLATE);

}

  toggleAllResultColumns(linkElement) {
    this.hueDatatable.fnToggleAllCols(linkElement.checked);
    this.hueDatatable.fnDraw();
    this.filteredMeta().forEach(item => {
      item.checked(linkElement.checked);
    });
  }

  toggleResultColumn(linkElement, index) {
    this.hueDatatable.fnSetColumnVis(index, linkElement.checked);
  }
}

componentUtils.registerComponent(
  NAME,
  {
    createViewModel: (params, componentInfo) => new ResultGrid(params, componentInfo.element)
  },
  TEMPLATE
);

this.cleanedNumericMeta()[Math.min(this.cleanedNumericMeta().length - 1, 1)].name
          );
        } else {
          this.chartYSingle(this.chartYMulti()[0]);
        }
      }
    }
  }

  redrawChart() {
    this.chartX.notifySubscribers();
    this.chartX.valueHasMutated();
  }
}

componentUtils.registerComponent(NAME, ResultChart, TEMPLATE);

this.open(false);
    }
  };

  this.open.subscribe(newVal => {
    if (newVal) {
      window.setTimeout(() => {
        $(document).on('click', closeOnClickOutside);
      }, 0);
    } else {
      $(document).off('click', closeOnClickOutside);
    }
  });
};

componentUtils.registerComponent('hue-app-switcher', AppSwitcher, TEMPLATE);

this.updateFromLogs(executable.logs);
  }

  updateFromLogs(executionLogs) {
    this.logs(executionLogs.fullLog);
    this.jobs(executionLogs.jobs);
    this.errors(executionLogs.errors);
  }

  updateFromResult(executionResult) {
    this.fetchedOnce(executionResult.fetchedOnce);
    this.hasEmptyResult(executionResult.rows.length === 0);
  }
}

componentUtils.registerComponent(NAME, ExecutableLogs, TEMPLATE);

}
}

const instances = {};

const viewModelFactory = {
  createViewModel: params => {
    const name = params.isStreams ? 'streams' : params.isSolr ? 'solr' : 'sql';
    if (!instances[name]) {
      instances[name] = new AssistDbPanel(params);
    }
    return instances[name];
  }
};

componentUtils.registerComponent('hue-assist-db-panel', viewModelFactory, TEMPLATE);

export default ASSIST_TABLE_TEMPLATES;

cancelDownload() {
    window.clearInterval(this.checkDownloadInterval);
    this.$downloadProgressModal.hide();
  }
}

const cleanAndRemoveKoElement = selector => {
  const $element = $(selector);
  if ($element.length) {
    ko.cleanNode($element[0]);
    $element.remove();
  }
};

componentUtils.registerComponent(NAME, undefined, TEMPLATE).then(() => {
  huePubSub.subscribe(SHOW_DOWNLOAD_RESULT_MODAL_EVENT, params => {
    cleanAndRemoveKoElement('#downloadProgressModal');
    const $downloadProgressModal = $(
      '<div tabindex="-1" class="modal hide fade downloadProgressModal" data-keyboard="true" data-bind="component: { name: \'' +
        NAME +
        '\', params: $data }" id="downloadProgressModal">'
    );
    $('body').append($downloadProgressModal);

    const model = new DownloadResultModal(params, $downloadProgressModal);
    ko.applyBindings(model, $downloadProgressModal[0]);
  });
});
</div>

data.formatted_statements
              );
          } else {
            this.snippet.statement_raw(data.formatted_statements);
            this.snippet.ace().setValue(this.snippet.statement_raw(), 1);
          }
        } else {
          this.snippet.handleAjaxError(data);
        }
      });
  }

  dispose() {}
}

componentUtils.registerComponent('snippet-editor-actions', SnippetEditorActions, TEMPLATE);