quasar rewrite: add typescript and rewrite some helpers to ts

.eslintrc.js

@@ -1,6 +1,7 @@
 module.exports = {
   extends: [
     'plugin:vue/vue3-recommended',
+    '@vue/eslint-config-typescript',
   ],
   rules: {
     'vue/max-attributes-per-line': 'off',

package.json

@@ -6,7 +6,8 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "lint": "eslint --ext .js,.vue src"
+    "tsc": "tsc --noEmit",
+    "lint": "eslint --ext .js,.vue,.ts src"
   },
   "dependencies": {
     "@quasar/extras": "^1.15.11",
@@ -26,9 +27,13 @@
     "@quasar/vite-plugin": "^1.3.0",
     "@tauri-apps/cli": "^1.2.3",
     "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/eslint-config-typescript": "^11.0.2",
+    "@vue/tsconfig": "^0.1.3",
     "eslint": "^8.36.0",
     "eslint-plugin-vue": "^9.9.0",
     "sass": "1.32.12",
-    "vite": "^4.1.4"
+    "typescript": "^5.0.3",
+    "vite": "^4.1.4",
+    "vue-tsc": "^1.2.0"
   }
 }

src/components/base/AppHeader.vue

@@ -26,9 +26,7 @@
 
 <script setup>
   import { useLogo } from '../../composables/Logo'
-  import { useConnectionStore } from '../../store/connection'
   import ClusterSelection from '../clusterselection/ClusterSelection.vue'
 
-  const connectionStore = useConnectionStore()
   const logo = useLogo()
 </script>

src/components/home/ClusterHealth.vue

@@ -23,12 +23,9 @@
 
 <script setup>
   import { onMounted } from 'vue'
-  import { useTranslation } from '../../composables/i18n'
   import LoaderStatus from '../shared/LoaderStatus.vue'
   import { useElasticsearchRequest } from '../../composables/CallElasticsearch'
 
-  const t = useTranslation()
-
   const { requestState, data, load } = useElasticsearchRequest('clusterHealth')
   onMounted(load)
 </script>

src/components/home/ClusterInformation.vue

@@ -126,12 +126,9 @@
 
 <script setup>
   import { onMounted } from 'vue'
-  import { useTranslation } from '../../composables/i18n'
   import LoaderStatus from '../shared/LoaderStatus.vue'
   import { useElasticsearchRequest } from '../../composables/CallElasticsearch'
 
-  const t = useTranslation()
-
   const { requestState, data, load } = useElasticsearchRequest('clusterInfo')
   onMounted(load)
 </script>

src/components/home/HomeStatus.vue

@@ -84,6 +84,6 @@
   import ClusterHealth from './ClusterHealth.vue'
   import ClusterInformation from './ClusterInformation.vue'
 
-  const { load, requestState, data } = useElasticsearchRequest('clusterStats')
+  const { load, data } = useElasticsearchRequest('clusterStats')
   onMounted(load)
 </script>

src/components/indextemplates/IndexTemplatesTable.vue

@@ -16,24 +16,24 @@
            :rows="filteredItems"
            :pagination="{sortBy: 'name'}"
            :rows-per-page-options="DEFAULT_ROWS_PER_PAGE">
-    <template #body="props">
-      <q-tr @click="props.expand = !props.expand" class="clickable">
+    <template #body="body">
+      <q-tr class="clickable" @click="body.expand = !body.expand">
         <q-td>
-          <q-icon :name="props.expand ? 'expand_less' : 'expand_more'" />
+          <q-icon :name="body.expand ? 'expand_less' : 'expand_more'" />
         </q-td>
-        <q-td>{{ props.row.name }}</q-td>
-        <q-td>{{ props.row.index_template.index_patterns }}</q-td>
-        <q-td>{{ props.row.index_template.priority }}</q-td>
-        <q-td>{{ props.row.index_template.version }}</q-td>
-        <q-td>{{ props.row.index_template.allow_auto_create }}</q-td>
-        <q-td>{{ JSON.stringify(props.row.index_template.template) }}</q-td>
+        <q-td>{{ body.row.name }}</q-td>
+        <q-td>{{ body.row.index_template.index_patterns }}</q-td>
+        <q-td>{{ body.row.index_template.priority }}</q-td>
+        <q-td>{{ body.row.index_template.version }}</q-td>
+        <q-td>{{ body.row.index_template.allow_auto_create }}</q-td>
+        <q-td>{{ JSON.stringify(body.row.index_template.template) }}</q-td>
       </q-tr>
 
-      <q-tr v-if="props.expand">
+      <q-tr v-if="body.expand">
         <q-td colspan="100%">
           <div class="q-pa-md">
             <resizable-container>
-              <code-viewer :value="JSON.stringify(props.row.index_template.template)" />
+              <code-viewer :value="JSON.stringify(body.row.index_template.template)" />
             </resizable-container>
           </div>
         </q-td>

src/components/nodes/NodeIcons.vue

