-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
142 lines (127 loc) · 6.04 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<html>
<head>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<script src="js/libs/codemirror-compressed.js"></script>
<link rel="stylesheet" href="css/codemirror.css">
<!--favicon-->
<link rel="apple-touch-icon" sizes="57x57" href="images/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="images/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="manifest" href="images/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<script src="js/random.js"></script>
<script src="js/d3.v3.min.js"></script>
<script src="jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="config.js"></script>
<!--google analytics snipet-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', GoogleAnalyticsID, 'auto');
ga('send', 'pageview');
</script>
<style>
div.CodeMirror {
height: 210px;
}
div.CodeMirror span.CodeMirror-matchingbracket {
color: #99F;
}
</style>
<meta charset="UTF-8">
<meta name="description" content="Data Modeling Tool for Apache Cassandra">
<meta name="keywords" content="data, modeling, cassandra, stress, cassandra-stress, c*">
<meta name="author" content="Sebastian Estevez">
</head>
<body>
<title>
CQL Data Modeler
</title>
<link rel="stylesheet" href="css/ds.css" id="LINK_7">
<!--This is ugly autogenerated html. some day I will fix it-->
<div>
<h1 style="display:inline">CQL Data Modeler</h1>
<div style="display:inline; float:right; width:200px"><img src="images/eye.png" width="100%" /></div>
</div>
<div>
<form>
<div style="display:block">
<p>This tool is meant to improve your experience with Apache Cassandra.
Provide some information about your table definition, and the size, population, and cluster distributions of each of your fields and the tool will give you a script you can use to benchmark your data model and a storage engine visualization.</br></br>
Please input your table definition for one table, keeping the Create statement, field definitions, and Primary Key definition on separate lines.</p>
<input style="display:block" id="keyspace" placeholder="Keyspace Name" value="test_keyspace"></input> </br>
<textarea id="tableDef" placeholder="Create Table Statement" >
CREATE TABLE reviews_by_day (
userid text,
day int,
productid text,
reviewid uuid,
profilename text,
helpfulness text,
score text,
summary text,
review text,
time timestamp,
PRIMARY KEY (userid, productid, time, reviewid))
</textarea>
<a href="" class="ui-btn" id="submit-button" >Verify Table</a>
</div>
<br>
<div>
<h3 id='valid'></h3>
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li><a href="#thriftStorage" class="ui-btn-active" data-ajax="false">1) Storage Engine Visualization</a></li>
<li><a href="#parameters" data-ajax="false">2) Configuration</a></li>
<li><a href="#countResults" data-ajax="false">3) Test and Diagnosis</a></li>
</ul>
</div>
<hr>
<div id="thriftStorage" style="overflow:scroll;margin-right:20px" class="ui-body-d ui-content"></div>
<div id="parameters"></div>
<div style="display:inline">
<div id="countResults"><p>Please complete the configuration tab.</p>
<a href="" style="font-size: medium" class="ui-link ui-btn" id="generateYaml">Generate Cassandra Stress 2.1 Yaml</a>
</div>
</div>
<div>
</div>
<br>
<div>
</div>
</form>
<div class="centerDiv">
<h3 id="loadStatus">Loading...</h3>
</div>
<hr>
<div style="text-align:center">
<span style="font-size:small; color:gray">If you like this project take a look at <a href="https://issues.apache.org/jira/browse/CASSANDRA-12054">CASSANDRA-12054</a>. The source code is on <a href="https://github.com/phact/CassandraDataModeler">github</a></span>
</div>
</div>
<script src="js/histograms.js"></script>
<script>
window.editor = CodeMirror.fromTextArea(document.getElementById('tableDef'), {
mode: 'text/x-cassandra',
lineNumbers: true,
matchBrackets: true
});
</script>
<script type="text/javascript" src="js/sizer.js"></script>
<script type="text/javascript" src="js/storageEngineRepresentation.js"></script>
</body>