From 7fba51ab7a292fe30c5fe3684acfc4719f925d44 Mon Sep 17 00:00:00 2001
From: tobe <tobeg3oogle@gmail.com>
Date: Fri, 29 Dec 2023 18:47:19 +0800
Subject: [PATCH 1/4] Refactor test feature service form

---
 .../featureservice/FeatureServicesData.vue    |  12 +-
 .../featureservice/OnlineQueryModePage.vue    | 353 ++++++++++++++++++
 .../featureservice/RequestFeatureService.vue  | 265 +++++++++++++
 .../featureservice/RequestModePage.vue        | 250 +++++++++++++
 .../form/TestFeatureServiceForm.vue           |   9 +-
 frontend/src/locales/en.json                  |   3 +-
 frontend/src/locales/zh.json                  |   5 +-
 frontend/src/router/index.js                  |   7 +
 8 files changed, 886 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/components/featureservice/OnlineQueryModePage.vue
 create mode 100644 frontend/src/components/featureservice/RequestFeatureService.vue
 create mode 100644 frontend/src/components/featureservice/RequestModePage.vue

diff --git a/frontend/src/components/featureservice/FeatureServicesData.vue b/frontend/src/components/featureservice/FeatureServicesData.vue
index 98e94ae..5142a02 100644
--- a/frontend/src/components/featureservice/FeatureServicesData.vue
+++ b/frontend/src/components/featureservice/FeatureServicesData.vue
@@ -15,10 +15,6 @@
     <FeatureServiceVersionDetail :name="currentDrawerFeatureService" :version="currentDrawerFeatureServiceVersion" :key="currentDrawerFeatureService+currentDrawerFeatureServiceVersion"></FeatureServiceVersionDetail>
   </a-drawer>
 
-  <a-modal v-model:visible="isOpenTestModal" width="1000px" :title="$t('Test Feature Service')" @ok="clickTestModalOk" >
-    <TestFeatureServiceForm ref="TestFeatureServiceForm" :featureServiceName="chooseFeatureServiceName" :featureServiceVersion="chooseFeatureServiceVersion" ></TestFeatureServiceForm>
-  </a-modal>
-
   <!-- Data table -->
   <a-input v-model:value="searchText" :placeholder="$t('Search')" @change="handleSearch" />
   <br/><br/>
@@ -35,7 +31,7 @@
       <a-button type="link" @click="openFeatureServiceVersionDrawer(record.name, record.version)">{{ record.version }}</a-button>
     </template>
     <template v-slot:action="scope">
-      <a-button type="default" @click="showTestFormModal(scope.record.name, scope.record.version)">{{ $t('Test Service') }}</a-button>
+      <router-link :to="`/featureservices/${scope.record.name}/${scope.record.version}/request/requestmode`">{{ $t('Request Feature Service') }}</router-link>
     </template>
   </a-table>
 
@@ -45,13 +41,11 @@
 <script>
 import axios from 'axios'
 import { notification } from 'ant-design-vue'
-import TestFeatureServiceForm from '@/components/form/TestFeatureServiceForm.vue';
 import FeatureServiceDetail from '@/components/featureservice/FeatureServiceDetail.vue'
 import FeatureServiceVersionDetail from '@/components/featureservice/FeatureServiceVersionDetail.vue'
 
 export default {
   components: {
-    TestFeatureServiceForm,
     FeatureServiceDetail,
     FeatureServiceVersionDetail
   },
@@ -166,10 +160,6 @@ export default {
       this.isOpenFeatureServiceVersionDrawer = true;
       this.currentDrawerFeatureService = name;
       this.currentDrawerFeatureServiceVersion = version;
-    },
-
-    clickTestModalOk() {
-      this.$refs.TestFeatureServiceForm.submitForm();
     }
 
   }
diff --git a/frontend/src/components/featureservice/OnlineQueryModePage.vue b/frontend/src/components/featureservice/OnlineQueryModePage.vue
new file mode 100644
index 0000000..6555f92
--- /dev/null
+++ b/frontend/src/components/featureservice/OnlineQueryModePage.vue
@@ -0,0 +1,353 @@
+<template>
+
+<div>
+
+  <div>
+    <a-typography-paragraph>
+      <!-- <pre>{{ $t("Text of introduce test feature service") }} <a target="blank" href="https://openmldb.ai/docs/zh/main/quickstart/sdk/rest_api.html">{{$t('OpenMLDB documents')}}</a></pre> -->
+      <pre>用户可以使用“请求模式”或“在线查询模式”来访问特征服务，请求模式下用户需要输入整行主表数据通过 LastJoin 等方法提取副表特征；在线查询模式则不需要传入数据，直接查询在线表的特征数据，并且可以通过主键进行数据过滤。</pre>
+    </a-typography-paragraph>
+    <br/>
+    
+    <!-- Test form -->
+    <a-form
+      :model="testFormState"
+      layout="vertical">
+      <a-form-item
+        :label='$t("Feature Service Name")'
+        :rules="[{ required: true, message: 'Please input feature service name!' }]">
+        <a-select show-search id="itemSelect" v-model:value="testFormState.name" @change="updateSelectedService">
+          <option v-for="featureViewItem in featureServices" :value="featureViewItem.name">{{ featureViewItem.name }}</option>
+        </a-select>
+      </a-form-item>
+
+      <a-form-item
+        :label='$t("Version")'
+        :rules="[{ required: false, message: 'Please input feature service version!' }]">
+        <a-select show-search id="itemSelect" v-model:value="testFormState.version" @change="updateSelectedService">
+          <option v-for="version in featureServiceVersions" :value="version">{{ version }}</option>
+        </a-select>
+      </a-form-item>
+
+      <a-form-item
+        :label='$t("Request Schema")'>
+        <a-typography>
+          <a-typography-paragraph>
+            <pre>{{ requestSchema }}</pre>
+          </a-typography-paragraph>
+        </a-typography>
+      </a-form-item>
+
+      <p>
+        <span style="color:red;">* </span>{{ $t('Request Data') }}
+        &nbsp;&nbsp;<a-button size="small" @click="switchJsonTestData">{{ $t('Switch Json Data') }}</a-button>
+      </p>
+
+
+
+      <div v-if="isUseJsonTestData"> 
+        <a-form-item
+          :label='$t("Request Demo Data")'>
+          <a-typography>
+            <a-typography-paragraph>
+              <pre>{{ requestDemoData }}</pre>
+            </a-typography-paragraph>
+          </a-typography>
+        </a-form-item>
+
+        <a-form-item
+          :label='$t("Test Data")'
+          :rules="[{ required: true, message: 'Please input test data!' }]">
+          <a-textarea v-model:value="testFormState.jsonTestData" :rows="5"></a-textarea>
+        </a-form-item>
+      </div>
+
+
+      <div v-else>
+        <a-space
+        v-for="(column, index) in columns"
+        :key="column.name"
+        style="display: flex; margin-bottom: 0px"
+        align="baseline"
+      >
+        <p style="min-width: 200px">{{ column.name }} ({{ column.type }}):</p>
+
+        <a-form-item
+          :name="['columns', index, 'name']">
+          <a-input v-model:value="testFormState.columnDataList[index]" placeholder="" />
+        </a-form-item>
+      </a-space>
+      </div>
+
+    </a-form>
+  </div>
+
+</div>
+</template>
+  
+<script>
+import axios from 'axios'
+import { notification } from 'ant-design-vue'
+import { Modal } from 'ant-design-vue'
+import { h } from 'vue';
+
+export default {
+  props: {
+    featureServiceName: {
+      type: String,
+      default: "",
+    },
+    featureServiceVersion: {
+      type: String,
+      default: "",
+    }
+  },
+  
+  data() {
+    return {
+      featureServices: [],
+
+      featureServiceVersions: [],
+
+      isUseJsonTestData: false,
+
+      testFormState: {
+        name: "",
+        version: "",
+        jsonTestData: "",
+        columnDataList: []
+      },
+
+      requestSchema: "",
+      requestDemoData: "",
+
+      // Example: [{"name": "", "type": ""}]
+      columns: [],
+
+    };
+  },
+
+  mounted() {
+    this.initData();
+  },
+
+  // Use updated() instead mounted() for using latest feature service and version
+  updated() {
+    this.initData();
+  },
+
+  methods: {
+    updateSelectedService() {
+      if (this.testFormState.name != "") {
+
+        axios.get(`/api/featureservices/${this.testFormState.name}/versions`)
+          .then(response => {
+            this.featureServiceVersions = response.data;
+          })
+          .catch(error => {
+            var errorMessage = error.message;
+            if (error.response && error.response.data) {
+              errorMessage = error.response.data;
+            }
+            notification["error"]({
+              message: this.$t('Execute Fail'),
+              description: errorMessage
+            });
+          });
+
+        axios.get(`/api/featureservices/${this.testFormState.name}/${this.testFormState.version}/request/schema`)
+          .then(response => {
+            this.requestSchema = response.data;
+
+            const columnList = response.data.split(",").map(obj => {
+              return {
+                "name": obj.split(":")[0],
+                "type": obj.split(":")[1]
+              }
+            })
+
+            this.columns = [...columnList]
+          })
+          .catch(error => {
+            var errorMessage = error.message;
+            if (error.response && error.response.data) {
+              errorMessage = error.response.data;
+            }
+            notification["error"]({
+              message: this.$t('Execute Fail'),
+              description: errorMessage
+            });
+          });
+
+          
+        axios.get(`/api/featureservices/${this.testFormState.name}/${this.testFormState.version}/request/demo`)
+          .then(response => {
+            this.requestDemoData = response.data;
+          })
+          .catch(error => {
+            var errorMessage = error.message;
+            if (error.response && error.response.data) {
+              errorMessage = error.response.data;
+            }
+            notification["error"]({
+              message: this.$t('Execute Fail'),
+              description: errorMessage
+            });
+          });   
+          
+          
+      }
+    },
+
+    initData() {
+      if (this.featureServiceName) {
+        this.testFormState.name = this.featureServiceName;
+
+        if (this.featureServiceVersion) {
+          this.testFormState.version = this.featureServiceVersion;
+        }
+
+        this.updateSelectedService();
+      }
+
+      axios.get(`/api/featureservices`)
+        .then(response => {
+          this.featureServices = response.data;
+        })
+        .catch(error => {
+          var errorMessage = error.message;
+          if (error.response && error.response.data) {
+            errorMessage = error.response.data;
+          }
+          notification["error"]({
+            message: this.$t('Execute Fail'),
+            description: errorMessage
+          });
+        }); 
+    },
+
+    handleDelete(name) {
+      axios.delete(`/api/featureservices/${name}`)
+      .then(response => {
+        notification["success"]({
+              message: this.$t('Execute Success'),
+              description: `Success to delete feature service: ${name}`
+            });
+
+        this.initData();
+      })
+      .catch(error => {
+        var errorMessage = error.message;
+        if (error.response && error.response.data) {
+          errorMessage = error.response.data;
+        }
+        notification["error"]({
+          message: this.$t('Execute Fail'),
+          description: errorMessage
+        });
+      });
+    },
+
+    submitForm() {
+      var requestJson = {}
+
+      if (this.isUseJsonTestData) {
+        try {
+          requestJson = JSON.parse(this.testFormState.jsonTestData);
+        } catch (e) {
+          notification["error"]({
+            message: this.$t('Request Fail'),
+            description: e.message
+          });
+        }
+
+      } else {
+        // Construct single row data, example: {input: [ ["foo"] ]}
+        requestJson = {"input": []};
+        requestJson["input"][0] = [];
+
+        const columnStringList = this.requestSchema.split(",")
+        for (var i=0; i< columnStringList.length; ++i) {
+          const type = columnStringList[i].split(":")[1];
+
+          const columnDataString = this.testFormState.columnDataList[i];
+          var columnData = columnDataString;
+
+          if (type === "int16") {
+            columnData = parseInt(columnDataString);
+          } else if (type === "int32") {
+            columnData = parseInt(columnDataString);
+          } else if (type == "int64") {
+            columnData = parseInt(columnDataString);
+          } else if (type === "float") {
+            columnData = parseFloat(columnDataString);
+          } else if (type === "double") {
+            columnData = parseFloat(columnDataString);
+          } else if (type === "timestamp") {
+            columnData = new Date(columnDataString).getTime();
+          } else if (type === "date") {
+            // Use string date to request OpenMLDB api server
+          } else if (type == "bool") {
+            columnData = Boolean(columnDataString);
+          } else if (type == "string") {
+
+          } else {
+            notification["error"]({
+              message: this.$t('Execute Fail'),
+              description: "Get unsupport type: " + type
+            });
+          }
+
+
+          requestJson["input"][0].push(columnData);
+        }
+      }
+
+      axios.post(`/api/featureservices/${this.testFormState.name}/${this.testFormState.version}/request`,
+        requestJson
+      )
+      .then(response => {
+        notification["success"]({
+              message: this.$t('Execute Success'),
+              description: `Success to request feature service ${this.testFormState.name}`
+            });
+
+        if (response.data.code == 0) {
+          Modal.success({
+            title: 'Request result',
+            content: h('div', {}, [
+              h('p', JSON.stringify(response.data.data)),
+            ]),
+            onOk() {},
+          });
+        } else {
+          notification["error"]({
+              message: this.$t('Request Fail'),
+              description: `Error message: ${response.data.msg}, request json: ${requestJson}`
+            });
+        }
+      })
+      .catch(error => {
+        var errorMessage = error.message;
+        if (error.response && error.response.data) {
+          errorMessage = error.response.data;
+        }
+        notification["error"]({
+          message: this.$t('Execute Fail'),
+          description: errorMessage
+        });
+      });
+    },
+
+    switchJsonTestData() {
+      if (this.isUseJsonTestData) {
+        this.isUseJsonTestData = false;
+      } else {
+        this.isUseJsonTestData = true;
+      }
+      
+    }
+
+  }
+};
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/featureservice/RequestFeatureService.vue b/frontend/src/components/featureservice/RequestFeatureService.vue
new file mode 100644
index 0000000..3546f3a
--- /dev/null
+++ b/frontend/src/components/featureservice/RequestFeatureService.vue
@@ -0,0 +1,265 @@
+<template>
+<div>
+
+  <br/>
+  <a-typography>
+    <a-typography-title :level="2">{{ $t('Request Feature Service') }}</a-typography-title>
+    <a-typography-paragraph>
+    </a-typography-paragraph>
+  </a-typography>
+
+  <a-typography-paragraph>
+    <!-- <pre>{{ $t("Text of introduce test feature service") }} <a target="blank" href="https://openmldb.ai/docs/zh/main/quickstart/sdk/rest_api.html">{{$t('OpenMLDB documents')}}</a></pre> -->
+    <pre>用户可以使用“请求模式”或“在线查询模式”来访问特征服务，请求模式下用户需要输入整行主表数据通过 LastJoin 等方法提取副表特征；在线查询模式则不需要传入数据，直接查询在线表的特征数据，并且可以通过主键进行数据过滤。</pre>
+  </a-typography-paragraph>
+
+
+  <a-menu mode="horizontal">
+    <a-menu-item key="1">
+      <router-link :to="`/featureservices/${name}/${version}/request/requestmode`">请求模式</router-link>
+    </a-menu-item>
+
+    <a-menu-item key="2">
+      <router-link :to="`/featureservices/${name}/${version}/request/onlinequerymode`">在线查询模式</router-link>
+    </a-menu-item>
+  </a-menu>
+
+
+  <router-view></router-view>
+
+<!--
+  <a-typography>
+    <a-typography-paragraph>
+      <blockquote>
+        用户可以使用“请求模式”或“在线查询模式”来访问特征服务。
+        请求模式下用户需要输入整行主表数据通过 LastJoin 等方法提取副表特征。
+        在线查询模式则不需要传入数据，直接查询在线表的特征数据，并且可以通过主键进行数据过滤。
+      </blockquote>
+    </a-typography-paragraph>
+  </a-typography>
+
+
+  <br/>
+  <a-descriptions bordered>
+    <a-descriptions-item :span="24" :label="$t('Name')">{{ data.name }}</a-descriptions-item>
+    <a-descriptions-item :span="24" :label="$t('Version')"> {{ data.version }}</a-descriptions-item>
+    <a-descriptions-item :span="24" :label="$t('Feature Names')">{{ data.featureNames }}</a-descriptions-item>
+  </a-descriptions>
+-->
+</div>
+</template>
+    
+<script>
+import axios from 'axios'
+import { notification } from 'ant-design-vue'
+import TableDetail from '@/components/table/TableDetail.vue'
+import DatabaseDetail from '@/components/database/DatabaseDetail.vue'
+import FeatureViewDetail from '@/components/featureview/FeatureViewDetail.vue'
+import FeatureDetail from '@/components/feature/FeatureDetail.vue'
+import TestFeatureServiceForm from '@/components/form/TestFeatureServiceForm.vue';
+
+export default {
+  components: {
+    FeatureViewDetail,
+    FeatureDetail,
+    DatabaseDetail,
+    TableDetail,
+    TestFeatureServiceForm
+  },
+
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    version: {
+      type: String,
+      required: true
+    }
+  },
+
+  mounted() {
+    this.initData();
+  },
+  
+  data() {
+    return {
+      isOpenFeatureViewDrawer: false,
+      currentDrawerFeatureView: "",
+      isOpenFeatureDrawer: false,
+      currentDrawerFeature: "",
+      isOpenDatabaseDrawer: false,
+      currentDrawerDatabase: "",
+      isOpenTableDrawer: false,
+      currentDrawerTable: "",
+
+      isOpenTestModal: false,
+
+      data: {},
+      features: [],
+
+      columns: [{
+          title: this.$t('Feature View'),
+          dataIndex: 'featureViewName',
+          key: 'featureViewName',
+          slots: { customRender: 'featureView' }
+        },
+        {
+          title: this.$t('Feature Name'),
+          dataIndex: 'featureName',
+          key: 'featureName',
+          slots: { customRender: 'name' }
+        },
+        {
+          title: this.$t('Type'),
+          dataIndex: 'type',
+          key: 'type',
+        },
+        {
+          title: this.$t('Description'),
+          dataIndex: 'description',
+          key: 'description',
+      }],
+
+      tables: [],
+
+      tableColumns: [{
+          title: this.$t('Database'),
+          dataIndex: 'db',
+          key: 'db',
+          slots: { customRender: 'db' }
+        },
+        {
+          title: this.$t('Table'),
+          dataIndex: 'table',
+          key: 'table',
+          slots: { customRender: 'table' }
+        }],
+          
+      requestSchema: "",
+      requestDemoData: ""
+    };
+  },
+
+  methods: {
+    initData() {
+      axios.get(`/api/featureservices/${this.name}/${this.version}`)
+        .then(response => {
+          this.data = response.data;
+
+          // Request features from feature view
+          axios.get(`/api/features?featureServiceName=${this.data.name}&featureServiceVersion=${this.data.version}`)
+            .then(response => {
+              this.features = response.data;
+            })
+            .catch(error => {
+              notification["error"]({
+                message: this.$t('Execute Fail'),
+                description: error.message
+              });
+            });
+        })
+        .catch(error => {
+          var errorMessage = error.message;
+          if (error.response && error.response.data) {
+            errorMessage = error.response.data;
+          }
+          notification["error"]({
+            message: this.$t('Execute Fail'),
+            description: errorMessage
+          });
+        })
+
+      axios.get(`/api/featureservices/${this.name}/${this.version}/tables`)
+        .then(response => {            
+          response.data.forEach(str => {
+            let [db, table] = str.split('.');
+            this.tables.push({"db": db, "table": table});
+          });
+        })
+        .catch(error => {
+          var errorMessage = error.message;
+          if (error.response && error.response.data) {
+            errorMessage = error.response.data;
+          }
+          notification["error"]({
+            message: this.$t('Execute Fail'),
+            description: errorMessage
+          });
+        });
+
+      axios.get(`/api/featureservices/${this.name}/${this.version}/request/schema`)
+        .then(response => {
+          this.requestSchema = response.data;
+        })
+        .catch(error => {
+          var errorMessage = error.message;
+          if (error.response && error.response.data) {
+            errorMessage = error.response.data;
+          }
+          notification["error"]({
+            message: this.$t('Execute Fail'),
+            description: errorMessage
+          });
+        });
+
+      axios.get(`/api/featureservices/${this.name}/${this.version}/request/demo`)
+        .then(response => {
+          this.requestDemoData = response.data;
+        })
+        .catch(error => {
+          var errorMessage = error.message;
+          if (error.response && error.response.data) {
+            errorMessage = error.response.data;
+          }
+          notification["error"]({
+            message: this.$t('Execute Fail'),
+            description: errorMessage
+          });
+        });  
+    },
+
+    openFeatureViewDrawer(featureView) {
+      this.isOpenFeatureViewDrawer = true;
+      this.currentDrawerFeatureView = featureView;
+    },
+
+    openFeatureDrawer(featureView, feature) {
+      this.isOpenFeatureDrawer = true;
+      this.currentDrawerFeatureView = featureView;
+      this.currentDrawerFeature = feature;
+    },
+
+    openDatabaseDrawer(db) {
+      this.isOpenDatabaseDrawer = true;
+      this.currentDrawerDatabase = db;
+    },
+
+    openTableDrawer(db, table) {
+      this.isOpenTableDrawer = true;
+      this.currentDrawerDatabase = db;
+      this.currentDrawerTable = table;
+    },
+
+    showTestFormModal(name, version) {
+      this.chooseFeatureServiceName = name;
+      this.chooseFeatureServiceVersion = version;
+
+      this.isOpenTestModal = true;
+    },
+
+    clickTestModalOk() {
+      this.$refs.TestFeatureServiceForm.submitForm();
+    },
+
+    showTestFormModal() {
+      this.isOpenTestModal = true;
+    },
+
+    clickTestModalOk() {
+      this.$refs.TestFeatureServiceForm.submitForm();
+    }
+
+  }
+}
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/featureservice/RequestModePage.vue b/frontend/src/components/featureservice/RequestModePage.vue
new file mode 100644
index 0000000..f10ef8b
--- /dev/null
+++ b/frontend/src/components/featureservice/RequestModePage.vue
@@ -0,0 +1,250 @@
+<template>
+
+<div>
+
+  <br/>
+
+  <a-descriptions bordered>
+    <a-descriptions-item :span="24" :label="$t('Name')">{{ name }}</a-descriptions-item>
+    <a-descriptions-item :span="24" :label="$t('Version')"> {{ version }}</a-descriptions-item>
+    <!--<a-descriptions-item :span="24" :label="$t('Feature Names')">{{ data.featureNames }}</a-descriptions-item>-->
+    <a-descriptions-item :span="24" :label="$t('Request Schema')"> {{ requestSchema }}</a-descriptions-item>
+    <a-descriptions-item :span="24" :label="$t('Request Demo Data')"> {{ requestDemoData }}</a-descriptions-item>
+  </a-descriptions>
+
+  <br/>
+  <!-- Test form -->
+  <a-form :model="formState"
+    @submit="submitForm">
+
+    <p>
+      <span style="color:red;">* </span>{{ $t('Request Data') }}
+      &nbsp;&nbsp;<a-button size="small" @click="switchJsonTestData">{{ $t('Switch Json Data') }}</a-button>
+    </p>
+
+    <div v-if="isUseJsonTestData"> 
+      <a-form-item
+        :label='$t("Request Demo Data")'>
+        <a-typography>
+          <a-typography-paragraph>
+            <pre>{{ requestDemoData }}</pre>
+          </a-typography-paragraph>
+        </a-typography>
+      </a-form-item>
+
+      <a-form-item
+        :label='$t("Test Data")'
+        :rules="[{ required: true, message: 'Please input test data!' }]">
+        <a-textarea v-model:value="formState.jsonTestData" :rows="5"></a-textarea>
+      </a-form-item>
+    </div>
+
+    <div v-else>
+      <a-space
+        v-for="(column, index) in columns"
+        :key="column.name"
+        style="display: flex; margin-bottom: 0px"
+        align="baseline"
+      >
+        <p style="min-width: 200px">{{ column.name }} ({{ column.type }}):</p>
+
+        <a-form-item
+          :name="['columns', index, 'name']">
+          <a-input v-model:value="formState.columnDataList[index]" placeholder="" />
+        </a-form-item>
+      </a-space>
+      </div>
+
+      <a-form-item>
+        <a-button type="primary" html-type="submit">{{ $t('Submit') }}</a-button>
+      </a-form-item>
+  </a-form>
+
+  <div v-if="resultJson">
+    <br/>
+    <h2>Result</h2>
+    <pre>{{ resultJson }}</pre>
+  </div>
+
+</div>
+</template>
+  
+<script>
+import axios from 'axios'
+import { notification } from 'ant-design-vue'
+
+export default {
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    version: {
+      type: String,
+      default: "",
+    }
+  },
+  
+  data() {
+    return {
+
+      isUseJsonTestData: false,
+
+      formState: {
+        jsonTestData: "",
+        columnDataList: []
+      },
+
+      requestSchema: "",
+      requestDemoData: "",
+
+      // Example: [{"name": "", "type": ""}]
+      columns: [],
+
+      resultJson: ""
+    };
+  },
+
+  mounted() {
+    this.init();
+  },
+
+  methods: {
+    init() {
+        axios.get(`/api/featureservices/${this.name}/${this.version}/request/schema`)
+          .then(response => {
+            this.requestSchema = response.data;
+
+            const columnList = response.data.split(",").map(obj => {
+              return {
+                "name": obj.split(":")[0],
+                "type": obj.split(":")[1]
+              }
+            })
+
+            this.columns = [...columnList]
+          })
+          .catch(error => {
+            var errorMessage = error.message;
+            if (error.response && error.response.data) {
+              errorMessage = error.response.data;
+            }
+            notification["error"]({
+              message: this.$t('Execute Fail'),
+              description: errorMessage
+            });
+          });
+
+          
+        axios.get(`/api/featureservices/${this.name}/${this.version}/request/demo`)
+          .then(response => {
+            this.requestDemoData = response.data;
+          })
+          .catch(error => {
+            var errorMessage = error.message;
+            if (error.response && error.response.data) {
+              errorMessage = error.response.data;
+            }
+            notification["error"]({
+              message: this.$t('Execute Fail'),
+              description: errorMessage
+            });
+          });   
+    },
+
+
+    submitForm() {
+      var requestJson = {}
+
+      if (this.isUseJsonTestData) {
+        try {
+          requestJson = JSON.parse(this.formState.jsonTestData);
+        } catch (e) {
+          notification["error"]({
+            message: this.$t('Request Fail'),
+            description: e.message
+          });
+        }
+
+      } else {
+        // Construct single row data, example: {input: [ ["foo"] ]}
+        requestJson = {"input": []};
+        requestJson["input"][0] = [];
+
+        const columnStringList = this.requestSchema.split(",")
+        for (var i=0; i< columnStringList.length; ++i) {
+          const type = columnStringList[i].split(":")[1];
+
+          const columnDataString = this.formState.columnDataList[i];
+          var columnData = columnDataString;
+
+          if (type === "int16") {
+            columnData = parseInt(columnDataString);
+          } else if (type === "int32") {
+            columnData = parseInt(columnDataString);
+          } else if (type == "int64") {
+            columnData = parseInt(columnDataString);
+          } else if (type === "float") {
+            columnData = parseFloat(columnDataString);
+          } else if (type === "double") {
+            columnData = parseFloat(columnDataString);
+          } else if (type === "timestamp") {
+            columnData = new Date(columnDataString).getTime();
+          } else if (type === "date") {
+            // Use string date to request OpenMLDB api server
+          } else if (type == "bool") {
+            columnData = Boolean(columnDataString);
+          } else if (type == "string") {
+
+          } else {
+            notification["error"]({
+              message: this.$t('Execute Fail'),
+              description: "Get unsupport type: " + type
+            });
+          }
+
+
+          requestJson["input"][0].push(columnData);
+        }
+      }
+
+      axios.post(`/api/featureservices/${this.name}/${this.version}/request`,
+        requestJson
+      )
+      .then(response => {
+        if (response.data.code == 0) {
+          notification["success"]({
+            message: this.$t('Execute Success'),
+            description: "Success to request feature service"
+          });
+
+          this.resultJson = response.data.data;
+        } else {
+          this.resultJson = response.data.msg;
+        }
+      })
+      .catch(error => {
+        var errorMessage = error.message;
+        if (error.response && error.response.data) {
+          errorMessage = error.response.data;
+          this.resultJson = error.response.data;
+        }
+        notification["error"]({
+          message: this.$t('Execute Fail'),
+          description: errorMessage
+        });
+      });
+    },
+
+    switchJsonTestData() {
+      if (this.isUseJsonTestData) {
+        this.isUseJsonTestData = false;
+      } else {
+        this.isUseJsonTestData = true;
+      }
+      
+    }
+
+  }
+};
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/form/TestFeatureServiceForm.vue b/frontend/src/components/form/TestFeatureServiceForm.vue
index 09575c1..6555f92 100644
--- a/frontend/src/components/form/TestFeatureServiceForm.vue
+++ b/frontend/src/components/form/TestFeatureServiceForm.vue
@@ -4,7 +4,8 @@
 
   <div>
     <a-typography-paragraph>