@@ -11,9 +11,6 @@
 
 <script setup>
   import ElasticsearchNode from '../../models/ElasticsearchNode'
-  import { useTranslation } from '../../composables/i18n'
-
-  const t = useTranslation()
 
   defineProps({
     elasticsearchNode: {

src/components/rest/RestQuery.vue

@@ -118,7 +118,6 @@
 <script setup>
   import { ref, toRaw } from 'vue'
   import RestQueryForm from './RestQueryForm.vue'
-  import RestQueryHistory from './RestQueryHistory.vue'
   import { useIdbStore } from '../../composables/Idb'
   import { useTranslation } from '../../composables/i18n'
   import { useRestQueryTabs } from '../../composables/RestQueryTabs'

src/components/shards/IndexShards.vue

@@ -17,14 +17,12 @@
 
 <script setup>
   import { onMounted, ref } from 'vue'
-  import { useTranslation } from '../../composables/i18n'
   import ReloadButton from '../shared/ReloadButton.vue'
   import LoaderStatus from '../shared/LoaderStatus.vue'
   import { useElasticsearchAdapter } from '../../composables/CallElasticsearch'
   import { convertShards } from '../../helpers/shards'
   import ShardsTable from './ShardsTable.vue'
 
-  const t = useTranslation()
   const shards = ref({})
 
   const { requestState, callElasticsearch } = useElasticsearchAdapter()

src/components/shards/ShardsTable.vue

@@ -83,7 +83,6 @@
 
 <script setup>
   import { computed, ref, watch } from 'vue'
-  import { useTranslation } from '../../composables/i18n'
   import { DEFAULT_ROWS_PER_PAGE } from '../../consts'
   import { useElasticsearchAdapter } from '../../composables/CallElasticsearch'
   import { useSnackbar } from '../../composables/Snackbar'
@@ -92,8 +91,6 @@
   import IndexShard from './IndexShard.vue'
   import FilterInput from '../shared/FilterInput.vue'
 
-  const t = useTranslation()
-
   const props = defineProps({
     shards: {
       type: Object,

src/components/shared/DownloadButton.vue

@@ -72,7 +72,7 @@
     })
   }
 
-  const setDownloadHref = async e => {
+  const setDownloadHref = async () => {
     loading.value = true
     href.value = ''
 

src/composables/RestQuery.js

@@ -4,6 +4,7 @@ import { buildDefaultRequest, fetchMethod, REQUEST_DEFAULT_HEADERS } from '../co
 import { useConnectionStore } from '../store/connection'
 import { useSnackbar } from './Snackbar'
 import { useIdb } from './Idb'
+import { removeComments } from '../services/json/parse'
 
 export const useRestQuery = (request, emit) => {
   const connectionStore = useConnectionStore()
@@ -30,7 +31,7 @@ export const useRestQuery = (request, emit) => {
 
     const options = {
       method: request.method,
-      body: ['GET', 'HEAD'].includes(request.method) ? null : request.body,
+      body: ['GET', 'HEAD'].includes(request.method) ? null : removeComments(request.body),
       headers: Object.assign({}, REQUEST_DEFAULT_HEADERS)
     }
 

src/consts.js → src/consts.ts

@@ -5,7 +5,7 @@ export const REQUEST_DEFAULT_HEADERS = {
   'Content-Type': 'application/json'
 }
 
-export const SUPPORTED_COUNTRY_LOCALES = {
+export const SUPPORTED_COUNTRY_LOCALES: Record<string, string> = {
   en: 'en',
   cn: 'cn',
   zh: 'cn'

src/helpers/beautify.ts

@@ -0,0 +1,13 @@
+export const beautify = (text: string, useSpaces: boolean): string => {
+  if (!text) return text
+  if (text.length === 0) return ''
+
+  const copy = (' ' + text).slice(1)
+
+  try {
+    const parsed = JSON.parse(copy)
+    return JSON.stringify(parsed, null, useSpaces ? '  ' : '\t')
+  } catch (error) {
+    return copy
+  }
+}

src/helpers/clipboard.js → src/helpers/clipboard.ts

@@ -1,7 +1,7 @@
 import { DESKTOP_BUILD } from '../consts'
 import { writeText } from '@tauri-apps/api/clipboard'
 
-export const writeToClipboard = text => {
+export const writeToClipboard = (text: string) => {
   if (DESKTOP_BUILD) {
     return writeText(text)
   } else {

src/helpers/debounce.ts

@@ -0,0 +1,10 @@
+export const debounce = (fn: any, timeout: number) => {
+  let timerId: number
+
+  return function (...args: any[]) {
+    clearTimeout(timerId)
+    timerId = setTimeout(() => {
+      fn(...args)
+    }, timeout)
+  }
+}

src/helpers/dialogs.js → src/helpers/dialogs.ts

@@ -1,7 +1,7 @@
 import { DESKTOP_BUILD } from '../consts'
 import { confirm } from '@tauri-apps/api/dialog'
 
-export const askConfirm = msg => {
+export const askConfirm = (msg: string) => {
   if (DESKTOP_BUILD) {
     return confirm(msg)
   } else {

src/helpers/elasticsearch_adapter.js → src/helpers/elasticsearch_adapter.ts

@@ -1,4 +1,4 @@
-export const buildFetchAuthHeader = (username, password) => {
+export const buildFetchAuthHeader = (username: string, password: string): string => {
   if (username.length > 0 && password.length > 0) {
     return 'Basic ' + base64EncodeUtf8(username + ':' + password)
   } else if (username.length > 0) {
@@ -7,12 +7,14 @@ export const buildFetchAuthHeader = (username, password) => {
     // If no username was given, we assume that password is an api key
     return 'ApiKey ' + password
   }
+
+  return ''
 }
 
-const base64EncodeUtf8 = str => {
+const base64EncodeUtf8 = (str: string): string => {
   return btoa(unescape(encodeURIComponent(str)))
 }
 
-export const addTrailingSlash = uri => {
+export const addTrailingSlash = (uri: string): string => {
   return uri[uri.length - 1] === '/' ? uri : uri + '/'
 }

src/helpers/filters.js → src/helpers/filters.ts

@@ -1,9 +1,8 @@
-export function filterItems (items, searchQuery, headers) {
+export function filterItems (items: Record<string, object>[], searchQuery: string, headerNames: string[]): object[] {
   const search = searchQuery.toString().slice().toLowerCase().trim()
   if (search.length === 0) return items
 
   const searchSplit = search.split(':')
-  const headerNames = typeof headers[0] === 'string' ? headers : headers.map(h => h.value)
 
   if (filterSpecificColumn(searchSplit, headerNames)) {
     const column = searchSplit[0]
@@ -13,17 +12,21 @@ export function filterItems (items, searchQuery, headers) {
     if (column.trim() === '') return items
 
     return items.filter(item => {
-      return item[column] && item[column].toString().toLowerCase().includes(query)
+      if (Object.hasOwn(item, column)) {
+        return item[column].toString().toLowerCase().includes(query)
+      }
     })
   } else {
     return items.filter(item => {
       return headerNames.some(headerName => {
-        return item[headerName] && item[headerName].toString().toLowerCase().includes(search)
+        if (Object.hasOwn(item, headerName)) {
+          return item[headerName].toString().toLowerCase().includes(search)
+        }
       })
     })
   }
 }
 
-const filterSpecificColumn = (searchSplit, headerNames) => {
+const filterSpecificColumn = (searchSplit: string[], headerNames: string[]): boolean => {
   return searchSplit.length > 1 && headerNames.includes(searchSplit[0])
 }

src/helpers/i18n.js → src/helpers/i18n.ts

@@ -4,7 +4,7 @@ export const defaultLocale = () => {
   return getBrowserLocale(navigator.languages, DEFAULT_LOCALE) || DEFAULT_LOCALE
 }
 
-export const getBrowserLocale = (languages, fallback) => {
+export const getBrowserLocale = (languages: readonly string[], fallback: string): string => {
   if (!languages || languages.length === 0) return fallback
 
   const lang = languages[0]

src/helpers/nodes.js → src/helpers/nodes.ts

@@ -1,4 +1,4 @@
-export const nodeRoleTitle = role => {
+export const nodeRoleTitle = (role: string): string => {
   let title = ''
   if (role.includes('c')) title += 'c - cold node\r\n'
   if (role.includes('d')) title += 'd - data node\r\n'

src/helpers/router.js → src/helpers/router.ts

@@ -1,6 +1,10 @@
-export const reloadHomePage = (router, instanceId) => {
+import { Router } from 'vue-router'
+
+export const reloadHomePage = (router: Router, instanceId: number) => {
+  console.log(instanceId)
   try {
     const currentRoute = router.currentRoute.value
+    // @ts-ignore
     if (currentRoute.name === 'home' && currentRoute.params.instanceId === instanceId) {
       window.location.reload()
     } else {

src/helpers/shards.js → src/helpers/shards.ts

@@ -1,5 +1,5 @@
-export const convertShards = (shards, indexHealth) => {
-  const nodes = []
+export const convertShards = (shards: Record<string, any>[], indexHealth: Record<string, any> []): object => {
+  const nodes: string[] = []
   const indices = Object.assign({}, ...(indexHealth.map(i => ({
     [i.index]: {
       index: i.index,
@@ -9,8 +9,8 @@ export const convertShards = (shards, indexHealth) => {
     }
   }))))
 
-  const result = {}
-  const unassignedShards = {}
+  const result: Record<string, any> = {}
+  const unassignedShards: Record<string, any> = {}
   for (const shard of shards) {
     if (shard.node) {
       let node
@@ -45,7 +45,7 @@ export const convertShards = (shards, indexHealth) => {
   }
 }
 
-const sortShards = (a, b) => {
+const sortShards = (a: Record<string, any>, b: Record<string, any>): number => {
   const shardA = parseInt(a.shard)
   const shardB = parseInt(b.shard)