You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@iotdb.apache.org by qi...@apache.org on 2022/12/02 03:17:35 UTC

[iotdb-tsfile-viewer] branch main updated: add user guide (#7)

This is an automated email from the ASF dual-hosted git repository.

qiaojialin pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/iotdb-tsfile-viewer.git


The following commit(s) were added to refs/heads/main by this push:
     new 6a34cac  add user guide (#7)
6a34cac is described below

commit 6a34cac3871fad62d97f12cf9bf9ea7a1278a1b9
Author: long.li <34...@users.noreply.github.com>
AuthorDate: Fri Dec 2 11:17:30 2022 +0800

    add user guide (#7)
---
 README.md                                          |  60 ++++++++++-
 imgs/chunkgroup.png                                | Bin 0 -> 54392 bytes
 imgs/chunkinfo.png                                 | Bin 0 -> 69664 bytes
 imgs/datasearch.png                                | Bin 0 -> 33123 bytes
 imgs/entry.png                                     | Bin 0 -> 30281 bytes
 imgs/file-management.png                           | Bin 0 -> 49426 bytes
 imgs/indexoftimeseriesindex-chunk.png              | Bin 0 -> 86975 bytes
 imgs/indexoftimeseriesindex.png                    | Bin 0 -> 33419 bytes
 imgs/overview-tsfile.png                           | Bin 0 -> 77394 bytes
 imgs/pagedata.png                                  | Bin 0 -> 125420 bytes
 imgs/timeseriesindex.png                           | Bin 0 -> 80332 bytes
 imgs/tips.png                                      | Bin 0 -> 870 bytes
 pom.xml                                            |   3 +
 tsfile-viewer-core/pom.xml                         |   4 +-
 .../iotdb/tool/core/service/TsFileAnalyserV13.java |  17 +--
 .../src/pages/tsfile-tool/v2/overview/overview.jsx |  33 +++---
 .../src/pages/tsfile-tool/v2/style.less            |   2 +-
 tsfile-viewer-web/pom.xml                          | 116 +--------------------
 18 files changed, 98 insertions(+), 137 deletions(-)

diff --git a/README.md b/README.md
index 630031a..2cdf867 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,7 @@
 - [Quick Start](#quick-start)
     - [Prerequisites](#Prerequisites)
     - [Compile](#Compile)
+- [User Guide](#user-guide)
 - [Maintainers](#Maintainers)
 - [Contributing](#Contributing)
 - [Contributors](#Contributors)
@@ -75,9 +76,10 @@ Under the root path of iotdb-tsfile-viewer:
 mvn clean install
 ```
 then you can start this tool in the tsfile-viewer-web project 
-
+you can add '-Dfile.endoding=utf8' command to avoid some Chinese garbled problems,mainly to solve the situation that some device names in the tsfile file contain Chinese
 ```
 java -jar iotdb-tsfile-viewer-web-0.13.2-SNAPSHOT.jar
+java -Dfile.endoding=utf8 -jar iotdb-tsfile-viewer-web-0.13.2-SNAPSHOT.jar
 ```
 
 The default url is
@@ -89,6 +91,62 @@ You can modify the port through the file
 iotdb-tsfile-viewer\tsfile-viewer-web-frontend\config\config.js
 tsfile-viewer-web\src\main\resources\application.yml
 ```
+You can specify the parent folder location for tsfiles
+```
+tsfile-viewer-web\src\main\resources\application.yml
+
+tsviewer:
+  web:
+     baseDirectory: C:\Users\Administrator\Desktop\
+```
+
+# User Guide
+
+When you visit http://locallhost:8080, you will get the following page.  
+![image](/imgs/entry.png)  
+- 1 you can get some tips when your mouse over this icon
+- 2 multilingual switching
+- 3 file management,when you click this button, you will get the following page.  
+
+![image](/imgs/file-management.png)
+- 1 click to change the directory
+- 2 the status of the files
+- 3 get the loaded files
+- 4 the operation, open a tsfile, when the file loaded success, you will get the following page.  
+
+![image](/imgs/overview-tsfile.png)
+- 1 ChunkGroups
+- 2 TimeseriesIndexs
+- 3 IndexOfTimeseriesIndexs  
+
+The white blocks are clickable, when you click on them, their corresponding simple information will be displayed on the right.  
+You can get more infos by click the 'more info' block.  
+
+![image](/imgs/chunkgroup.png)  
+
+- 1 the ChunkGroups,the name is the device name
+- 2 the brief info of a ChunkGroup
+- 3 click here to get the Chunks info of a ChunkGroup
+![image](/imgs/chunkinfo.png)  
+
+Click the page node to get pageData.  
+
+![image](/imgs/pagedata.png)
+
+The TimeseriesIndexs is used similarly to ChunkGroups  
+
+![image](/imgs/timeseriesindex.png)
+
+Display the index structure in the form of a tree  
+
+![image](/imgs/indexoftimeseriesindex.png)
+
+![image](/imgs/indexoftimeseriesindex-chunk.png)
+
+Data Search function:  
+![image](/imgs/datasearch.png) 
+
+
 # Maintainers
 
 # Contributing
diff --git a/imgs/chunkgroup.png b/imgs/chunkgroup.png
new file mode 100644
index 0000000..c56c742
Binary files /dev/null and b/imgs/chunkgroup.png differ
diff --git a/imgs/chunkinfo.png b/imgs/chunkinfo.png
new file mode 100644
index 0000000..6185011
Binary files /dev/null and b/imgs/chunkinfo.png differ
diff --git a/imgs/datasearch.png b/imgs/datasearch.png
new file mode 100644
index 0000000..4015f09
Binary files /dev/null and b/imgs/datasearch.png differ
diff --git a/imgs/entry.png b/imgs/entry.png
new file mode 100644
index 0000000..2f61045
Binary files /dev/null and b/imgs/entry.png differ
diff --git a/imgs/file-management.png b/imgs/file-management.png
new file mode 100644
index 0000000..72b5cfd
Binary files /dev/null and b/imgs/file-management.png differ
diff --git a/imgs/indexoftimeseriesindex-chunk.png b/imgs/indexoftimeseriesindex-chunk.png
new file mode 100644
index 0000000..d19324b
Binary files /dev/null and b/imgs/indexoftimeseriesindex-chunk.png differ
diff --git a/imgs/indexoftimeseriesindex.png b/imgs/indexoftimeseriesindex.png
new file mode 100644
index 0000000..60c8995
Binary files /dev/null and b/imgs/indexoftimeseriesindex.png differ
diff --git a/imgs/overview-tsfile.png b/imgs/overview-tsfile.png
new file mode 100644
index 0000000..c405f92
Binary files /dev/null and b/imgs/overview-tsfile.png differ
diff --git a/imgs/pagedata.png b/imgs/pagedata.png
new file mode 100644
index 0000000..f44bdbd
Binary files /dev/null and b/imgs/pagedata.png differ
diff --git a/imgs/timeseriesindex.png b/imgs/timeseriesindex.png
new file mode 100644
index 0000000..9cbe38c
Binary files /dev/null and b/imgs/timeseriesindex.png differ
diff --git a/imgs/tips.png b/imgs/tips.png
new file mode 100644
index 0000000..c607c5a
Binary files /dev/null and b/imgs/tips.png differ
diff --git a/pom.xml b/pom.xml
index f8519b3..e44a403 100644
--- a/pom.xml
+++ b/pom.xml
@@ -36,6 +36,9 @@
         <maven.compiler.target>1.8</maven.compiler.target>
         <spotless.version>2.4.2</spotless.version>
         <maven.assembly.version>3.1.0</maven.assembly.version>
+        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
+        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
+        <maven.compiler.encoding>UTF-8</maven.compiler.encoding>
     </properties>
     <build>
         <plugins>
diff --git a/tsfile-viewer-core/pom.xml b/tsfile-viewer-core/pom.xml
index 2d5c699..80638e8 100644
--- a/tsfile-viewer-core/pom.xml
+++ b/tsfile-viewer-core/pom.xml
@@ -30,15 +30,13 @@
     <artifactId>iotdb-tsfile-viewer-core</artifactId>
     <name>tsfile-viewer-core</name>
     <properties>
-        <maven.compiler.source>8</maven.compiler.source>
-        <maven.compiler.target>8</maven.compiler.target>
         <junit.version>4.13.2</junit.version>
     </properties>
     <dependencies>
         <dependency>
             <groupId>org.apache.iotdb</groupId>
             <artifactId>tsfile</artifactId>
-            <version>${project.version}</version>
+            <version>0.13.2</version>
         </dependency>
         <dependency>
             <groupId>junit</groupId>
diff --git a/tsfile-viewer-core/src/main/java/org/apache/iotdb/tool/core/service/TsFileAnalyserV13.java b/tsfile-viewer-core/src/main/java/org/apache/iotdb/tool/core/service/TsFileAnalyserV13.java
index 0b8c946..6a139b5 100644
--- a/tsfile-viewer-core/src/main/java/org/apache/iotdb/tool/core/service/TsFileAnalyserV13.java
+++ b/tsfile-viewer-core/src/main/java/org/apache/iotdb/tool/core/service/TsFileAnalyserV13.java
@@ -1139,14 +1139,17 @@ public class TsFileAnalyserV13 {
                   .map(chunkOffsetInfo -> chunkOffsetInfo.getMeasurementId())
                   .collect(Collectors.toList()));
       tableInfo.getTitle().set(0, "timestamp");
-      // 查找当前page在timeChunk中的位置
-      List<PageOffsetInfo> pageOffsetListInTimeChunk =
-          fetchPageOffsetListByChunkOffset(chunkOffsetInfoList.get(0).getOffset());
       int positionInTimmeChunkPages = 0;
-      for (int i = 0; i < pageOffsetListInTimeChunk.size(); i++) {
-        if (pageOffsetInfo.getOffset() == pageOffsetListInTimeChunk.get(i).getOffset()) {
-          positionInTimmeChunkPages = i;
-          break;
+      // hasStatistics,对应的是chunk中的信息 false 代表是单页的chunk,
+      if (pageOffsetInfo.isHasStatistics()) {
+        // 查找当前page在timeChunk中的位置
+        List<PageOffsetInfo> pageOffsetListInTimeChunk =
+            fetchPageOffsetListByChunkOffset(chunkOffsetInfoList.get(0).getOffset());
+        for (int i = 0; i < pageOffsetListInTimeChunk.size(); i++) {
+          if (pageOffsetInfo.getOffset() == pageOffsetListInTimeChunk.get(i).getOffset()) {
+            positionInTimmeChunkPages = i;
+            break;
+          }
         }
       }
 
diff --git a/tsfile-viewer-web-frontend/src/pages/tsfile-tool/v2/overview/overview.jsx b/tsfile-viewer-web-frontend/src/pages/tsfile-tool/v2/overview/overview.jsx
index fc12d7b..b3e8aa3 100644
--- a/tsfile-viewer-web-frontend/src/pages/tsfile-tool/v2/overview/overview.jsx
+++ b/tsfile-viewer-web-frontend/src/pages/tsfile-tool/v2/overview/overview.jsx
@@ -34,31 +34,38 @@ const Tsfile = (props) => {
     }
     const getMessage = (wrap)=>{
         let message;
+        let messageShow;
         if(wrap == undefined){
             message = "";
+            messageShow = "";
         }else{
-            message = wrap.deviceName +"\n[" + wrap.offset + "]";
+            message = <div className={styles.hcenter}>{wrap.deviceName }<br/>{"[" + wrap.offset + "]"}</div>;
+            messageShow = wrap.deviceName +"\n[" + wrap.offset + "]";
         }
         return (
-            <Tooltip placement="bottomLeft" title={<span style={{"whiteSpace":"pre-line"}}>{message}</span>}>
-                {message}
+            <Tooltip placement="bottomLeft" title={<span style={{"whiteSpace":"pre-line"}}>{messageShow}</span>}>
+                <h3 className={styles.hcenter}>{message}</h3>
             </Tooltip>
         )
     }
     const getMessageIndex = (wrap)=>{
         let message;
+        let messageShow;
         if(wrap == undefined){
             message = "";
+            messageShow = "";
         }else{
-            message = wrap.deviceId;
             if(!wrap.aligned){
-                message = message + "\n"+wrap.measurementId;
+                message = <div className={styles.hcenter}>{wrap.deviceId }<br/>{"[" + wrap.measurementId + "]"}<br/>{"[" + wrap.offset + "]"}</div>;
+                messageShow = wrap.deviceId +"\n[" + wrap.measurementId + "]\n[" + wrap.offset + "]";
+            }else{
+                message = <div className={styles.hcenter}>{wrap.deviceId }<br/>{"[" + wrap.offset + "]"}</div>;
+                messageShow = wrap.deviceId +"\n[" + wrap.offset + "]";
             }
-            message = message +"\n[" + wrap.offset + "]"
         }
         return (
             <Tooltip placement="bottomLeft" title={<span style={{"whiteSpace":"pre-line"}}>{message}</span>}>
-                {message}
+                <h3 className={styles.hcenter}>{message}</h3>
             </Tooltip>
         )
     }
@@ -74,13 +81,13 @@ const Tsfile = (props) => {
             <div className={styles.notoplinerow}>
                 <Row gutter={[8, 8]} align="middle" justify="center" style={{ height: "200px", padding: 5 }}>
                     <Col span={6} style={{ height: "160px" }}>
-                        <div className={styles.longStyle} onClick={() => doMessageShow("ChunkGroup", baseInfo.chunkGroupList[0] ? baseInfo.chunkGroupList[0].offset : undefined)}><h3 className={styles.hcenter}>{getMessage(baseInfo.chunkGroupList[0])}</h3></div>
+                        <div className={styles.longStyle} onClick={() => doMessageShow("ChunkGroup", baseInfo.chunkGroupList[0] ? baseInfo.chunkGroupList[0].offset : undefined)}>{getMessage(baseInfo.chunkGroupList[0])}</div>
                     </Col>
                     <Col span={6} style={{ height: "160px" }}>
-                        <div className={styles.longStyle} hidden={baseInfo.chunkGroupList[1] ? false : true} onClick={() => doMessageShow("ChunkGroup", baseInfo.chunkGroupList[1] ? baseInfo.chunkGroupList[1].offset : undefined)}><h3 className={styles.hcenter}>{getMessage(baseInfo.chunkGroupList[1])}</h3></div>
+                        <div className={styles.longStyle} hidden={baseInfo.chunkGroupList[1] ? false : true} onClick={() => doMessageShow("ChunkGroup", baseInfo.chunkGroupList[1] ? baseInfo.chunkGroupList[1].offset : undefined)}>{getMessage(baseInfo.chunkGroupList[1])}</div>
                     </Col>
                     <Col span={6} style={{ height: "160px" }}>
-                        <div className={styles.longStyle} hidden={baseInfo.chunkGroupList[2] ? false : true} onClick={() => doMessageShow("ChunkGroup", baseInfo.chunkGroupList[2] ? baseInfo.chunkGroupList[2].offset : undefined)}><h3 className={styles.hcenter}>{getMessage(baseInfo.chunkGroupList[2])}</h3></div>
+                        <div className={styles.longStyle} hidden={baseInfo.chunkGroupList[2] ? false : true} onClick={() => doMessageShow("ChunkGroup", baseInfo.chunkGroupList[2] ? baseInfo.chunkGroupList[2].offset : undefined)}>{getMessage(baseInfo.chunkGroupList[2])}</div>
                     </Col>
                     <Col span={6} style={{ height: "160px" }}>
                         <div className={styles.longStyle} onClick={() => doMessageShow("CGMORE")}><h3 className={styles.hcenter}>more infos</h3></div>
@@ -91,13 +98,13 @@ const Tsfile = (props) => {
             <div className={styles.notoplinerow}>
                 <Row gutter={[8, 8]} align="middle" justify="center" style={{ height: "200px", padding: 5 }}>
                     <Col span={6} style={{ height: "160px" }}>
-                        <div className={styles.longStyle} onClick={() => doMessageShow("TimeseriesIndex", baseInfo.timeseriesIndexList[0] ? baseInfo.timeseriesIndexList[0].offset : undefined)}><h3 className={styles.hcenter}>{getMessageIndex(baseInfo.timeseriesIndexList[0])}</h3></div>
+                        <div className={styles.longStyle} onClick={() => doMessageShow("TimeseriesIndex", baseInfo.timeseriesIndexList[0] ? baseInfo.timeseriesIndexList[0].offset : undefined)}>{getMessageIndex(baseInfo.timeseriesIndexList[0])}</div>
                     </Col>
                     <Col span={6} style={{ height: "160px" }}>
-                        <div className={styles.longStyle} hidden={baseInfo.timeseriesIndexList[1] ? false : true} onClick={() => doMessageShow("TimeseriesIndex", baseInfo.timeseriesIndexList[1] ? baseInfo.timeseriesIndexList[1].offset : undefined)}><h3 className={styles.hcenter}>{getMessageIndex(baseInfo.timeseriesIndexList[1])}</h3></div>
+                        <div className={styles.longStyle} hidden={baseInfo.timeseriesIndexList[1] ? false : true} onClick={() => doMessageShow("TimeseriesIndex", baseInfo.timeseriesIndexList[1] ? baseInfo.timeseriesIndexList[1].offset : undefined)}>{getMessageIndex(baseInfo.timeseriesIndexList[1])}</div>
                     </Col>
                     <Col span={6} style={{ height: "160px" }}>
-                        <div className={styles.longStyle} hidden={baseInfo.timeseriesIndexList[2] ? false : true} onClick={() => doMessageShow("TimeseriesIndex", baseInfo.timeseriesIndexList[2] ? baseInfo.timeseriesIndexList[2].offset : undefined)}><h3 className={styles.hcenter}>{getMessageIndex(baseInfo.timeseriesIndexList[2])}</h3></div>
+                        <div className={styles.longStyle} hidden={baseInfo.timeseriesIndexList[2] ? false : true} onClick={() => doMessageShow("TimeseriesIndex", baseInfo.timeseriesIndexList[2] ? baseInfo.timeseriesIndexList[2].offset : undefined)}>{getMessageIndex(baseInfo.timeseriesIndexList[2])}</div>
                     </Col>
                     <Col span={6} style={{ height: "160px" }}>
                         <div className={styles.longStyle} onClick={() => doMessageShow("TIMORE")}><h3 className={styles.hcenter}>more infos</h3></div>
diff --git a/tsfile-viewer-web-frontend/src/pages/tsfile-tool/v2/style.less b/tsfile-viewer-web-frontend/src/pages/tsfile-tool/v2/style.less
index 27cdad6..30f5baa 100644
--- a/tsfile-viewer-web-frontend/src/pages/tsfile-tool/v2/style.less
+++ b/tsfile-viewer-web-frontend/src/pages/tsfile-tool/v2/style.less
@@ -72,7 +72,7 @@
 }
 
 .hcenter{
-    white-space: break-spaces;
+    white-space: nowrap;
     overflow: hidden;
     text-align: center;
     width: 100%;
diff --git a/tsfile-viewer-web/pom.xml b/tsfile-viewer-web/pom.xml
index b845a5c..18ac705 100644
--- a/tsfile-viewer-web/pom.xml
+++ b/tsfile-viewer-web/pom.xml
@@ -149,56 +149,9 @@
 			<artifactId>iotdb-tsfile-viewer-core</artifactId>
 			<version>0.13.2-SNAPSHOT</version>
 		</dependency>
-<!--		<dependency>-->
-<!--			<groupId>org.apache.iotdb</groupId>-->
-<!--			<artifactId>iotdb-tsfile-viewer-web-frontend</artifactId>-->
-<!--			<version>${version}</version>-->
-<!--		</dependency>-->
 
 	</dependencies>
 	<build>
-		<resources>
-			<resource>
-				<directory>${project.basedir}/src/main/resources</directory>
-				<filtering>true</filtering>
-				<includes>
-					<include>**/*.json</include>
-					<include>**/*.properties</include>
-					<include>**/*.sql</include>
-					<include>**/*.vm</include>
-					<include>**/*.xml</include>
-					<include>**/*.yml</include>
-					<include>**/*.html</include>
-					<include>**/*.ini</include>
-					<include>**/*.js</include>
-					<include>**/*.css</include>
-					<include>**/*.factories</include>
-					<include>**/*.db</include>
-					<include>**/*.png</include>
-				</includes>
-			</resource>
-		</resources>
-		<testResources>
-			<testResource>
-				<directory>${project.basedir}/src/test/resources</directory>
-				<filtering>true</filtering>
-				<includes>
-					<include>**/*.json</include>
-					<include>**/*.properties</include>
-					<include>**/*.sql</include>
-					<include>**/*.vm</include>
-					<include>**/*.xml</include>
-					<include>**/*.yml</include>
-					<include>**/*.html</include>
-					<include>**/*.ini</include>
-					<include>**/*.js</include>
-					<include>**/*.css</include>
-					<include>**/*.factories</include>
-					<include>**/*.db</include>
-					<include>**/*.png</include>
-				</includes>
-			</testResource>
-		</testResources>
 		<finalName>${artifactId}-${version}</finalName>
 		<plugins>
 			<plugin>
@@ -216,7 +169,6 @@
 					</execution>
 				</executions>
 			</plugin>
-
 			<plugin>
 				<!-- 插件maven-clean-plugin,用于在编译前,清除之前编译的文件、文件夹等,避免残留之前的内容 -->
 				<groupId>org.apache.maven.plugins</groupId>
@@ -235,6 +187,9 @@
 				<groupId>org.apache.maven.plugins</groupId>
 				<artifactId>maven-resources-plugin</artifactId>
 				<version>2.6</version>
+				<configuration>
+					<encoding>${maven.compiler.encoding}</encoding>
+				</configuration>
 				<executions>
 					<execution>
 						<id>copy static</id>
@@ -265,25 +220,6 @@
 					</execution>
 				</executions>
 			</plugin>
-			<plugin>
-				<groupId>org.codehaus.gmavenplus</groupId>
-				<artifactId>gmavenplus-plugin</artifactId>
-				<version>1.7.1</version>
-				<executions>
-					<execution>
-						<goals>
-							<goal>addSources</goal>
-							<goal>addTestSources</goal>
-							<goal>generateStubs</goal>
-							<goal>compile</goal>
-							<goal>generateTestStubs</goal>
-							<goal>compileTests</goal>
-							<goal>removeStubs</goal>
-							<goal>removeTestStubs</goal>
-						</goals>
-					</execution>
-				</executions>
-			</plugin>
 			<plugin>
 				<groupId>org.apache.maven.plugins</groupId>
 				<artifactId>maven-compiler-plugin</artifactId>
@@ -291,54 +227,10 @@
 				<configuration>
 					<source>1.8</source>
 					<target>1.8</target>
+					<encoding>${maven.compiler.encoding}</encoding>
 				</configuration>
 			</plugin>
 		</plugins>
-		<pluginManagement>
-			<plugins>
-				<!--This plugin's configuration is used to store Eclipse m2e settings 
-					only. It has no influence on the Maven build itself. -->
-				<plugin>
-					<groupId>org.eclipse.m2e</groupId>
-					<artifactId>lifecycle-mapping</artifactId>
-					<version>1.0.0</version>
-					<configuration>
-						<lifecycleMappingMetadata>
-							<pluginExecutions>
-								<pluginExecution>
-									<pluginExecutionFilter>
-										<groupId>
-											org.codehaus.gmavenplus
-										</groupId>
-										<artifactId>
-											gmavenplus-plugin
-										</artifactId>
-										<versionRange>
-											[1.7.1,)
-										</versionRange>
-										<goals>
-											<goal>addSources</goal>
-											<goal>
-												generateTestStubs
-											</goal>
-											<goal>addTestSources</goal>
-											<goal>compile</goal>
-											<goal>removeTestStubs</goal>
-											<goal>compileTests</goal>
-											<goal>removeStubs</goal>
-											<goal>generateStubs</goal>
-										</goals>
-									</pluginExecutionFilter>
-									<action>
-										<ignore></ignore>
-									</action>
-								</pluginExecution>
-							</pluginExecutions>
-						</lifecycleMappingMetadata>
-					</configuration>
-				</plugin>
-			</plugins>
-		</pluginManagement>
 	</build>
 	<packaging>jar</packaging>
 </project>