-      <pre>{{ $t("Text of introduce test feature service") }} <a target="blank" href="https://openmldb.ai/docs/zh/main/quickstart/sdk/rest_api.html">{{$t('OpenMLDB documents')}}</a></pre>
+      <!-- <pre>{{ $t("Text of introduce test feature service") }} <a target="blank" href="https://openmldb.ai/docs/zh/main/quickstart/sdk/rest_api.html">{{$t('OpenMLDB documents')}}</a></pre> -->
+      <pre>用户可以使用“请求模式”或“在线查询模式”来访问特征服务，请求模式下用户需要输入整行主表数据通过 LastJoin 等方法提取副表特征；在线查询模式则不需要传入数据，直接查询在线表的特征数据，并且可以通过主键进行数据过滤。</pre>
     </a-typography-paragraph>
     <br/>
     
@@ -28,7 +29,6 @@
         </a-select>
       </a-form-item>
 
-
       <a-form-item
         :label='$t("Request Schema")'>
         <a-typography>
@@ -43,7 +43,8 @@
         &nbsp;&nbsp;<a-button size="small" @click="switchJsonTestData">{{ $t('Switch Json Data') }}</a-button>
       </p>
 
-      <!-- Use json to request -->
+
+
       <div v-if="isUseJsonTestData"> 
         <a-form-item
           :label='$t("Request Demo Data")'>
@@ -61,7 +62,7 @@
         </a-form-item>
       </div>
 
-      <!-- Use normal form to construct request data -->
+
       <div v-else>
         <a-space
         v-for="(column, index) in columns"
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 1163e59..0e521e2 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -254,6 +254,7 @@
     "Refresh Log": "Refresh Log",
     "Refresh Status": "Refresh Status",
     "Filter SQL": "Filter SQL",
-    "Add Index": "Add Index"
+    "Add Index": "Add Index",
+    "Request Feature Service": "Request Feature Service"
 
 }
\ No newline at end of file
diff --git a/frontend/src/locales/zh.json b/frontend/src/locales/zh.json
index 5345e32..94a6a45 100644
--- a/frontend/src/locales/zh.json
+++ b/frontend/src/locales/zh.json
@@ -163,7 +163,7 @@
     "Success to deploy feature service": "成功部署特征服务",
     "Display log": "显示日志",
     "Hide log": "隐藏日志",
-    "Test Feature Service": "测试特征视图",
+    "Test Feature Service": "测试特征服务",
     "Text of introduce test feature service": "用户可以通过输入测试数据，测试特征服务的功能和性能，测试数据格式请参考",
     "Execute Online SQL": "执行在线 SQL",
     "Execute Offline SQL": "执行离线 SQL",
@@ -256,6 +256,7 @@
     "Refresh Log": "刷新日志",
     "Refresh Status": "刷新状态",
     "Filter SQL": "过滤数据 SQL",
-    "Add Index": "添加索引"
+    "Add Index": "添加索引",
+    "Request Feature Service": "请求特征服务"
 
 }
\ No newline at end of file
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index b8269c9..4356a74 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -10,6 +10,9 @@ import FeatureDetail from '@/components/feature/FeatureDetail.vue'
 import FeatureViewDetail from '@/components/featureview/FeatureViewDetail.vue'
 import FeatureServiceDetail from '@/components/featureservice/FeatureServiceDetail.vue'
 import FeatureServiceVersionDetail from '@/components/featureservice/FeatureServiceVersionDetail.vue'
+import RequestFeatureService from '@/components/featureservice/RequestFeatureService.vue'
+import RequestModePage from '@/components/featureservice/RequestModePage.vue'
+import OnlineQueryModePage from '@/components/featureservice/OnlineQueryModePage.vue'
 import DagPage from '@/components/DAG/DagPage.vue'
 import OfflineJobsPage from '@/components/offlinejob/OfflineJobsPage.vue'
 import OfflineJobDetail from '@/components/offlinejob/OfflineJobDetail.vue'
@@ -46,6 +49,10 @@ const router = createRouter({
     { path: '/featureservices/:name', component: FeatureServiceDetail, props: true },
     { path: '/featureservices/:name/:version', component: FeatureServiceVersionDetail, props: true },
     { path: '/featureservices/:name/:version/result', component: CreateFeatureServiceResult, props: true },
+    { path: '/featureservices/:name/:version/request', component: RequestFeatureService, props: true, children: [
+      { path: 'requestmode', component: RequestModePage, props: true },
+      { path: 'onlinequerymode', component: OnlineQueryModePage, props: true },
+    ]},
     { path: '/offlinejobs', component: OfflineJobsPage},
     { path: '/offlinejobs/:id', component: OfflineJobDetail, props: true },
     { path: '/offlinejobs/:id/log', component: OfflineJobLog, props: true },

From 6dff3f02e22500545e138e553c5a98987196d6df Mon Sep 17 00:00:00 2001
From: tobe <tobeg3oogle@gmail.com>
Date: Wed, 3 Jan 2024 18:43:03 +0800
Subject: [PATCH 2/4] Support online query mode

---
 .../featureservice/FeatureServiceDetail.vue   |   2 +-
 .../FeatureServiceVersionDetail.vue           |   4 +-
 .../featureservice/OnlineQueryModePage.vue    | 414 +++++++-----------
 .../featureservice/RequestFeatureService.vue  |  19 -
 .../featureservice/RequestModePage.vue        |  21 +-
 frontend/src/locales/en.json                  |   4 +-
 frontend/src/locales/zh.json                  |   4 +-
 .../controller/FeatureServiceController.java  |  22 +
 .../service/FeatureServiceService.java        | 110 ++++-
 .../featureplatform/service/TableService.java |   5 +-
 .../utils/OpenmldbSqlUtil.java                |  30 ++
 .../utils/OpenmldbTableUtil.java              |  23 +
 12 files changed, 367 insertions(+), 291 deletions(-)
 create mode 100644 src/main/java/com/_4paradigm/openmldb/featureplatform/utils/OpenmldbSqlUtil.java

diff --git a/frontend/src/components/featureservice/FeatureServiceDetail.vue b/frontend/src/components/featureservice/FeatureServiceDetail.vue
index 29be145..8138de9 100644
--- a/frontend/src/components/featureservice/FeatureServiceDetail.vue
+++ b/frontend/src/components/featureservice/FeatureServiceDetail.vue
@@ -30,7 +30,7 @@
     </template>
 
     <template v-slot:action="scope">
-      <a-button type="default" @click="showTestFormModal(scope.record.name, scope.record.version)">{{ $t('Test Service Version') }}</a-button>
+      <a-button type="default"><router-link :to="`/featureservices/${scope.record.name}/${scope.record.version}/request/requestmode`">{{ $t('Request Feature Service') }}</router-link></a-button>
     
       <br/>
       <a-popconfirm
diff --git a/frontend/src/components/featureservice/FeatureServiceVersionDetail.vue b/frontend/src/components/featureservice/FeatureServiceVersionDetail.vue
index fbf3581..17bd4f7 100644
--- a/frontend/src/components/featureservice/FeatureServiceVersionDetail.vue
+++ b/frontend/src/components/featureservice/FeatureServiceVersionDetail.vue
@@ -49,7 +49,9 @@
   </a-descriptions>
 
   <br/>
-  <a-button type="default" @click="showTestFormModal()">{{ $t('Test Service Version') }}</a-button>
+  <a-button type="default">
+    <router-link :to="`/featureservices/${data.name}/${data.version}/request/requestmode`">{{ $t('Request Feature Service') }}</router-link>
+  </a-button>
 
   <br/><br/>
   <h2>{{ $t('Features') }}</h2>
diff --git a/frontend/src/components/featureservice/OnlineQueryModePage.vue b/frontend/src/components/featureservice/OnlineQueryModePage.vue
index 6555f92..dad1bb2 100644
--- a/frontend/src/components/featureservice/OnlineQueryModePage.vue
+++ b/frontend/src/components/featureservice/OnlineQueryModePage.vue
@@ -1,71 +1,33 @@
 <template>
 
-<div>
-
   <div>
-    <a-typography-paragraph>
-      <!-- <pre>{{ $t("Text of introduce test feature service") }} <a target="blank" href="https://openmldb.ai/docs/zh/main/quickstart/sdk/rest_api.html">{{$t('OpenMLDB documents')}}</a></pre> -->
-      <pre>用户可以使用“请求模式”或“在线查询模式”来访问特征服务，请求模式下用户需要输入整行主表数据通过 LastJoin 等方法提取副表特征；在线查询模式则不需要传入数据，直接查询在线表的特征数据，并且可以通过主键进行数据过滤。</pre>
-    </a-typography-paragraph>
+  
+    <br/>
+    <a-descriptions bordered>
+      <a-descriptions-item :span="24" :label="$t('Name')">{{ name }}</a-descriptions-item>
+      <a-descriptions-item :span="24" :label="$t('Version')"> {{ version }}</a-descriptions-item>
+      <a-descriptions-item :span="24" :label="$t('Feature Names')">{{ featureNames }}</a-descriptions-item>
+      
+    </a-descriptions>
+  
     <br/>
-    
     <!-- Test form -->
-    <a-form
-      :model="testFormState"
-      layout="vertical">
-      <a-form-item
-        :label='$t("Feature Service Name")'
-        :rules="[{ required: true, message: 'Please input feature service name!' }]">
-        <a-select show-search id="itemSelect" v-model:value="testFormState.name" @change="updateSelectedService">
-          <option v-for="featureViewItem in featureServices" :value="featureViewItem.name">{{ featureViewItem.name }}</option>
-        </a-select>
-      </a-form-item>
-
+    <a-form :model="formState"
+      @submit="submitForm">
+    
       <a-form-item
-        :label='$t("Version")'
-        :rules="[{ required: false, message: 'Please input feature service version!' }]">
-        <a-select show-search id="itemSelect" v-model:value="testFormState.version" @change="updateSelectedService">
-          <option v-for="version in featureServiceVersions" :value="version">{{ version }}</option>
+        :label="$t('Choose Index')">
+        <!-- TODO: Do not support mode="multiple" now -->
+        <a-select show-search 
+          v-model:value="formState.chooseColumnNames"
+          @change="changeFilterColumnNames">
+          <option v-for="columnNames in allIndexColumnNamesList" :value="columnNames"></option>
         </a-select>
       </a-form-item>
 
-      <a-form-item
-        :label='$t("Request Schema")'>
-        <a-typography>
-          <a-typography-paragraph>
-            <pre>{{ requestSchema }}</pre>
-          </a-typography-paragraph>
-        </a-typography>
-      </a-form-item>
-
-      <p>
-        <span style="color:red;">* </span>{{ $t('Request Data') }}
-        &nbsp;&nbsp;<a-button size="small" @click="switchJsonTestData">{{ $t('Switch Json Data') }}</a-button>
-      </p>
-
-
 
-      <div v-if="isUseJsonTestData"> 
-        <a-form-item
-          :label='$t("Request Demo Data")'>
-          <a-typography>
-            <a-typography-paragraph>
-              <pre>{{ requestDemoData }}</pre>
-            </a-typography-paragraph>
-          </a-typography>
-        </a-form-item>
-
-        <a-form-item
-          :label='$t("Test Data")'
-          :rules="[{ required: true, message: 'Please input test data!' }]">
-          <a-textarea v-model:value="testFormState.jsonTestData" :rows="5"></a-textarea>
-        </a-form-item>
-      </div>
-
-
-      <div v-else>
-        <a-space
-        v-for="(column, index) in columns"
+      <a-space
+        v-for="(column, index) in formInputColumns"
         :key="column.name"
         style="display: flex; margin-bottom: 0px"
         align="baseline"
@@ -74,75 +36,75 @@
 
         <a-form-item
           :name="['columns', index, 'name']">
-          <a-input v-model:value="testFormState.columnDataList[index]" placeholder="" />
+          <a-input v-model:value="formState.columnDataList[index]" placeholder="" />
         </a-form-item>
       </a-space>
-      </div>
-
+  
+        <a-form-item>
+          <a-button type="primary" html-type="submit">{{ $t('Submit') }}</a-button>
+        </a-form-item>
     </a-form>
+  
+    <div v-if="isShowResult">
+      <br/>
+      <h2>{{ $t('Online Query Feature Result') }}</h2>
+      <a-table :dataSource="resultData" :columns="resultColumns">
+        <template #id="{ text, record }">
+          <a-button type="link" @click="openOfflineJobDrawer(record.id)">{{ record.id }}</a-button>
+        </template>
+      </a-table>
+    </div>
+  
   </div>
-
-</div>
-</template>
+  </template>
+    
+  <script>
+  import axios from 'axios'
+  import { notification } from 'ant-design-vue'
   
-<script>
-import axios from 'axios'
-import { notification } from 'ant-design-vue'
-import { Modal } from 'ant-design-vue'
-import { h } from 'vue';
-
-export default {
-  props: {
-    featureServiceName: {
-      type: String,
-      default: "",
+  export default {
+    props: {
+      name: {
+        type: String,
+        default: "",
+      },
+      version: {
+        type: String,
+        default: "",
+      }
     },
-    featureServiceVersion: {
-      type: String,
-      default: "",
-    }
-  },
+    
+    data() {
+      return {
+        featureNames: null,
   
-  data() {
-    return {
-      featureServices: [],
-
-      featureServiceVersions: [],
-
-      isUseJsonTestData: false,
-
-      testFormState: {
-        name: "",
-        version: "",
-        jsonTestData: "",
-        columnDataList: []
-      },
-
-      requestSchema: "",
-      requestDemoData: "",
+        formState: {
+          chooseColumnNames: [],
 
-      // Example: [{"name": "", "type": ""}]
-      columns: [],
+          columnDataList: []
+        },
 
-    };
-  },
+        // For exmaples: ["name", "name,age"]
+        allIndexColumnNamesList: [],
+        mainTableColumns: [],
+        formInputColumns: [],
 
-  mounted() {
-    this.initData();
-  },
-
-  // Use updated() instead mounted() for using latest feature service and version
-  updated() {
-    this.initData();
-  },
-
-  methods: {
-    updateSelectedService() {
-      if (this.testFormState.name != "") {
-
-        axios.get(`/api/featureservices/${this.testFormState.name}/versions`)
+        isShowResult: false,
+        resultColumns: [],
+        resultData: [],
+      };
+    },
+  
+    mounted() {
+      this.init();
+    },
+  
+    methods: {
+      init() {
+        axios.get(`/api/featureservices/${this.name}/${this.version}`)
           .then(response => {
-            this.featureServiceVersions = response.data;
+            this.featureNames = response.data.featureNames;
+  
           })
           .catch(error => {
             var errorMessage = error.message;
@@ -153,20 +115,12 @@ export default {
               message: this.$t('Execute Fail'),
               description: errorMessage
             });
-          });
+          })
+  
 
-        axios.get(`/api/featureservices/${this.testFormState.name}/${this.testFormState.version}/request/schema`)
+          axios.get(`/api/featureservices/${this.name}/${this.version}/indexes`)
           .then(response => {
-            this.requestSchema = response.data;
-
-            const columnList = response.data.split(",").map(obj => {
-              return {
-                "name": obj.split(":")[0],
-                "type": obj.split(":")[1]
-              }
-            })
-
-            this.columns = [...columnList]
+            this.allIndexColumnNamesList = response.data;
           })
           .catch(error => {
             var errorMessage = error.message;
@@ -180,9 +134,16 @@ export default {
           });
 
           
-        axios.get(`/api/featureservices/${this.testFormState.name}/${this.testFormState.version}/request/demo`)
+
+
+          axios.get(`/api/featureservices/${this.name}/${this.version}/request/schema`)
           .then(response => {
-            this.requestDemoData = response.data;
+            this.mainTableColumns = response.data.split(",").map(pair => {
+              return {
+                "name": pair.split(":")[0],
+                "type": pair.split(":")[1]
+              }
+            });
           })
           .catch(error => {
             var errorMessage = error.message;
@@ -193,84 +154,33 @@ export default {
               message: this.$t('Execute Fail'),
               description: errorMessage
             });
-          });   
-          
-          
-      }
-    },
-
-    initData() {
-      if (this.featureServiceName) {
-        this.testFormState.name = this.featureServiceName;
-
-        if (this.featureServiceVersion) {
-          this.testFormState.version = this.featureServiceVersion;
-        }
-
-        this.updateSelectedService();
-      }
-
-      axios.get(`/api/featureservices`)
-        .then(response => {
-          this.featureServices = response.data;
-        })
-        .catch(error => {
-          var errorMessage = error.message;
-          if (error.response && error.response.data) {
-            errorMessage = error.response.data;
-          }
-          notification["error"]({
-            message: this.$t('Execute Fail'),
-            description: errorMessage
           });
-        }); 
-    },
-
-    handleDelete(name) {
-      axios.delete(`/api/featureservices/${name}`)
-      .then(response => {
-        notification["success"]({
-              message: this.$t('Execute Success'),
-              description: `Success to delete feature service: ${name}`
-            });
-
-        this.initData();
-      })
-      .catch(error => {
-        var errorMessage = error.message;
-        if (error.response && error.response.data) {
-          errorMessage = error.response.data;
-        }
-        notification["error"]({
-          message: this.$t('Execute Fail'),
-          description: errorMessage
-        });
-      });
-    },
-
-    submitForm() {
-      var requestJson = {}
 
-      if (this.isUseJsonTestData) {
-        try {
-          requestJson = JSON.parse(this.testFormState.jsonTestData);
-        } catch (e) {
-          notification["error"]({
-            message: this.$t('Request Fail'),
-            description: e.message
-          });
-        }
+      },
 
-      } else {
-        // Construct single row data, example: {input: [ ["foo"] ]}
-        requestJson = {"input": []};
-        requestJson["input"][0] = [];
+      changeFilterColumnNames() {
+        const columnNameList = this.formState.chooseColumnNames.split(",")
 
-        const columnStringList = this.requestSchema.split(",")
-        for (var i=0; i< columnStringList.length; ++i) {
-          const type = columnStringList[i].split(":")[1];
+        this.formInputColumns = this.mainTableColumns.filter(item => columnNameList.includes(item.name));
+      },
+  
+      submitForm() {
+        var requestJson = {}
+  
+        // Construct single row data, example: {"index": ["name, age"], "data": [["John", 28]]}
+        requestJson = {};
+        requestJson["data"] = [];
+        requestJson["data"][0] = [];
+        requestJson["index"] = this.formInputColumns.map(item => item.name);
+
+        
+        for (var i=0; i< this.formInputColumns.length; ++i) {
+          console.log("index: " + i);
+          const type = this.formInputColumns[i]["type"];
+          console.log("type: " + type);
+          
+          const columnDataString = this.formState.columnDataList[i];
 
-          const columnDataString = this.testFormState.columnDataList[i];
           var columnData = columnDataString;
 
           if (type === "int16") {
@@ -298,56 +208,66 @@ export default {
             });
           }
 
-
-          requestJson["input"][0].push(columnData);
+          requestJson["data"][0].push(columnData);
         }
-      }
 
-      axios.post(`/api/featureservices/${this.testFormState.name}/${this.testFormState.version}/request`,
-        requestJson
-      )
-      .then(response => {
-        notification["success"]({
+        axios.post(`/api/featureservices/${this.name}/${this.version}/request/onlinequerymode`,
+          requestJson
+        )
+        .then(response => {
+            notification["success"]({
               message: this.$t('Execute Success'),
-              description: `Success to request feature service ${this.testFormState.name}`
+              description: "Success to request feature service"
             });
+  
+            this.isShowResult = true;
+
+            if (response.data.length > 0) {
+              const columnCount = response.data[0].length;
+
+              this.resultColumns = []
+              for (var i = 0; i < columnCount; i++) {
+                const columnName = response.data[0][i];
+                this.resultColumns.push({
+                  title: columnName,
+                  dataIndex: columnName,
+                  key: columnName
+                })
+              }
 
-        if (response.data.code == 0) {
-          Modal.success({
-            title: 'Request result',
-            content: h('div', {}, [
-              h('p', JSON.stringify(response.data.data)),
-            ]),
-            onOk() {},
-          });
-        } else {
+              this.resultData = []
+              for (var i = 1; i < response.data.length; i++) {
+                const row = response.data[i]
+                const rowDataMap = {}
+
+                for (var j = 0; j < columnCount; j++) {
+                  const columnName = response.data[0][j];
+                  const columnData = row[j];
+                  rowDataMap[columnName] = columnData;
+                }
+
+                this.resultData.push(rowDataMap);
+              }
+              
+            } else {
+              this.resultColumns = [];
+              this.resultData = [];
+            }
+
+
+        })
+        .catch(error => {
+          var errorMessage = error.message;
+          if (error.response && error.response.data) {
+            errorMessage = error.response.data;
+          }
           notification["error"]({
-              message: this.$t('Request Fail'),
-              description: `Error message: ${response.data.msg}, request json: ${requestJson}`
-            });
-        }
-      })
-      .catch(error => {
-        var errorMessage = error.message;
-        if (error.response && error.response.data) {
-          errorMessage = error.response.data;
-        }
-        notification["error"]({
-          message: this.$t('Execute Fail'),
-          description: errorMessage
+            message: this.$t('Execute Fail'),
+            description: errorMessage
+          });
         });
-      });
-    },
-
-    switchJsonTestData() {
-      if (this.isUseJsonTestData) {
-        this.isUseJsonTestData = false;
-      } else {
-        this.isUseJsonTestData = true;
       }
-      
+  
     }
-
-  }
-};
-</script>
\ No newline at end of file
+  };
+  </script>
\ No newline at end of file
diff --git a/frontend/src/components/featureservice/RequestFeatureService.vue b/frontend/src/components/featureservice/RequestFeatureService.vue
index 3546f3a..9572573 100644
--- a/frontend/src/components/featureservice/RequestFeatureService.vue
+++ b/frontend/src/components/featureservice/RequestFeatureService.vue
@@ -27,25 +27,6 @@
 
   <router-view></router-view>
 
-<!--
-  <a-typography>
-    <a-typography-paragraph>
-      <blockquote>
-        用户可以使用“请求模式”或“在线查询模式”来访问特征服务。
-        请求模式下用户需要输入整行主表数据通过 LastJoin 等方法提取副表特征。
-        在线查询模式则不需要传入数据，直接查询在线表的特征数据，并且可以通过主键进行数据过滤。
-      </blockquote>
-    </a-typography-paragraph>
-  </a-typography>
-
-
-  <br/>
-  <a-descriptions bordered>
-    <a-descriptions-item :span="24" :label="$t('Name')">{{ data.name }}</a-descriptions-item>
-    <a-descriptions-item :span="24" :label="$t('Version')"> {{ data.version }}</a-descriptions-item>
-    <a-descriptions-item :span="24" :label="$t('Feature Names')">{{ data.featureNames }}</a-descriptions-item>
-  </a-descriptions>
--->
 </div>
 </template>
     
diff --git a/frontend/src/components/featureservice/RequestModePage.vue b/frontend/src/components/featureservice/RequestModePage.vue
index f10ef8b..65d3f39 100644
--- a/frontend/src/components/featureservice/RequestModePage.vue
+++ b/frontend/src/components/featureservice/RequestModePage.vue
@@ -3,11 +3,10 @@
 <div>
 
   <br/>
-
   <a-descriptions bordered>
     <a-descriptions-item :span="24" :label="$t('Name')">{{ name }}</a-descriptions-item>
     <a-descriptions-item :span="24" :label="$t('Version')"> {{ version }}</a-descriptions-item>
-    <!--<a-descriptions-item :span="24" :label="$t('Feature Names')">{{ data.featureNames }}</a-descriptions-item>-->
+    <a-descriptions-item :span="24" :label="$t('Feature Names')">{{ featureNames }}</a-descriptions-item>
     <a-descriptions-item :span="24" :label="$t('Request Schema')"> {{ requestSchema }}</a-descriptions-item>
     <a-descriptions-item :span="24" :label="$t('Request Demo Data')"> {{ requestDemoData }}</a-descriptions-item>
   </a-descriptions>
@@ -87,6 +86,7 @@ export default {
   
   data() {
     return {
+      featureNames: null,
 
       isUseJsonTestData: false,
 
@@ -111,6 +111,22 @@ export default {
 
   methods: {
     init() {
+      axios.get(`/api/featureservices/${this.name}/${this.version}`)
+        .then(response => {
+          this.featureNames = response.data.featureNames;
+
+        })
+        .catch(error => {
+          var errorMessage = error.message;
+          if (error.response && error.response.data) {
+            errorMessage = error.response.data;
+          }
+          notification["error"]({
+            message: this.$t('Execute Fail'),
+            description: errorMessage
+          });
+        })
+
         axios.get(`/api/featureservices/${this.name}/${this.version}/request/schema`)
           .then(response => {
             this.requestSchema = response.data;
@@ -152,7 +168,6 @@ export default {
           });   
     },
 
-
     submitForm() {
       var requestJson = {}
 
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 0e521e2..7bbdb9c 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -255,6 +255,8 @@
     "Refresh Status": "Refresh Status",
     "Filter SQL": "Filter SQL",
     "Add Index": "Add Index",
-    "Request Feature Service": "Request Feature Service"
+    "Request Feature Service": "Request Feature Service",
+    "Choose Index": "Choose Index",
+    "Online Query Feature Result": "Online Query Feature Result"
 
 }
\ No newline at end of file
diff --git a/frontend/src/locales/zh.json b/frontend/src/locales/zh.json
index 94a6a45..e046ef1 100644
--- a/frontend/src/locales/zh.json
+++ b/frontend/src/locales/zh.json
@@ -257,6 +257,8 @@
     "Refresh Status": "刷新状态",
     "Filter SQL": "过滤数据 SQL",
     "Add Index": "添加索引",
-    "Request Feature Service": "请求特征服务"
+    "Request Feature Service": "请求特征服务",
+    "Choose Index": "选择索引",
+    "Online Query Feature Result": "在线查询特征结果"
 
 }
\ No newline at end of file
diff --git a/src/main/java/com/_4paradigm/openmldb/featureplatform/controller/FeatureServiceController.java b/src/main/java/com/_4paradigm/openmldb/featureplatform/controller/FeatureServiceController.java
index 2810cfd..9e49db1 100644
--- a/src/main/java/com/_4paradigm/openmldb/featureplatform/controller/FeatureServiceController.java
+++ b/src/main/java/com/_4paradigm/openmldb/featureplatform/controller/FeatureServiceController.java
@@ -152,6 +152,17 @@ public ResponseEntity<String> requestFeatureService(@PathVariable String name, @
         }
     }
 
+    @PostMapping(value = "/{name}/{version}/request/onlinequerymode", consumes = MediaType.APPLICATION_JSON_VALUE)
+    public ResponseEntity<List<List<String>>> requestOnlineQueryMode(@PathVariable String name, @PathVariable String version, @RequestBody String dataRequest) throws SQLException {
+        try {
+            //tobe1
+            return ResponseEntity.ok(featureServiceService.requestOnlineQueryMode(name, version, dataRequest));
+        } catch (Exception e) {
+            logger.info(String.format("Call requestOnlineQueryMode with %s, %s and %s but get exception: %s", name, version, dataRequest, e.getMessage()));
+            throw new SQLException(e.getMessage());
+        }
+    }
+
     @GetMapping("/{name}/{version}/request/schema")
     public ResponseEntity<String> getRequestSchema(@PathVariable String name, @PathVariable String version) throws SQLException {
         try {
@@ -257,4 +268,15 @@ public ResponseEntity<String> getOutputSchema(@PathVariable String name, @PathVa
         }
     }
 
+    @GetMapping("/{name}/{version}/indexes")
+    public ResponseEntity<List<String>> getIndexNames(@PathVariable String name, @PathVariable String version) throws SQLException {
+        try {
+            return new ResponseEntity<>(featureServiceService.getIndexNames(name, version), HttpStatus.OK);
+        } catch (SQLException e) {
+            logger.info(String.format("Call getRequestSchema with %s and %s but get exception: %s", name, version, e.getMessage()));
+            throw new SQLException(e.getMessage());
+        }
+    }
+
+
 }
\ No newline at end of file
diff --git a/src/main/java/com/_4paradigm/openmldb/featureplatform/service/FeatureServiceService.java b/src/main/java/com/_4paradigm/openmldb/featureplatform/service/FeatureServiceService.java
index e8e6296..d3709aa 100644
--- a/src/main/java/com/_4paradigm/openmldb/featureplatform/service/FeatureServiceService.java
+++ b/src/main/java/com/_4paradigm/openmldb/featureplatform/service/FeatureServiceService.java
@@ -3,9 +3,16 @@
 import com._4paradigm.openmldb.common.Pair;
 import com._4paradigm.openmldb.featureplatform.dao.model.*;
 import com._4paradigm.openmldb.featureplatform.utils.*;
+import com._4paradigm.openmldb.jdbc.SQLResultSet;
+import com._4paradigm.openmldb.proto.Common;
+import com._4paradigm.openmldb.proto.NS;
 import com._4paradigm.openmldb.sdk.Column;
 import com._4paradigm.openmldb.sdk.Schema;
 import com._4paradigm.openmldb.sdk.impl.SqlClusterExecutor;
+import com.google.gson.Gson;
+import com.google.gson.JsonArray;
+import com.google.gson.JsonElement;
+import com.google.gson.JsonObject;
 import org.apache.http.HttpEntity;
 import org.apache.http.HttpResponse;
 import org.apache.http.client.HttpClient;
@@ -22,6 +29,7 @@
 import java.sql.ResultSet;
 import java.sql.SQLException;
 import java.sql.Statement;
+import java.sql.Types;
 import java.util.*;
 
 @Repository
@@ -356,32 +364,100 @@ public ResponseEntity<String> requestFeatureService(String name, String version,
         return new ResponseEntity<String>(responseBody, HttpStatus.valueOf(statusCode));
     }
 
-    public static String removeDeploySubstring(String inputSql) {
-        int substringIndex = inputSql.toLowerCase().indexOf("select");
+    public List<List<String>> requestOnlineQueryMode(String name, String version, String requestData) throws IOException, SQLException {
+        // TODO: Get the db from feature service
+        FeatureServiceService featureServiceService = new FeatureServiceService(sqlExecutor);
+        FeatureService featureService = featureServiceService.getFeatureServiceByNameAndVersion(name, version);
+        String db = featureService.getDb();
+        String deploymentSql = featureService.getSql();
 
-        if (substringIndex >= 0) {
-            return inputSql.substring(substringIndex);
-        } else {
-            return inputSql;
+        String querySql = OpenmldbSqlUtil.removeDeployFromSql(deploymentSql);
+
+        Schema schema = OpenmldbTableUtil.getMainTableSchema(sqlExecutor, querySql, db);
+
+        Gson gson = new Gson();
+        JsonObject jsonObject = gson.fromJson(requestData, JsonObject.class);
+        JsonArray dataJsonArray = jsonObject.getAsJsonArray("data");
+        JsonArray indexJsonArray = jsonObject.getAsJsonArray("index");
+
+        // TODO: Support only one index now
+        String indexName = indexJsonArray.get(0).getAsString();
+        String indexDataValue = dataJsonArray.getAsJsonArray().get(0).getAsString();
+
+        boolean isIndexStringType = false;
+        for (Column column: schema.getColumnList()) {
+            if (column.getColumnName().equals(indexName)) {
+                if(column.getSqlType() == Types.CHAR || column.getSqlType() == Types.VARCHAR) {
+                    isIndexStringType = true;
+                }
+            }
         }
+
+        String finalSql = String.format("%s WHERE %s = %s", querySql, indexName, indexDataValue);
+        if (isIndexStringType) {
+            // TODO: Handle single quote and double quote
+            finalSql = String.format("%s WHERE %s = '%s'", querySql, indexName, indexDataValue);
+        }
+
+        Statement statement = sqlExecutor.getStatement();
+        statement.execute("SET @@execute_mode='online'");
+        statement.execute(String.format("USE %s", db));
+
+        statement.execute(finalSql);
+
+        List<List<String>> returnList = new ArrayList<>();
+
+        // TODO: Check if has result set
+        SQLResultSet resultSet = (SQLResultSet) statement.getResultSet();
+        returnList = ResultSetUtil.resultSetToStringArray(resultSet);
+        resultSet.close();
+
+        return returnList;
+
     }
 
+    public List<String> getIndexNames(String name, String version) throws SQLException {
+
+        FeatureServiceService featureServiceService = new FeatureServiceService(sqlExecutor);
+        FeatureService featureService = featureServiceService.getFeatureServiceByNameAndVersion(name, version);
+        String db = featureService.getDb();
+        String deploymentSql = featureService.getSql();
+
+        String querySql = OpenmldbSqlUtil.removeDeployFromSql(deploymentSql);
+
+        String mainTableName = OpenmldbTableUtil.getMainTableName(sqlExecutor, querySql, db);
+
+        NS.TableInfo tableInfo = sqlExecutor.getTableInfo(db, mainTableName);
+
+        // For example: ["name", "name,age"]
+        List<String> indexColumnNames = new ArrayList<>();
+
+
+        for (Common.ColumnKey columnKey: tableInfo.getColumnKeyList()) {
+            if(columnKey.getFlag() == 0){
+                List<String> columnNameList = new ArrayList<>();
+                for (String columnName: columnKey.getColNameList()) {
+                    columnNameList.add(columnName);
+                }
+
+                indexColumnNames.add(String.join(",", columnNameList));
+            }
+        }
+
+        return indexColumnNames;
+    }
+
+
+
     public Schema getRequestSchema(String serviceName, String version) throws SQLException {
         FeatureService featureService = getFeatureServiceByNameAndVersion(serviceName, version);
         String sql = featureService.getSql();
         String db = featureService.getDb();
 
-        String selectSql = removeDeploySubstring(sql);
-
-        List<Pair<String, String>> tables = SqlClusterExecutor.getDependentTables(selectSql, db,
-                OpenmldbTableUtil.getSystemSchemaMaps(sqlExecutor));
-
-        Pair<String, String> mainTablePair = tables.get(0);
+        String selectSql = OpenmldbSqlUtil.removeDeployFromSql(sql);
 
-        String mainDb = mainTablePair.getKey();
-        String mainTable = mainTablePair.getValue();
 
-        Schema schema = sqlExecutor.getTableSchema(mainDb, mainTable);
+        Schema schema = OpenmldbTableUtil.getMainTableSchema(sqlExecutor, selectSql, db);
         return schema;
     }
 
@@ -439,7 +515,7 @@ public String getLatestVersion(String serviceName) throws SQLException {
     public List<String> getDependentTables(String name, String version) throws SQLException {
         FeatureService featureService = getFeatureServiceByNameAndVersion(name, version);
 
-        String selectSql = removeDeploySubstring(featureService.getSql());
+        String selectSql = OpenmldbSqlUtil.removeDeployFromSql(featureService.getSql());
 
         List<Pair<String, String>> tables = SqlClusterExecutor.getDependentTables(selectSql,
                 featureService.getDb(), OpenmldbTableUtil.getSystemSchemaMaps(sqlExecutor));
@@ -461,7 +537,7 @@ public Schema getOutputSchema(String serviceName, String version) throws SQLExce
         String sql = featureService.getSql();
         String db = featureService.getDb();
 
-        String selectSql = removeDeploySubstring(sql);
+        String selectSql = OpenmldbSqlUtil.removeDeployFromSql(sql);
 
         Schema schema = SqlClusterExecutor.genOutputSchema(selectSql, db, OpenmldbTableUtil.getSystemSchemaMaps(sqlExecutor));
         return schema;
diff --git a/src/main/java/com/_4paradigm/openmldb/featureplatform/service/TableService.java b/src/main/java/com/_4paradigm/openmldb/featureplatform/service/TableService.java
index c53423e..f92bd59 100644
--- a/src/main/java/com/_4paradigm/openmldb/featureplatform/service/TableService.java
+++ b/src/main/java/com/_4paradigm/openmldb/featureplatform/service/TableService.java
@@ -4,6 +4,7 @@
 import com._4paradigm.openmldb.featureplatform.dao.model.FeatureService;
 import com._4paradigm.openmldb.featureplatform.dao.model.FeatureView;
 import com._4paradigm.openmldb.featureplatform.dao.model.SimpleTableInfo;
+import com._4paradigm.openmldb.featureplatform.utils.OpenmldbSqlUtil;
 import com._4paradigm.openmldb.featureplatform.utils.OpenmldbTableUtil;
 import com._4paradigm.openmldb.sdk.Schema;
 import com._4paradigm.openmldb.sdk.impl.SqlClusterExecutor;
@@ -63,7 +64,7 @@ public List<FeatureService> getRelatedFeatureServices(String db, String table) t
 
         for (FeatureService featureService : allFeatureServices) {
 
-            String selectSql = FeatureServiceService.removeDeploySubstring(featureService.getSql());
+            String selectSql = OpenmldbSqlUtil.removeDeployFromSql(featureService.getSql());
 
             List<Pair<String, String>> dependentTables = SqlClusterExecutor.getDependentTables(selectSql,
                     featureService.getDb(), OpenmldbTableUtil.getSystemSchemaMaps(sqlExecutor));
@@ -117,4 +118,6 @@ public void deleteTable(String db, String table) throws SQLException {
         statement.close();
     }
 
+
+
 }
\ No newline at end of file
diff --git a/src/main/java/com/_4paradigm/openmldb/featureplatform/utils/OpenmldbSqlUtil.java b/src/main/java/com/_4paradigm/openmldb/featureplatform/utils/OpenmldbSqlUtil.java
new file mode 100644
index 0000000..6b77fdd
--- /dev/null
+++ b/src/main/java/com/_4paradigm/openmldb/featureplatform/utils/OpenmldbSqlUtil.java
@@ -0,0 +1,30 @@
+package com._4paradigm.openmldb.featureplatform.utils;
+
+import com._4paradigm.openmldb.common.Pair;
+import com._4paradigm.openmldb.sdk.Schema;
+import com._4paradigm.openmldb.sdk.impl.SqlClusterExecutor;
+
+import java.sql.SQLException;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+public class OpenmldbSqlUtil {
+
+    public static String removeDeployFromSql(String inputSql) {
+        String[] parts = inputSql.trim().split(" ");
+
+        // Using StringBuilder to concatenate strings efficiently
+        StringBuilder sb = new StringBuilder();
+        for (int i = 2; i < parts.length; i++) {
+            sb.append(parts[i]);
+            // Add space back except for the last element
+            if (i < parts.length - 1) {
+                sb.append(" ");
+            }
+        }
+
+        return sb.toString();
+    }
+
+}
\ No newline at end of file
diff --git a/src/main/java/com/_4paradigm/openmldb/featureplatform/utils/OpenmldbTableUtil.java b/src/main/java/com/_4paradigm/openmldb/featureplatform/utils/OpenmldbTableUtil.java
index 84d1255..89205ea 100644
--- a/src/main/java/com/_4paradigm/openmldb/featureplatform/utils/OpenmldbTableUtil.java
+++ b/src/main/java/com/_4paradigm/openmldb/featureplatform/utils/OpenmldbTableUtil.java
@@ -1,5 +1,6 @@
 package com._4paradigm.openmldb.featureplatform.utils;
 
+import com._4paradigm.openmldb.common.Pair;
 import com._4paradigm.openmldb.sdk.Schema;
 import com._4paradigm.openmldb.sdk.impl.SqlClusterExecutor;
 
@@ -28,5 +29,27 @@ public static Map<String, Map<String, Schema>> getSystemSchemaMaps(SqlClusterExe
         return schemaMaps;
     }
 
+    public static Schema getMainTableSchema(SqlClusterExecutor sqlExecutor, String sql, String db) throws SQLException {
+        List<Pair<String, String>> tables = SqlClusterExecutor.getDependentTables(sql, db,
+                OpenmldbTableUtil.getSystemSchemaMaps(sqlExecutor));
+
+        Pair<String, String> mainTablePair = tables.get(0);
+
+        String mainDb = mainTablePair.getKey();
+        String mainTable = mainTablePair.getValue();
+
+        Schema schema = sqlExecutor.getTableSchema(mainDb, mainTable);
+        return schema;
+    }
+
+    public static String getMainTableName(SqlClusterExecutor sqlExecutor, String sql, String db) throws SQLException {
+        List<Pair<String, String>> tables = SqlClusterExecutor.getDependentTables(sql, db,
+                OpenmldbTableUtil.getSystemSchemaMaps(sqlExecutor));
+
+        Pair<String, String> mainTablePair = tables.get(0);
+
+        String mainTable = mainTablePair.getValue();
+        return mainTable;
+    }
 
 }
\ No newline at end of file

From 57eab0a9e3c9b5906147fcc717b0e185e6a2b182 Mon Sep 17 00:00:00 2001
From: tobe <tobeg3oogle@gmail.com>
Date: Thu, 4 Jan 2024 14:44:37 +0800
Subject: [PATCH 3/4] Add main table in online query mode

---
 .../featureservice/OnlineQueryModePage.vue    | 49 ++++++++++++++++--
 .../components/importdata/ImportDataMenu.vue  |  3 +-
 frontend/src/locales/en.json                  |  3 +-
 frontend/src/locales/zh.json                  |  3 +-
 .../controller/FeatureServiceController.java  | 11 ++++
 .../dao/model/DatabaseTable.java              | 18 +++++++
 .../service/FeatureServiceService.java        | 50 +++++++++++++------
 .../featureplatform/service/SqlService.java   |  2 +-
 .../utils/OpenmldbTableUtil.java              | 10 ++++
 9 files changed, 124 insertions(+), 25 deletions(-)
 create mode 100644 src/main/java/com/_4paradigm/openmldb/featureplatform/dao/model/DatabaseTable.java

diff --git a/frontend/src/components/featureservice/OnlineQueryModePage.vue b/frontend/src/components/featureservice/OnlineQueryModePage.vue
index dad1bb2..bdd8e3c 100644
--- a/frontend/src/components/featureservice/OnlineQueryModePage.vue
+++ b/frontend/src/components/featureservice/OnlineQueryModePage.vue
@@ -1,4 +1,10 @@
 <template>
+  <a-drawer
+    v-model:visible="isOpenTableDrawer"
+    size="large"
+    :title="$t('Table') + $t('Detail')">
+    <TableDetail :db="currentDrawerDatabase" :name="currentDrawerTable" :key="currentDrawerDatabase+currentDrawerTable"></TableDetail>
+  </a-drawer>
 
   <div>
   
@@ -7,9 +13,11 @@
       <a-descriptions-item :span="24" :label="$t('Name')">{{ name }}</a-descriptions-item>
       <a-descriptions-item :span="24" :label="$t('Version')"> {{ version }}</a-descriptions-item>
       <a-descriptions-item :span="24" :label="$t('Feature Names')">{{ featureNames }}</a-descriptions-item>
-      
+      <a-descriptions-item :span="24" :label="$t('Feature Table')">
+        <a-button type="link" @click="openTableDrawer(mainTable.database, mainTable.table)">{{ mainTable.database + "." + mainTable.table }}</a-button>
+      </a-descriptions-item>
     </a-descriptions>
-  
+
     <br/>
     <!-- Test form -->
     <a-form :model="formState"
@@ -61,8 +69,13 @@
   <script>
   import axios from 'axios'
   import { notification } from 'ant-design-vue'
+  import TableDetail from '@/components/table/TableDetail.vue'
   
   export default {
+    components: {
+      TableDetail
+    },
+
     props: {
       name: {
         type: String,
@@ -77,7 +90,13 @@
     data() {
       return {
         featureNames: null,
-  
+
+        mainTable: {},
+
+        isOpenTableDrawer: false,
+        currentDrawerDatabase: "",
+        currentDrawerTable: "",
+
         formState: {
           chooseColumnNames: [],
 
@@ -101,6 +120,7 @@
   
     methods: {
       init() {
+
         axios.get(`/api/featureservices/${this.name}/${this.version}`)
           .then(response => {
             this.featureNames = response.data.featureNames;
@@ -116,9 +136,24 @@
               description: errorMessage
             });
           })
+
+        axios.get(`/api/featureservices/${this.name}/${this.version}/maintable`)
+          .then(response => {
+            this.mainTable = response.data;
+          })
+          .catch(error => {
+            var errorMessage = error.message;
+            if (error.response && error.response.data) {
+              errorMessage = error.response.data;
+            }
+            notification["error"]({
+              message: this.$t('Execute Fail'),
+              description: errorMessage
+            });
+          })
   
 
-          axios.get(`/api/featureservices/${this.name}/${this.version}/indexes`)
+        axios.get(`/api/featureservices/${this.name}/${this.version}/indexes`)
           .then(response => {
             this.allIndexColumnNamesList = response.data;
           })
@@ -164,6 +199,12 @@
         this.formInputColumns = this.mainTableColumns.filter(item => columnNameList.includes(item.name));
       },
   
+      openTableDrawer(db, table) {
+        this.isOpenTableDrawer = true;
+        this.currentDrawerDatabase = db;
+        this.currentDrawerTable = table;
+      },
+
       submitForm() {
         var requestJson = {}
   
diff --git a/frontend/src/components/importdata/ImportDataMenu.vue b/frontend/src/components/importdata/ImportDataMenu.vue
index fd55b92..0f5fec7 100644
--- a/frontend/src/components/importdata/ImportDataMenu.vue
+++ b/frontend/src/components/importdata/ImportDataMenu.vue
@@ -18,11 +18,10 @@
     <router-link to='/developprocess/import/offline'>{{ $t('Import Offline Data')}}</router-link>
   </a-menu-item>
 
-  <!--
   <a-menu-item key="5">
     <router-link to='/developprocess/import/index'>{{ $t('Add Index')}}</router-link>
   </a-menu-item>
-  -->
+
 </a-menu>
 
 <router-view></router-view>
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 7bbdb9c..eb38969 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -257,6 +257,7 @@
     "Add Index": "Add Index",
     "Request Feature Service": "Request Feature Service",
     "Choose Index": "Choose Index",
-    "Online Query Feature Result": "Online Query Feature Result"
+    "Online Query Feature Result": "Online Query Feature Result",
+    "Feature Table": "Feature Table"
 
 }
\ No newline at end of file
diff --git a/frontend/src/locales/zh.json b/frontend/src/locales/zh.json
index e046ef1..d2142db 100644
--- a/frontend/src/locales/zh.json
+++ b/frontend/src/locales/zh.json
@@ -259,6 +259,7 @@
     "Add Index": "添加索引",
     "Request Feature Service": "请求特征服务",
     "Choose Index": "选择索引",
-    "Online Query Feature Result": "在线查询特征结果"
+    "Online Query Feature Result": "在线查询特征结果",
+    "Feature Table": "特征表"
 
 }
\ No newline at end of file
diff --git a/src/main/java/com/_4paradigm/openmldb/featureplatform/controller/FeatureServiceController.java b/src/main/java/com/_4paradigm/openmldb/featureplatform/controller/FeatureServiceController.java
index 9e49db1..8b441f1 100644
--- a/src/main/java/com/_4paradigm/openmldb/featureplatform/controller/FeatureServiceController.java
+++ b/src/main/java/com/_4paradigm/openmldb/featureplatform/controller/FeatureServiceController.java
@@ -1,5 +1,6 @@
 package com._4paradigm.openmldb.featureplatform.controller;
 
+import com._4paradigm.openmldb.featureplatform.dao.model.DatabaseTable;
 import com._4paradigm.openmldb.featureplatform.service.FeatureServiceService;
 import com._4paradigm.openmldb.featureplatform.dao.model.FeatureService;
 import com._4paradigm.openmldb.featureplatform.dao.model.UpdateLatestVersionRequest;
@@ -278,5 +279,15 @@ public ResponseEntity<List<String>> getIndexNames(@PathVariable String name, @Pa
         }
     }
 
+    @GetMapping("/{name}/{version}/maintable")
+    public ResponseEntity<DatabaseTable> getMainTable(@PathVariable String name, @PathVariable String version) throws SQLException {
+        try {
+            return new ResponseEntity<>(featureServiceService.getMainTable(name, version), HttpStatus.OK);
+        } catch (SQLException e) {
+            logger.info(String.format("Call getRequestSchema with %s and %s but get exception: %s", name, version, e.getMessage()));
+            throw new SQLException(e.getMessage());
+        }
+    }
+
 
 }
\ No newline at end of file
diff --git a/src/main/java/com/_4paradigm/openmldb/featureplatform/dao/model/DatabaseTable.java b/src/main/java/com/_4paradigm/openmldb/featureplatform/dao/model/DatabaseTable.java
new file mode 100644
index 0000000..4a06cce
--- /dev/null
+++ b/src/main/java/com/_4paradigm/openmldb/featureplatform/dao/model/DatabaseTable.java
@@ -0,0 +1,18 @@
+package com._4paradigm.openmldb.featureplatform.dao.model;
+
+import lombok.Data;
+
+@Data
+public class DatabaseTable {
+
+    private String database;
+    private String table;
+
+    public DatabaseTable() {
+    }
+
+    public DatabaseTable(String database, String table) {
+        this.database = database;
+        this.table = table;
+    }
+}
diff --git a/src/main/java/com/_4paradigm/openmldb/featureplatform/service/FeatureServiceService.java b/src/main/java/com/_4paradigm/openmldb/featureplatform/service/FeatureServiceService.java
index d3709aa..237777a 100644
--- a/src/main/java/com/_4paradigm/openmldb/featureplatform/service/FeatureServiceService.java
+++ b/src/main/java/com/_4paradigm/openmldb/featureplatform/service/FeatureServiceService.java
@@ -373,30 +373,39 @@ public List<List<String>> requestOnlineQueryMode(String name, String version, St
 
         String querySql = OpenmldbSqlUtil.removeDeployFromSql(deploymentSql);
 
-        Schema schema = OpenmldbTableUtil.getMainTableSchema(sqlExecutor, querySql, db);
-
         Gson gson = new Gson();
         JsonObject jsonObject = gson.fromJson(requestData, JsonObject.class);
         JsonArray dataJsonArray = jsonObject.getAsJsonArray("data");
         JsonArray indexJsonArray = jsonObject.getAsJsonArray("index");
 
-        // TODO: Support only one index now
-        String indexName = indexJsonArray.get(0).getAsString();
-        String indexDataValue = dataJsonArray.getAsJsonArray().get(0).getAsString();
+        // TODO: Only Support one row, need to support 'select * from t1 where (name, gender) in (("tobe", "male"))'
 
-        boolean isIndexStringType = false;
-        for (Column column: schema.getColumnList()) {
-            if (column.getColumnName().equals(indexName)) {
-                if(column.getSqlType() == Types.CHAR || column.getSqlType() == Types.VARCHAR) {
-                    isIndexStringType = true;
-                }
+        List<String> indexNames = new ArrayList<>();
+        for (JsonElement element: indexJsonArray) {
+            indexNames.add(element.getAsString());
+        }
+
+        List<String> indexDataValues = new ArrayList<>();
+
+
+        for (JsonElement dataElement : dataJsonArray) {
+            JsonArray innerArray = dataElement.getAsJsonArray();
+
+            for (JsonElement innerElement : innerArray) {
+                indexDataValues.add(innerElement.getAsString());
             }
         }
 
-        String finalSql = String.format("%s WHERE %s = %s", querySql, indexName, indexDataValue);
-        if (isIndexStringType) {
-            // TODO: Handle single quote and double quote
-            finalSql = String.format("%s WHERE %s = '%s'", querySql, indexName, indexDataValue);
+        String finalSql = querySql;
+        for (int i=0; i<indexNames.size(); ++i) {
+
+            if (i == 0) {
+                // TODO: Handle single quote and double quote
+                finalSql += String.format(" WHERE %s = '%s'", indexNames.get(i), indexDataValues.get(i));
+            } else {
+                finalSql += String.format(" AND %s = '%s'", indexNames.get(i), indexDataValues.get(i));
+            }
+
         }
 
         Statement statement = sqlExecutor.getStatement();
@@ -413,7 +422,6 @@ public List<List<String>> requestOnlineQueryMode(String name, String version, St
         resultSet.close();
 
         return returnList;
-
     }
 
     public List<String> getIndexNames(String name, String version) throws SQLException {
@@ -547,4 +555,14 @@ public Schema getOutputSchema(String serviceName) throws SQLException {
         String latestVersion = getLatestVersion(serviceName);
         return getOutputSchema(serviceName, latestVersion);
     }
+
+    public DatabaseTable getMainTable(String name, String version) throws SQLException {
+        FeatureService featureService = getFeatureServiceByNameAndVersion(name, version);
+        String sql = featureService.getSql();
+        String db = featureService.getDb();
+
+        String selectSql = OpenmldbSqlUtil.removeDeployFromSql(sql);
+
+        return OpenmldbTableUtil.getMainTable(sqlExecutor, selectSql, db);
+    }
 }
\ No newline at end of file
diff --git a/src/main/java/com/_4paradigm/openmldb/featureplatform/service/SqlService.java b/src/main/java/com/_4paradigm/openmldb/featureplatform/service/SqlService.java
index d9fb9b9..4d70d32 100644
--- a/src/main/java/com/_4paradigm/openmldb/featureplatform/service/SqlService.java
+++ b/src/main/java/com/_4paradigm/openmldb/featureplatform/service/SqlService.java
@@ -112,7 +112,7 @@ public List<List<String>> executeOnlineSql(String sql, String sparkConfig) throw
         }
 
         String lastSql = sqls[sqls.length - 1].trim();
-        if (lastSql.isEmpty()) {
+        if (lastSql.isEmpty() && sqls.length >= 2) {
             lastSql = sqls[sqls.length - 2].trim();
         }
 
diff --git a/src/main/java/com/_4paradigm/openmldb/featureplatform/utils/OpenmldbTableUtil.java b/src/main/java/com/_4paradigm/openmldb/featureplatform/utils/OpenmldbTableUtil.java
index 89205ea..306967b 100644
--- a/src/main/java/com/_4paradigm/openmldb/featureplatform/utils/OpenmldbTableUtil.java
+++ b/src/main/java/com/_4paradigm/openmldb/featureplatform/utils/OpenmldbTableUtil.java
@@ -1,6 +1,7 @@
 package com._4paradigm.openmldb.featureplatform.utils;
 
 import com._4paradigm.openmldb.common.Pair;
+import com._4paradigm.openmldb.featureplatform.dao.model.DatabaseTable;
 import com._4paradigm.openmldb.sdk.Schema;
 import com._4paradigm.openmldb.sdk.impl.SqlClusterExecutor;
 
@@ -52,4 +53,13 @@ public static String getMainTableName(SqlClusterExecutor sqlExecutor, String sql
         return mainTable;
     }
 
+    public static DatabaseTable getMainTable(SqlClusterExecutor sqlExecutor, String sql, String db) throws SQLException {
+        List<Pair<String, String>> tables = SqlClusterExecutor.getDependentTables(sql, db,
+                OpenmldbTableUtil.getSystemSchemaMaps(sqlExecutor));
+
+        Pair<String, String> mainTablePair = tables.get(0);
+
+        return new DatabaseTable(mainTablePair.getKey(), mainTablePair.getValue());
+    }
+
 }
\ No newline at end of file

From 36a8c98e9e5ef4ae1c18e23933480d13195af804 Mon Sep 17 00:00:00 2001
From: tobe <tobeg3oogle@gmail.com>
Date: Wed, 10 Jan 2024 15:15:27 +0800
Subject: [PATCH 4/4] Refine for computed features

---
 frontend/src/components/BigScreenPage.vue     |   2 +-
 frontend/src/components/Home.vue              |  13 +-
 frontend/src/components/OfflineScenario.vue   |   8 +-
 frontend/src/components/OnlineScenario.vue    |   8 +-
 frontend/src/components/SqlScenario.vue       |   4 +-
 frontend/src/components/SqlUsageDoc.vue       |   6 +-
 .../computedfeatures/ComputedFeaturesPage.vue | 325 ++++++++++++++++++
 .../src/components/feature/FeatureDetail.vue  | 169 ++++++++-
 .../featureservice/OnlineQueryModePage.vue    | 140 ++++++--
 .../featureservice/RequestFeatureService.vue  |  15 +-
 .../components/form/InsertSingleRowForm.vue   |   2 +-
 .../components/importdata/ImportDataMenu.vue  |   3 +-
 frontend/src/locales/en.json                  |  21 +-
 frontend/src/locales/zh.json                  |  23 +-
 frontend/src/router/index.js                  |   2 +
 .../controller/FeatureController.java         |  21 ++
 .../controller/FeatureServiceController.java  |  11 +-
 .../controller/TableController.java           |  12 +
 .../service/DatabaseService.java              |   8 +-
 .../service/FeatureServiceService.java        |  26 +-
 .../service/FeaturesService.java              |  38 ++
 .../featureplatform/service/TableService.java |  36 +-
 22 files changed, 808 insertions(+), 85 deletions(-)
 create mode 100644 frontend/src/components/computedfeatures/ComputedFeaturesPage.vue

diff --git a/frontend/src/components/BigScreenPage.vue b/frontend/src/components/BigScreenPage.vue
index ea6ada5..035e65f 100644
--- a/frontend/src/components/BigScreenPage.vue
+++ b/frontend/src/components/BigScreenPage.vue
@@ -9,7 +9,7 @@
     <a-typography-title>{{ $t('Feature Platform') }}</a-typography-title>
     <a-typography-paragraph>
       <blockquote>
-        OpenMLDB 特征平台是基于特征数据库实现的 Feature Store 服务，用户使用 SQL 来定义特征，离线场景中选择特征生成离线样本，在线场景中选择特征实现实时特征计算。
+        {{ $t('Text of Introduce OpenMLDB') }}
       </blockquote>
     </a-typography-paragraph>
   </a-typography>
diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
index a57d73e..1646f2f 100644
--- a/frontend/src/components/Home.vue
+++ b/frontend/src/components/Home.vue
@@ -5,7 +5,7 @@
 
 <a-layout class="layout">
   <a-layout-sider :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: 0, bottom: 0 }">
-    <a-menu theme="dark" mode="inline" class="navi-menu" :openKeys="['whole_process_wizard', 'advanced_management', 'languages']">
+    <a-menu theme="dark" mode="inline" class="navi-menu" :openKeys="['whole_process_wizard', 'advanced_usage', 'advanced_management', 'languages']">
 
       <a-menu-item key="bigscrren">
         <router-link to='/'>{{ $t('Feature Big Screen') }}</router-link>
@@ -25,9 +25,18 @@
         <a-menu-item key="online">
           <router-link to='/developprocess/online'>{{ $t('Online Scenario') }}</router-link>
         </a-menu-item>
+      </a-sub-menu>
+
+      <a-sub-menu key="advanced_usage">
+        <template #title>{{ $t('Advanced Usage') }}</template>
+
 
         <a-menu-item key="sql">
-          <router-link to='/sql'>{{ $t('SQL Scenario') }}</router-link>
+          <router-link to='/sql'>{{ $t('SQL Playground') }}</router-link>
+        </a-menu-item>
+
+        <a-menu-item key="computedfeatures">
+          <router-link to='/computedfeatures'>{{ $t('Computed Features') }}</router-link>
         </a-menu-item>
       </a-sub-menu>
 
diff --git a/frontend/src/components/OfflineScenario.vue b/frontend/src/components/OfflineScenario.vue
index 7bce572..477a93e 100644
--- a/frontend/src/components/OfflineScenario.vue
+++ b/frontend/src/components/OfflineScenario.vue
@@ -17,19 +17,22 @@
     <a-typography-title :level="2">{{ $t('Offline Scenario') }}</a-typography-title>
     <a-typography-paragraph>
       <blockquote>
-        离线场景是使用分布式计算，对离线数据进行特征计算并导出机器学习所需的样本文件，用户首先<a-button type="link" @click="clickCreateFeature">{{ $t('Create Feature') }}</a-button>，然后选择特征来<a-button type="link" @click="showCreateOfflineSampleFormModal">{{ $t('Export Offline Sample') }}</a-button>。
+        {{ $t('Text of Offline Scenario') }}
       </blockquote>
     </a-typography-paragraph>
   </a-typography>
 
   <br/>
-  <h1>{{ $t('Offline Samples') }}</h1>
+  <h1>
+    {{ $t('Offline Samples') }}<a-button type="link" @click="showCreateOfflineSampleFormModal"><PlusCircleOutlined /></a-button>
+  </h1>
   <OfflineSamplesData></OfflineSamplesData>
  
 </div>
 </template>
   
 <script>
+import { PlusCircleOutlined } from '@ant-design/icons-vue';
 import OfflineSamplesData from '@/components/offlinesample/OfflineSamplesData.vue'
 import OfflineTables from '@/components/table/OfflineTables.vue'
 import CreateOfflineSampleForm from '@/components/form/CreateOfflineSampleForm.vue'
@@ -37,6 +40,7 @@ import CreateFeatureForm from '@/components/form/CreateFeatureForm.vue'
 
 export default {
   components: {
+    PlusCircleOutlined,
     OfflineSamplesData,
     OfflineTables,
     CreateOfflineSampleForm,
diff --git a/frontend/src/components/OnlineScenario.vue b/frontend/src/components/OnlineScenario.vue
index 7cdc32c..9e8ec89 100644
--- a/frontend/src/components/OnlineScenario.vue
+++ b/frontend/src/components/OnlineScenario.vue
@@ -17,13 +17,15 @@
     <a-typography-title :level="2">{{ $t('Online Scenario') }}</a-typography-title>
     <a-typography-paragraph>
       <blockquote>
-        在线场景是上线特征服务，使用在线数据提供硬实时的在线特征抽取接口，用户首先<a-button type="link" @click="clickCreateFeature">{{ $t('Create Feature') }}</a-button>，然后选择特征来<a-button type="link" @click="showCreateFeatureServiceFormModal">{{ $t('Create Feature Service') }}</a-button>。
+        {{ $t('Text of Online Scenario') }}
       </blockquote>
     </a-typography-paragraph>
   </a-typography>
 
   <br/>
-  <h1>{{ $t('Feature Services') }}</h1>
+  <h1>
+    {{ $t('Feature Services') }}<a-button type="link" @click="showCreateFeatureServiceFormModal"><PlusCircleOutlined /></a-button>
+  </h1>
   <FeatureServicesData></FeatureServicesData>
  
 </div>
@@ -34,9 +36,11 @@ import FeatureServicesData from '@/components/featureservice/FeatureServicesData
 import OnlineTables from '@/components/table/OnlineTables.vue';
 import CreateFeatureServiceForm from '@/components/form/CreateFeatureServiceForm.vue';
 import CreateFeatureForm from '@/components/form/CreateFeatureForm.vue'
+import { PlusCircleOutlined } from '@ant-design/icons-vue';
 
 export default {
   components: {
+    PlusCircleOutlined,
     FeatureServicesData,
     OnlineTables,
     CreateFeatureServiceForm,
diff --git a/frontend/src/components/SqlScenario.vue b/frontend/src/components/SqlScenario.vue
index 1632d72..b0f5c88 100644
--- a/frontend/src/components/SqlScenario.vue
+++ b/frontend/src/components/SqlScenario.vue
@@ -24,10 +24,10 @@
 
   <br/>
   <a-typography>
-    <a-typography-title :level="2">{{ $t('SQL Scenario') }}</a-typography-title>
+    <a-typography-title :level="2">{{ $t('SQL Playground') }}</a-typography-title>
     <a-typography-paragraph>
       <blockquote>
-        用户可以执行任意的 OpenMLDB SQL 语句，在线模式下会请求在线数据库，可进行在线数据的增删改查；离线模式下会提交分布式执行的 SQL，可进行离线探索或样本生成。
+        {{ $t('Text of SQL Playground') }}
       </blockquote>
     </a-typography-paragraph>
   </a-typography>
diff --git a/frontend/src/components/SqlUsageDoc.vue b/frontend/src/components/SqlUsageDoc.vue
index 4f1977c..09bb7e6 100644
--- a/frontend/src/components/SqlUsageDoc.vue
+++ b/frontend/src/components/SqlUsageDoc.vue
@@ -12,7 +12,7 @@
       <a-popconfirm
           title="确定复制到输入框？"
           @confirm="handleCopy(scope.record.sql)">
-        <a-button type="primary">复制</a-button>
+        <a-button type="primary">{{ $t('Copy') }}</a-button>
       </a-popconfirm>
     </template>
   </a-table>
@@ -38,13 +38,13 @@ export default {
 
       columns: [
           {
-            title: '功能',
+            title: this.$t('Function'),
             dataIndex: 'function',
             key: 'function',
             fixed: 'left',
           },
           {
-            title: '示例',
+            title: this.$t('Example'),
             dataIndex: 'sql',
             key: 'sql',
             slots: { customRender: 'content' }
diff --git a/frontend/src/components/computedfeatures/ComputedFeaturesPage.vue b/frontend/src/components/computedfeatures/ComputedFeaturesPage.vue
new file mode 100644
index 0000000..1c9d014
--- /dev/null
+++ b/frontend/src/components/computedfeatures/ComputedFeaturesPage.vue
@@ -0,0 +1,325 @@
+<template>
+<div>
+
+  <br/>
+  <a-typography>
+    <a-typography-title :level="2">{{ $t('Computed Features') }}</a-typography-title>
+    <a-typography-paragraph>
+      <blockquote>
+        {{ $t('Text of Computed Features') }}
+      </blockquote>
+    </a-typography-paragraph>
+  </a-typography>
+
+  <br/>
+  <a-form>
+    <a-form-item
+      :label="$t('Feature Table')"
+      :rules="[{ required: true, message: 'Please input table name!' }]">
+      <a-select show-search v-model:value="chooseTableName" @change="updateChooseTableName()">
+        <option v-for="name in allTableNames" :value="name"></option>
+      </a-select>
+    </a-form-item>
+
+    <a-form-item
+      :label="$t('Feature Columns')">
+      <a-select show-search mode="multiple" v-model:value="chooseColumnNames">
+        <option v-for="name in allColumnNames" :value="name"></option>
+      </a-select>
+    </a-form-item>
+  </a-form>
+
+    <a-button type="primary" @click="generateSampleFeatures">{{ $t('Display Sample Features') }}</a-button>
+    &nbsp;<a-button type="primary" @click="showForm">{{ $t('Filter with Index') }}</a-button>
+    
+    <div v-if="isShowForm">
+      <br/>
+      <!-- Test form -->
+      <a-form :model="formState"
+        @submit="submitForm">
+      
+        <a-form-item
+          :label="$t('Choose Index')">
+          <!-- TODO: Do not support mode="multiple" now -->
+          <a-select show-search 
+            v-model:value="formState.chooseColumnNames"
+            @change="changeFilterColumnNames">
+            <option v-for="columnNames in allIndexColumnNamesList" :value="columnNames"></option>
+          </a-select>
+        </a-form-item>
+
+
+        <a-space
+          v-for="(column, index) in formInputColumns"
+          :key="column.name"
+          style="display: flex; margin-bottom: 0px"
+          align="baseline"
+        >
+          <p style="min-width: 200px">{{ column.name }} ({{ column.type }}):</p>
+
+          <a-form-item
+            :name="['columns', index, 'name']">
+            <a-input v-model:value="formState.columnDataList[index]" placeholder="" />
+          </a-form-item>
+        </a-space>
+    
+          <a-form-item>
+            <a-button type="primary" html-type="submit">{{ $t('Submit') }}</a-button>
+          </a-form-item>
+      </a-form>
+    </div>
+
+    <div v-if="isShowResult">
+      <br/>
+      <h2>{{ $t('Feature Result') }}</h2>
+      <a-table :dataSource="resultData" :columns="resultColumns">
+        <template #id="{ text, record }">
+          <a-button type="link" @click="openOfflineJobDrawer(record.id)">{{ record.id }}</a-button>
+        </template>
+      </a-table>
+    </div>
+
+
+</div>
+</template>
+    
+<script>
+import axios from 'axios'
+import { notification } from 'ant-design-vue'
+
+
+export default {
+  data() {
+    return {
+      allTableNames: [],
+      allColumnNames: [],
+
+      chooseTableName: "",
+      chooseColumnNames: [],
+
+      isShowForm: false,
+
+    
+
+      formState: {
+        chooseColumnNames: [],
+        columnDataList: []
+      },
+
+      // For exmaples: ["name", "name,age"]
+      allIndexColumnNamesList: [],
+      mainTableColumns: [],
+      formInputColumns: [],
+
+      isShowResult: false,
+      resultColumns: [],
+      resultData: [],
+
+    };
+  },
+  
+  mounted() {
+      this.init();
+  },
+
+  methods: {
+    init() {
+      axios.get(`/api/tables`)
+        .then(response => {
+          this.tableNames = [];
+          response.data.forEach((table) => {
+            this.allTableNames.push(`${table.db}.${table.table}`);
+          });
+        })
+        .catch(error => {
+          var errorMessage = error.message;
+          if (error.response && error.response.data) {
+            errorMessage = error.response.data;
+          }
+          notification["error"]({
+            message: this.$t('Execute Fail'),
+            description: errorMessage
+          });
+        });
+    },
+
+    updateChooseTableName() {
+      if (this.chooseTableName === "") {
+        // Check if pass table name
+        notification["error"]({
+            message: this.$t('Please select feature table'),
+            description: errorMessage
+          });
+      } else {
+        // Set columns list for user to choose
+        const db = this.chooseTableName.split(".")[0];
+        const table = this.chooseTableName.split(".")[1];
+
+        axios.get(`/api/tables/${db}/${table}/schema`)
+          .then(response => {
+            this.allColumnNames = response.data.split(",").map(obj => obj.split(":")[0]);
+
+            this.mainTableColumns = response.data.split(",").map(pair => {
+              return {
+                "name": pair.split(":")[0],
+                "type": pair.split(":")[1]
+              }
+            });
+          })
+          .catch(error => {
+            var errorMessage = error.message;
+            if (error.response && error.response.data) {
+              errorMessage = error.response.data;
+            }
+            notification["error"]({
+              message: this.$t('Execute Fail'),
+              description: errorMessage
+            });
+          })
+
+
+        axios.get(`/api/tables/${db}/${table}/indexes`)
+          .then(response => {
+            this.allIndexColumnNamesList = response.data;
+          })
+          .catch(error => {
+            var errorMessage = error.message;
+            if (error.response && error.response.data) {
+              errorMessage = error.response.data;
+            }
+            notification["error"]({
+              message: this.$t('Execute Fail'),
+              description: errorMessage
+            });
+          });
+
+      }
+    },
+
+    executeOnlineSql(sql) {
+      axios
+        .post(`/api/sql/online`, {
+          sql: sql
+        })
+        .then((response) => {
+          notification["success"]({
+              message: this.$t('Execute Success'),
+              description: `Success to execute SQL: ${sql}`
+            });
+
+          this.isShowResult = true;
+
+          if (response.data.length > 0) {
+            const columnCount = response.data[0].length;
+
+            this.resultColumns = []
+            for (var i = 0; i < columnCount; i++) {
+              const columnName = response.data[0][i];
+              this.resultColumns.push({
+                title: columnName,
+                dataIndex: columnName,
+                key: columnName
+              })
+            }
+
+            this.resultData = []
+            for (var i = 1; i < response.data.length; i++) {
+              const row = response.data[i]
+              const rowDataMap = {}
+
+              for (var j = 0; j < columnCount; j++) {
+                const columnName = response.data[0][j];
+                const columnData = row[j];
+                rowDataMap[columnName] = columnData;
+              }
+
+              this.resultData.push(rowDataMap);
+            }
+            
+          } else {
+            this.resultColumns = [];
+            this.resultData = [];
+          }
+        })
+        .catch((error) => {
+          if ('response' in error && 'data' in error.response) {
+            notification["error"]({
+              message: this.$t('Execute Fail'),
+              description: error.response.data
+            });
+          } else {
+            notification["error"]({
+              message: this.$t('Execute Fail'),
+              description: error.message
+            });
+          }
+        });
+    },
+
+    generateSampleFeatures() {
+      if (this.chooseTableName === "") {
+        // Check if pass table name
+        notification["error"]({
+            message: this.$t('Please select feature table'),
+            description: errorMessage
+          });
+      } else {
+        if (this.chooseColumnNames.length == 0) {
+          const sql = `SELECT * FROM ${this.chooseTableName} LIMIT 10`;
+          this.executeOnlineSql(sql);
+        } else {
+          const sql = `SELECT ${this.chooseColumnNames.join(',')} FROM ${this.chooseTableName} LIMIT 10`;
+          this.executeOnlineSql(sql);
+        }
+
+      }
+    },
+
+    changeFilterColumnNames() {
+      const columnNameList = this.formState.chooseColumnNames.split(",")
+
+      this.formInputColumns = this.mainTableColumns.filter(item => columnNameList.includes(item.name));
+    },
+
+    showForm() {
+      if (this.isShowForm) {
+        this.isShowForm = false;
+      } else {
+        this.isShowForm = true;
+      }
+    },
+
+    submitForm() {
+        let condiction = "";
+
+        for (var i=0; i< this.formInputColumns.length; ++i) {
+          const columnName = this.formInputColumns[i]["name"];
+          const type = this.formInputColumns[i]["type"];
+          
+          let columnDataString = this.formState.columnDataList[i];
+
+          if (type == "string") {
+            columnDataString =  `'${columnDataString}'`;
+          } 
+
+
+          if (i == 0) {
+            condiction += `${columnName} = ${columnDataString}`
+          } else {
+            condiction += ` AND ${columnName} = ${columnDataString}`
+          }
+        }
+
+        let selectColumnsString = "*";
+        if (this.chooseColumnNames.length != 0) {
+          selectColumnsString = this.chooseColumnNames.join(',')
+        }
+
+        const sql = `SELECT ${selectColumnsString} FROM ${this.chooseTableName} WHERE ${condiction}`;
+
+        this.executeOnlineSql(sql);
+      },
+      
+  }
+}
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/feature/FeatureDetail.vue b/frontend/src/components/feature/FeatureDetail.vue
index 20aec82..f44dccc 100644
--- a/frontend/src/components/feature/FeatureDetail.vue
+++ b/frontend/src/components/feature/FeatureDetail.vue
@@ -7,8 +7,63 @@
       <a-descriptions-item :span="24" :label="$t('Feature Name')">{{ feature.featureName }}</a-descriptions-item>
       <a-descriptions-item :span="24" :label="$t('Type')">{{ feature.type}}</a-descriptions-item>
       <a-descriptions-item :span="24" :label="$t('Description')">{{ feature.description}}</a-descriptions-item>
+
+      <a-descriptions-item :span="24" :label="$t('Source SQL')">{{ featureSourceSql }}</a-descriptions-item>
+
     </a-descriptions>
   </div>
+
+  <br/>
+  <a-button type="primary" @click="randomlyGenerateFeatures">{{ $t('Display Sample Features') }}</a-button>
+  <!-- &nbsp;<a-button type="primary" @click="showForm">通过索引过滤特征</a-button> -->
+
+  <div v-if="isShowForm">
+      <br/>
+      <!-- Test form -->
+      <a-form :model="formState"
+        @submit="submitForm">
+      
+        <a-form-item
+          :label="$t('Choose Index')">
+          <!-- TODO: Do not support mode="multiple" now -->
+          <a-select show-search 
+            v-model:value="formState.chooseColumnNames"
+            @change="changeFilterColumnNames">
+            <option v-for="columnNames in allIndexColumnNamesList" :value="columnNames"></option>
+          </a-select>
+        </a-form-item>
+
+
+        <a-space
+          v-for="(column, index) in formInputColumns"
+          :key="column.name"
+          style="display: flex; margin-bottom: 0px"
+          align="baseline"
+        >
+          <p style="min-width: 200px">{{ column.name }} ({{ column.type }}):</p>
+
+          <a-form-item
+            :name="['columns', index, 'name']">
+            <a-input v-model:value="formState.columnDataList[index]" placeholder="" />
+          </a-form-item>
+        </a-space>
+    
+          <a-form-item>
+            <a-button type="primary" html-type="submit">{{ $t('Submit') }}</a-button>
+          </a-form-item>
+      </a-form>
+    </div>
+
+  <div v-if="isShowResult">
+    <br/>
+    <h2>{{ $t('Feature Result') }}</h2>
+    <a-table :dataSource="resultData" :columns="resultColumns">
+      <template #id="{ text, record }">
+        <a-button type="link" @click="openOfflineJobDrawer(record.id)">{{ record.id }}</a-button>
+      </template>
+    </a-table>
+  </div>
+
 </template>
   
 <script>
@@ -30,10 +85,32 @@ export default {
 
   data() {
     return {
-      feature: {}
+      feature: {},
+
+      featureSourceSql: "",
+
+      isShowResult: false,
+      resultColumns: [],
+      resultData: [],
+
+      isShowForm: false,
+      formState: {
+        chooseColumnNames: [],
+        columnDataList: []
+      },
+
+        // For exmaples: ["name", "name,age"]
+        allIndexColumnNamesList: [],
+        mainTableColumns: [],
+        formInputColumns: [],
+
     };
   },
 
+  mounted() {
+    this.initData();
+  },
+
   methods: {
     initData() {
       axios.get(`/api/features/${this.featureViewName}/${this.featureName}`)
@@ -50,11 +127,95 @@ export default {
             description: errorMessage
           });
         });
+
+      axios.get(`/api/features/${this.featureViewName}/${this.featureName}/sourcesql`)
+        .then(response => {
+          this.featureSourceSql = response.data;
+        })
+        .catch(error => {
+          var errorMessage = error.message;
+          if (error.response && error.response.data) {
+            errorMessage = error.response.data;
+          }
+          notification["error"]({
+            message: this.$t('Execute Fail'),
+            description: errorMessage
+          });
+        });
+    },
+
+    randomlyGenerateFeatures() {
+
+      axios.post(`/api/features/${this.featureViewName}/${this.featureName}/onlinequerymode/samples`)
+        .then(response => {
+            notification["success"]({
+              message: this.$t('Execute Success'),
+              description: "Success to request feature service"
+            });
+  
+            this.isShowResult = true;
+
+            if (response.data.length > 0) {
+              const columnCount = response.data[0].length;
+
+              this.resultColumns = []
+              for (var i = 0; i < columnCount; i++) {
+                const columnName = response.data[0][i];
+                this.resultColumns.push({
+                  title: columnName,
+                  dataIndex: columnName,
+                  key: columnName
+                })
+              }
+
+              this.resultData = []
+              for (var i = 1; i < response.data.length; i++) {
+                const row = response.data[i]
+                const rowDataMap = {}
+
+                for (var j = 0; j < columnCount; j++) {
+                  const columnName = response.data[0][j];
+                  const columnData = row[j];
+                  rowDataMap[columnName] = columnData;
+                }
+
+                this.resultData.push(rowDataMap);
+              }
+            } else {
+              this.resultColumns = [];
+              this.resultData = [];
+            }
+        })
+        .catch(error => {
+          var errorMessage = error.message;
+          if (error.response && error.response.data) {
+            errorMessage = error.response.data;
+          }
+          notification["error"]({
+            message: this.$t('Execute Fail'),
+            description: errorMessage
+          });
+        });
+    },
+
+    showForm() {
+      if (this.isShowForm) {
+        this.isShowForm = false;
+      } else {
+        this.isShowForm = true;
+      }
+    },
+
+    changeFilterColumnNames() {
+
+    },
+
+    submitForm() {
+      
     }
-  },
 
-  mounted() {
-    this.initData();
   }
+
+
 }
 </script>
diff --git a/frontend/src/components/featureservice/OnlineQueryModePage.vue b/frontend/src/components/featureservice/OnlineQueryModePage.vue
index bdd8e3c..478ef5d 100644
--- a/frontend/src/components/featureservice/OnlineQueryModePage.vue
+++ b/frontend/src/components/featureservice/OnlineQueryModePage.vue
@@ -19,43 +19,49 @@
     </a-descriptions>
 
     <br/>
-    <!-- Test form -->
-    <a-form :model="formState"
-      @submit="submitForm">
+    <a-button type="primary" @click="randomlyGenerateFeatures">随机生成特征</a-button>
+    &nbsp;<a-button type="primary" @click="showForm">通过索引过滤特征</a-button>
     
-      <a-form-item
-        :label="$t('Choose Index')">
-        <!-- TODO: Do not support mode="multiple" now -->
-        <a-select show-search 
-          v-model:value="formState.chooseColumnNames"
-          @change="changeFilterColumnNames">
-          <option v-for="columnNames in allIndexColumnNamesList" :value="columnNames"></option>
-        </a-select>
-      </a-form-item>
-
-
-      <a-space
-        v-for="(column, index) in formInputColumns"
-        :key="column.name"
-        style="display: flex; margin-bottom: 0px"
-        align="baseline"
-      >
-        <p style="min-width: 200px">{{ column.name }} ({{ column.type }}):</p>
-
+    <div v-if="isShowForm">
+      <br/>
+      <!-- Test form -->
+      <a-form :model="formState"
+        @submit="submitForm">
+      
         <a-form-item
-          :name="['columns', index, 'name']">
-          <a-input v-model:value="formState.columnDataList[index]" placeholder="" />
+          :label="$t('Choose Index')">
+          <!-- TODO: Do not support mode="multiple" now -->
+          <a-select show-search 
+            v-model:value="formState.chooseColumnNames"
+            @change="changeFilterColumnNames">
+            <option v-for="columnNames in allIndexColumnNamesList" :value="columnNames"></option>
+          </a-select>
         </a-form-item>
-      </a-space>
-  
-        <a-form-item>
-          <a-button type="primary" html-type="submit">{{ $t('Submit') }}</a-button>
-        </a-form-item>
-    </a-form>
-  
+
+
+        <a-space
+          v-for="(column, index) in formInputColumns"
+          :key="column.name"
+          style="display: flex; margin-bottom: 0px"
+          align="baseline"
+        >
+          <p style="min-width: 200px">{{ column.name }} ({{ column.type }}):</p>
+
+          <a-form-item
+            :name="['columns', index, 'name']">
+            <a-input v-model:value="formState.columnDataList[index]" placeholder="" />
+          </a-form-item>
+        </a-space>
+    
+          <a-form-item>
+            <a-button type="primary" html-type="submit">{{ $t('Submit') }}</a-button>
+          </a-form-item>
+      </a-form>
+    </div>
+
     <div v-if="isShowResult">
       <br/>
-      <h2>{{ $t('Online Query Feature Result') }}</h2>
+      <h2>{{ $t('Feature Result') }}</h2>
       <a-table :dataSource="resultData" :columns="resultColumns">
         <template #id="{ text, record }">
           <a-button type="link" @click="openOfflineJobDrawer(record.id)">{{ record.id }}</a-button>
@@ -93,13 +99,14 @@
 
         mainTable: {},
 
+        isShowForm: false,
+
         isOpenTableDrawer: false,
         currentDrawerDatabase: "",
         currentDrawerTable: "",
 
         formState: {
           chooseColumnNames: [],
-
           columnDataList: []
         },
 
@@ -169,9 +176,7 @@
           });
 
           
-
-
-          axios.get(`/api/featureservices/${this.name}/${this.version}/request/schema`)
+        axios.get(`/api/featureservices/${this.name}/${this.version}/request/schema`)
           .then(response => {
             this.mainTableColumns = response.data.split(",").map(pair => {
               return {
@@ -216,9 +221,7 @@
 
         
         for (var i=0; i< this.formInputColumns.length; ++i) {
-          console.log("index: " + i);
           const type = this.formInputColumns[i]["type"];
-          console.log("type: " + type);
           
           const columnDataString = this.formState.columnDataList[i];
 
@@ -296,6 +299,67 @@
             }
 
 
+        })
+        .catch(error => {
+          var errorMessage = error.message;
+          if (error.response && error.response.data) {
+            errorMessage = error.response.data;
+          }
+          notification["error"]({
+            message: this.$t('Execute Fail'),
+            description: errorMessage
+          });
+        });
+      },
+
+      showForm() {
+        if (this.isShowForm) {
+          this.isShowForm = false;
+        } else {
+          this.isShowForm = true;
+        }
+      },
+      
+      randomlyGenerateFeatures() {
+        axios.post(`/api/featureservices/${this.name}/${this.version}/request/onlinequerymode/samples`)
+        .then(response => {
+            notification["success"]({
+              message: this.$t('Execute Success'),
+              description: "Success to request feature service"
+            });
+  
+            this.isShowResult = true;
+
+            if (response.data.length > 0) {
+              const columnCount = response.data[0].length;
+
+              this.resultColumns = []
+              for (var i = 0; i < columnCount; i++) {
+                const columnName = response.data[0][i];
+                this.resultColumns.push({
+                  title: columnName,
+                  dataIndex: columnName,
+                  key: columnName
+                })
+              }
+
+              this.resultData = []
+              for (var i = 1; i < response.data.length; i++) {
+                const row = response.data[i]
+                const rowDataMap = {}
+
+                for (var j = 0; j < columnCount; j++) {
+                  const columnName = response.data[0][j];
+                  const columnData = row[j];
+                  rowDataMap[columnName] = columnData;
+                }
+
+                this.resultData.push(rowDataMap);
+              }
+            } else {
+              this.resultColumns = [];
+              this.resultData = [];
+            }
         })
         .catch(error => {
           var errorMessage = error.message;
diff --git a/frontend/src/components/featureservice/RequestFeatureService.vue b/frontend/src/components/featureservice/RequestFeatureService.vue
index 9572573..82230b2 100644
--- a/frontend/src/components/featureservice/RequestFeatureService.vue
+++ b/frontend/src/components/featureservice/RequestFeatureService.vue
@@ -9,22 +9,9 @@
   </a-typography>
 
   <a-typography-paragraph>
-    <!-- <pre>{{ $t("Text of introduce test feature service") }} <a target="blank" href="https://openmldb.ai/docs/zh/main/quickstart/sdk/rest_api.html">{{$t('OpenMLDB documents')}}</a></pre> -->
-    <pre>用户可以使用“请求模式”或“在线查询模式”来访问特征服务，请求模式下用户需要输入整行主表数据通过 LastJoin 等方法提取副表特征；在线查询模式则不需要传入数据，直接查询在线表的特征数据，并且可以通过主键进行数据过滤。</pre>
+    <pre>{{ $t("Text of introduce test feature service") }} <a target="blank" href="https://openmldb.ai/docs/zh/main/quickstart/sdk/rest_api.html">{{$t('OpenMLDB documents')}}</a></pre>
   </a-typography-paragraph>
 
-
-  <a-menu mode="horizontal">
-    <a-menu-item key="1">
-      <router-link :to="`/featureservices/${name}/${version}/request/requestmode`">请求模式</router-link>
-    </a-menu-item>
-
-    <a-menu-item key="2">
-      <router-link :to="`/featureservices/${name}/${version}/request/onlinequerymode`">在线查询模式</router-link>
-    </a-menu-item>
-  </a-menu>
-
-
   <router-view></router-view>
 
 </div>
diff --git a/frontend/src/components/form/InsertSingleRowForm.vue b/frontend/src/components/form/InsertSingleRowForm.vue
index 631e9cb..a959c45 100644
--- a/frontend/src/components/form/InsertSingleRowForm.vue
+++ b/frontend/src/components/form/InsertSingleRowForm.vue
@@ -2,7 +2,7 @@
 
 <div>
   <a-typography-paragraph>
-    <pre>用户可以根据选择的数据表的 Schema，直接插入单行数据到在线数据库中。</pre>
+    <pre>{{ $t('Text of Insert Single Row') }}</pre>
   </a-typography-paragraph>
 
   <br/>
diff --git a/frontend/src/components/importdata/ImportDataMenu.vue b/frontend/src/components/importdata/ImportDataMenu.vue
index 0f5fec7..fd55b92 100644
--- a/frontend/src/components/importdata/ImportDataMenu.vue
+++ b/frontend/src/components/importdata/ImportDataMenu.vue
@@ -18,10 +18,11 @@
     <router-link to='/developprocess/import/offline'>{{ $t('Import Offline Data')}}</router-link>
   </a-menu-item>
 
+  <!--
   <a-menu-item key="5">
     <router-link to='/developprocess/import/index'>{{ $t('Add Index')}}</router-link>
   </a-menu-item>
-
+  -->
 </a-menu>
 
 <router-view></router-view>
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index eb38969..c01d678 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -231,7 +231,7 @@
     "Export Offline Sample": "Export Offline Sample",
     "Analyze": "Analyze",
     "Success to create feature view": "Success to create feature view",
-    "SQL Scenario": "SQL Scenario",
+    "SQL Playground": "SQL Playground",
     "SQL Result": "SQL Result",
     "Insert Single Row": "Insert Single Row",
     "Row Data": "Row Data",
@@ -257,7 +257,22 @@
     "Add Index": "Add Index",
     "Request Feature Service": "Request Feature Service",
     "Choose Index": "Choose Index",
-    "Online Query Feature Result": "Online Query Feature Result",
-    "Feature Table": "Feature Table"
+    "Feature Result": "Feature Result",
+    "Feature Table": "Feature Table",
+    "Randomly Extract Feature": "Randomly Extract Feature",
+    "Source SQL": "Source SQL",
+    "Computed Features": "Computed Features",
+    "Advanced Usage": "Advanced Usage",
+    "Feature Columns": "Feature Columns",
+    "Text of Introduce OpenMLDB": "The OpenMLDB Feature Platform is a Feature Store service based on a feature database. Users use SQL to define features, select features to generate offline samples in offline scenarios, and choose features for real-time feature calculation in online scenarios.",
+    "Text of Insert Single Row": "Users can directly insert single-row data into an online database based on the schema of the selected data table.",
+    "Text of Online Scenario": "The online scenario is an online feature service that uses online data to provide a hard real-time online feature extraction interface. Users first create features, and then select features to deploy the feature service.",
+    "Text of Offline Scenario": "Offline scenarios involve using distributed computing to perform feature computation on offline data and export sample files required for machine learning. Users first create features and then select these features to export offline samples.",
+    "Copy": "Copy",
+    "Function": "Function",
+    "Example": "Example",
+    "Text of SQL Playground": "Users can execute any OpenMLDB SQL statement. In online mode, it will request the online database, allowing for the addition, deletion, modification, and querying of online data; in offline mode, it will submit SQL for distributed execution, enabling offline exploration or sample generation.",
+    "Text of Computed Features": "Users can precompute feature values and directly store them in the OpenMLDB online table, and then access the online table data for reading and writing features. If more complex feature computation logic is needed, it can be implemented through the command line or SDK by writing OpenMLDB SQL.",
+    "Filter with Index": "Filter with Index"
 
 }
\ No newline at end of file
diff --git a/frontend/src/locales/zh.json b/frontend/src/locales/zh.json
index d2142db..f746789 100644
--- a/frontend/src/locales/zh.json
+++ b/frontend/src/locales/zh.json
@@ -232,7 +232,7 @@
     "Export Offline Sample": "导出离线样本",
     "Analyze": "分析",
     "Success to create feature view": "成功创建特征组",
-    "SQL Scenario": "SQL 场景",
+    "SQL Playground": "SQL实验室",
     "SQL Result": "SQL 结果",
     "Insert Single Row": "插入单行数据",
     "Row Data": "行数据",
@@ -259,7 +259,24 @@
     "Add Index": "添加索引",
     "Request Feature Service": "请求特征服务",
     "Choose Index": "选择索引",
-    "Online Query Feature Result": "在线查询特征结果",
-    "Feature Table": "特征表"
+    "Feature Result": "特征结果",
+    "Feature Table": "特征表",
+    "Randomly Extract Feature": "随机提取特征",
+    "Source SQL": "来源 SQL",
+    "Computed Features": "预计算特征",
+    "Advanced Usage": "高级用法",
+    "Feature Columns": "特征列",
+    "Text of Introduce OpenMLDB": "OpenMLDB 特征平台是基于特征数据库实现的 Feature Store 服务，用户使用 SQL 来定义特征，离线场景中选择特征生成离线样本，在线场景中选择特征实现实时特征计算。",
+    "Text of Insert Single Row": "用户可以根据选择的数据表的 Schema，直接插入单行数据到在线数据库中。",
+    "Text of Online Scenario": "在线场景是上线特征服务，使用在线数据提供硬实时的在线特征抽取接口，用户首先创建特征，然后选择特征来部署特征服务。",
+    "Text of Offline Scenario": "离线场景是使用分布式计算，对离线数据进行特征计算并导出机器学习所需的样本文件，用户首先创建特征，然后选择特征来导出离线样本。",
+    "Copy": "复制",
+    "Function": "功能",
+    "Example": "示例",
+    "Text of SQL Playground": "用户可以执行任意的 OpenMLDB SQL 语句，在线模式下会请求在线数据库，可进行在线数据的增删改查；离线模式下会提交分布式执行的 SQL，可进行离线探索或样本生成。",
+    "Text of Computed Features": "用户可以通过预计算把特征值直接存入 OpenMLDB 在线表中，然后访问在线表数据进行读写特征。如果需要实现更复杂的特征计算逻辑，可以通过命令行或SDK来编写 OpenMLDB SQL 实现。",
+    "Display Sample Features": "显示样本特征",
+    "Filter with Index": "通过索引过滤"
+
 
 }
\ No newline at end of file
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 4356a74..c1bb468 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -32,6 +32,7 @@ import ImportDataOnline from '@/components/importdata/ImportDataOnline.vue'
 import ImportDataOffline from '@/components/importdata/ImportDataOffline.vue'
 import ImportDataIndex from '@/components/importdata/ImportDataIndex.vue'
 import SqlScenario from '@/components/SqlScenario.vue'
+import ComputedFeaturesPage from '@/components/computedfeatures/ComputedFeaturesPage.vue'
 
 const router = createRouter({
   history: createWebHashHistory("/"),
@@ -44,6 +45,7 @@ const router = createRouter({
     { path: '/databases/:db', component: DatabaseDetail, props: true  },
     { path: '/features', component: FeaturesAndFeatureViewsPage},
     { path: '/features/:featureViewName/:featureName', component: FeatureDetail, props: true },
+    { path: '/computedfeatures', component: ComputedFeaturesPage},
     { path: '/featureviews/:name', component: FeatureViewDetail, props: true },
     { path: '/featureservices', component: FeatureServicesPage},
     { path: '/featureservices/:name', component: FeatureServiceDetail, props: true },
diff --git a/src/main/java/com/_4paradigm/openmldb/featureplatform/controller/FeatureController.java b/src/main/java/com/_4paradigm/openmldb/featureplatform/controller/FeatureController.java
index c778abc..53262fb 100644
--- a/src/main/java/com/_4paradigm/openmldb/featureplatform/controller/FeatureController.java
+++ b/src/main/java/com/_4paradigm/openmldb/featureplatform/controller/FeatureController.java
@@ -5,6 +5,7 @@
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.*;
 import java.sql.SQLException;
 import java.util.List;
@@ -61,4 +62,24 @@ public Feature getFeatureViewByName(@PathVariable String feature_view_name, @Pat
         }
     }
 
+    @GetMapping(value = "/{feature_view_name}/{feature_name}/sourcesql")
+    public ResponseEntity<String> getSourceSql(@PathVariable String feature_view_name, @PathVariable String feature_name) throws SQLException {
+        try {
+            return ResponseEntity.ok(featureService.getSourceSql(feature_view_name, feature_name));
+        } catch (Exception e) {
+            logger.info(String.format("Call requestOnlineQueryModeSamples with %s and %s but get exception: %s", feature_view_name, feature_name, e.getMessage()));
+            throw new SQLException(e.getMessage());
+        }
+    }
+
+    @PostMapping(value = "/{feature_view_name}/{feature_name}/onlinequerymode/samples")
+    public ResponseEntity<List<List<String>>> requestOnlineQueryModeSamples(@PathVariable String feature_view_name, @PathVariable String feature_name) throws SQLException {
+        try {
+            return ResponseEntity.ok(featureService.requestOnlineQueryModeSamples(feature_view_name, feature_name));
+        } catch (Exception e) {
+            logger.info(String.format("Call requestOnlineQueryModeSamples with %s and %s but get exception: %s", feature_view_name, feature_name, e.getMessage()));
+            throw new SQLException(e.getMessage());
+        }
+    }
+
 }
\ No newline at end of file
diff --git a/src/main/java/com/_4paradigm/openmldb/featureplatform/controller/FeatureServiceController.java b/src/main/java/com/_4paradigm/openmldb/featureplatform/controller/FeatureServiceController.java
index 8b441f1..198e444 100644
--- a/src/main/java/com/_4paradigm/openmldb/featureplatform/controller/FeatureServiceController.java
+++ b/src/main/java/com/_4paradigm/openmldb/featureplatform/controller/FeatureServiceController.java
@@ -156,7 +156,6 @@ public ResponseEntity<String> requestFeatureService(@PathVariable String name, @
     @PostMapping(value = "/{name}/{version}/request/onlinequerymode", consumes = MediaType.APPLICATION_JSON_VALUE)
     public ResponseEntity<List<List<String>>> requestOnlineQueryMode(@PathVariable String name, @PathVariable String version, @RequestBody String dataRequest) throws SQLException {
         try {
-            //tobe1
             return ResponseEntity.ok(featureServiceService.requestOnlineQueryMode(name, version, dataRequest));
         } catch (Exception e) {
             logger.info(String.format("Call requestOnlineQueryMode with %s, %s and %s but get exception: %s", name, version, dataRequest, e.getMessage()));
@@ -164,6 +163,16 @@ public ResponseEntity<List<List<String>>> requestOnlineQueryMode(@PathVariable S
         }
     }
 
+    @PostMapping(value = "/{name}/{version}/request/onlinequerymode/samples")
+    public ResponseEntity<List<List<String>>> requestOnlineQueryModeSamples(@PathVariable String name, @PathVariable String version) throws SQLException {
+        try {
+            return ResponseEntity.ok(featureServiceService.requestOnlineQueryModeSamples(name, version));
+        } catch (Exception e) {
+            logger.info(String.format("Call requestOnlineQueryModeSample with %s and %s but get exception: %s", name, version, e.getMessage()));
+            throw new SQLException(e.getMessage());
+        }
+    }
+
     @GetMapping("/{name}/{version}/request/schema")
     public ResponseEntity<String> getRequestSchema(@PathVariable String name, @PathVariable String version) throws SQLException {
         try {
diff --git a/src/main/java/com/_4paradigm/openmldb/featureplatform/controller/TableController.java b/src/main/java/com/_4paradigm/openmldb/featureplatform/controller/TableController.java
index 590fe01..14a1a6d 100644
--- a/src/main/java/com/_4paradigm/openmldb/featureplatform/controller/TableController.java
+++ b/src/main/java/com/_4paradigm/openmldb/featureplatform/controller/TableController.java
@@ -7,6 +7,8 @@
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.*;
 import java.sql.SQLException;
 import java.util.List;
@@ -84,4 +86,14 @@ public void deleteTable(@PathVariable String db, @PathVariable String table) thr
         }
     }
 
+    @GetMapping("/{db}/{table}/indexes")
+    public ResponseEntity<List<String>> getIndexNames(@PathVariable String db, @PathVariable String table) throws SQLException {
+        try {
+            return new ResponseEntity<>(tableService.getIndexNames(db, table), HttpStatus.OK);
+        } catch (SQLException e) {
+            logger.info(String.format("Call getIndexNames with %s and %s but get exception: %s", db, table, e.getMessage()));
+            throw new SQLException(e.getMessage());
+        }
+    }
+
 }
\ No newline at end of file
diff --git a/src/main/java/com/_4paradigm/openmldb/featureplatform/service/DatabaseService.java b/src/main/java/com/_4paradigm/openmldb/featureplatform/service/DatabaseService.java
index aa8fc70..d77d0f4 100644
--- a/src/main/java/com/_4paradigm/openmldb/featureplatform/service/DatabaseService.java
+++ b/src/main/java/com/_4paradigm/openmldb/featureplatform/service/DatabaseService.java
@@ -23,7 +23,13 @@ public DatabaseService(SqlClusterExecutor sqlExecutor) {
 
     public List<String> getDatabases() {
         List<String> databases = sqlExecutor.showDatabases();
-        return databases;
+        List<String> outputDatabases = new ArrayList<>();
+        for (String database: databases) {
+            if (!database.equals("SYSTEM_FEATURE_PLATFORM")) { // Ignore the system database
+                outputDatabases.add(database);
+            }
+        }
+        return outputDatabases;
     }
 
     public List<SimpleTableInfo> getDatabaseTables(String database) throws SQLException {
diff --git a/src/main/java/com/_4paradigm/openmldb/featureplatform/service/FeatureServiceService.java b/src/main/java/com/_4paradigm/openmldb/featureplatform/service/FeatureServiceService.java
index 237777a..26aa512 100644
--- a/src/main/java/com/_4paradigm/openmldb/featureplatform/service/FeatureServiceService.java
+++ b/src/main/java/com/_4paradigm/openmldb/featureplatform/service/FeatureServiceService.java
@@ -387,7 +387,6 @@ public List<List<String>> requestOnlineQueryMode(String name, String version, St
 
         List<String> indexDataValues = new ArrayList<>();
 
-
         for (JsonElement dataElement : dataJsonArray) {
             JsonArray innerArray = dataElement.getAsJsonArray();
 
@@ -424,6 +423,31 @@ public List<List<String>> requestOnlineQueryMode(String name, String version, St
         return returnList;
     }
 
+    public List<List<String>> requestOnlineQueryModeSamples(String name, String version) throws SQLException {
+        FeatureServiceService featureServiceService = new FeatureServiceService(sqlExecutor);
+        FeatureService featureService = featureServiceService.getFeatureServiceByNameAndVersion(name, version);
+        String db = featureService.getDb();
+        String deploymentSql = featureService.getSql();
+
+        String querySql = OpenmldbSqlUtil.removeDeployFromSql(deploymentSql);
+
+        String finalSql = String.format("%s limit 10", querySql);
+
+        Statement statement = sqlExecutor.getStatement();
+        statement.execute("SET @@execute_mode='online'");
+        statement.execute(String.format("USE %s", db));
+
+        statement.execute(finalSql);
+
+        List<List<String>> returnList = new ArrayList<>();
+
+        // TODO: Check if has result set
+        SQLResultSet resultSet = (SQLResultSet) statement.getResultSet();
+        returnList = ResultSetUtil.resultSetToStringArray(resultSet);
+        resultSet.close();
+
+        return returnList;
+    }
     public List<String> getIndexNames(String name, String version) throws SQLException {
 
         FeatureServiceService featureServiceService = new FeatureServiceService(sqlExecutor);
diff --git a/src/main/java/com/_4paradigm/openmldb/featureplatform/service/FeaturesService.java b/src/main/java/com/_4paradigm/openmldb/featureplatform/service/FeaturesService.java
index c1d6f93..7e96907 100644
--- a/src/main/java/com/_4paradigm/openmldb/featureplatform/service/FeaturesService.java
+++ b/src/main/java/com/_4paradigm/openmldb/featureplatform/service/FeaturesService.java
@@ -3,10 +3,14 @@
 import com._4paradigm.openmldb.featureplatform.dao.model.Feature;
 import com._4paradigm.openmldb.featureplatform.dao.model.FeatureService;
 import com._4paradigm.openmldb.featureplatform.dao.model.FeatureView;
+import com._4paradigm.openmldb.featureplatform.utils.OpenmldbSqlUtil;
 import com._4paradigm.openmldb.featureplatform.utils.ResultSetUtil;
+import com._4paradigm.openmldb.jdbc.SQLResultSet;
 import com._4paradigm.openmldb.sdk.impl.SqlClusterExecutor;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Repository;
+
+import java.io.IOException;
 import java.sql.ResultSet;
 import java.sql.SQLException;
 import java.sql.Statement;
@@ -135,4 +139,38 @@ public void deleteFeature(Feature feature) throws SQLException {
         statement.close();
     }
 
+    public String getSourceSql(String featureViewName, String featureName) throws SQLException {
+        FeatureViewService featureViewService = new FeatureViewService(sqlExecutor);
+        FeatureView featureView = featureViewService.getFeatureViewByName(featureViewName);
+
+        String querySql = featureView.getSql();
+        String db = featureView.getDb();
+
+        String sourceSql = String.format("SELECT %s FROM (%s)", featureName, querySql);
+
+        return sourceSql;
+    }
+    public List<List<String>> requestOnlineQueryModeSamples(String featureViewName, String featureName) throws SQLException {
+        FeatureViewService featureViewService = new FeatureViewService(sqlExecutor);
+        FeatureView featureView = featureViewService.getFeatureViewByName(featureViewName);
+
+        String querySql = featureView.getSql();
+        String db = featureView.getDb();
+
+        String finalSql = String.format("SELECT %s FROM (%s) limit 10", featureName, querySql);
+
+        Statement statement = sqlExecutor.getStatement();
+        statement.execute("SET @@execute_mode='online'");
+        statement.execute(String.format("USE %s", db));
+
+        statement.execute(finalSql);
+
+        // TODO: Check if has result set
+        SQLResultSet resultSet = (SQLResultSet) statement.getResultSet();
+        List<List<String>> returnList = ResultSetUtil.resultSetToStringArray(resultSet);
+        resultSet.close();
+
+        return returnList;
+    }
+
 }
\ No newline at end of file
diff --git a/src/main/java/com/_4paradigm/openmldb/featureplatform/service/TableService.java b/src/main/java/com/_4paradigm/openmldb/featureplatform/service/TableService.java
index f92bd59..cd98396 100644
--- a/src/main/java/com/_4paradigm/openmldb/featureplatform/service/TableService.java
+++ b/src/main/java/com/_4paradigm/openmldb/featureplatform/service/TableService.java
@@ -6,6 +6,10 @@
 import com._4paradigm.openmldb.featureplatform.dao.model.SimpleTableInfo;
 import com._4paradigm.openmldb.featureplatform.utils.OpenmldbSqlUtil;
 import com._4paradigm.openmldb.featureplatform.utils.OpenmldbTableUtil;
+import com._4paradigm.openmldb.featureplatform.utils.ResultSetUtil;
+import com._4paradigm.openmldb.jdbc.SQLResultSet;
+import com._4paradigm.openmldb.proto.Common;
+import com._4paradigm.openmldb.proto.NS;
 import com._4paradigm.openmldb.sdk.Schema;
 import com._4paradigm.openmldb.sdk.impl.SqlClusterExecutor;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -31,12 +35,14 @@ public List<SimpleTableInfo> getTables() throws SQLException {
 
         List<String> databases = sqlExecutor.showDatabases();
         for (String database : databases) {
-            List<String> tables = sqlExecutor.getTableNames(database);
-            for (String table : tables) {
-                Schema schema = sqlExecutor.getTableSchema(database, table);
-                String schemaString = schema.toString();
-                SimpleTableInfo simpleTableInfo = new SimpleTableInfo(database, table, schemaString);
-                simpleTableInfos.add(simpleTableInfo);
+            if (!database.equals("SYSTEM_FEATURE_PLATFORM")) { // Ignore the system tables
+                List<String> tables = sqlExecutor.getTableNames(database);
+                for (String table : tables) {
+                    Schema schema = sqlExecutor.getTableSchema(database, table);
+                    String schemaString = schema.toString();
+                    SimpleTableInfo simpleTableInfo = new SimpleTableInfo(database, table, schemaString);
+                    simpleTableInfos.add(simpleTableInfo);
+                }
             }
         }
 
@@ -118,6 +124,24 @@ public void deleteTable(String db, String table) throws SQLException {
         statement.close();
     }
 
+    public List<String> getIndexNames(String db, String table) throws SQLException {
+        NS.TableInfo tableInfo = sqlExecutor.getTableInfo(db, table);
+
+        // For example: ["name", "name,age"]
+        List<String> indexColumnNames = new ArrayList<>();
+
+        for (Common.ColumnKey columnKey: tableInfo.getColumnKeyList()) {
+            if(columnKey.getFlag() == 0){
+                List<String> columnNameList = new ArrayList<>();
+                for (String columnName: columnKey.getColNameList()) {
+                    columnNameList.add(columnName);
+                }
+
+                indexColumnNames.add(String.join(",", columnNameList));
+            }
+        }
 
+        return indexColumnNames;
+    }
 
 }
\ No newline at end of file