You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@griffin.apache.org by gu...@apache.org on 2017/10/11 04:31:03 UTC
[03/13] incubator-griffin git commit: refactor ui with angular2
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/measures/createrule-pu.html
----------------------------------------------------------------------
diff --git a/ui/pages/measures/createrule-pu.html b/ui/pages/measures/createrule-pu.html
deleted file mode 100644
index bcc5bf4..0000000
--- a/ui/pages/measures/createrule-pu.html
+++ /dev/null
@@ -1,238 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div class="container-fluid">
- <div class="row">
- <h5 class="over-title margin-bottom-15">Create DQ Model</h5>
- </div><!--//row-->
- <div class="row">
- <form name="Form" id="form" novalidate>
- <div id="wizard" class="swMain" >
- <ul>
- <li>
- <a href="" class="onlyone selected" >
- <div class="stepNumber">
- 1
- </div>
- <span class="stepDesc text-small"> Configuration </span>
- </a>
- </ul>
-
- <div id="step-1" ng-show="currentStep == 1" class="formStep" >
- <label class="stepDesc">Please setup the model required information</label>
- <div class="container-fluid">
-
- <!-- schema definition list -->
- <div class="col-md-12 col-lg-12 col-sm-12">
- <fieldset>
- <legend>
- Required Information
- </legend>
- <div class="y-scrollable">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <div class="form-group" ng-class="{'has-error':Form.ruleName.$dirty&&Form.ruleName.$invalid, 'has-success':Form.ruleName.$valid}">
- <label class="col-md-2 col-lg-2 col-sm-2 control-label">
- Model Name<span class="symbol required"></span>:
- </label>
-
- <div class="col-md-10 col-lg-10 col-sm-10 ">
- <input type="text" class="form-control" ng-model="form.basic.name" name="ruleName" placeholder="Please input the measure name" required ng-pattern="'([0-9a-zA-Z\\_\\-])+'">
- <span class="error text-small block " ng-if="Form.ruleName.$dirty && Form.ruleName.$error.required">Model Name is required</span>
- <span class="error text-small block " ng-if="Form.ruleName.$dirty && Form.ruleName.$error.pattern">Only letter, number, "-" and "_" are allowed</span>
- </div>
- </div>
- </div>
- <div class="col-md-12 col-lg-12 col-sm-12">
- <div class="form-group">
- <label class="col-md-2 col-lg-2 col-sm-2 control-label">
- Model Definition:
- </label>
-
- <div class="col-md-10 col-lg-10 col-sm-10 ">
- <input type="text" class="form-control" ng-model="form.basic.desc" placeholder="Please input detail description of your model">
- </div>
- </div>
- </div>
- <div class="col-md-12 col-lg-12 col-sm-12">
- <div class="form-group">
- <label for="typeSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
- Model Type:
- </label>
-
- <div class="col-md-10 col-lg-10 col-sm-10 ">
- <select id="typeSelector" class="form-control" ng-model="form.basic.type" ng-init="form.basic.type='3'" disabled required>
- <option ng-repeat="row in ruleTypes" value="{{$index}}" >{{row}}</option>
- </select>
- </div>
- </div>
- </div>
- <div class="col-md-12 col-lg-12 col-sm-12">
- <div class="form-group">
- <label for="systemSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
- Organization<span class="symbol required"></span>:
- </label>
-
- <div class="col-md-10 col-lg-10 col-sm-10 ">
- <select id="systemSelector" class="form-control" ng-model="form.basic.system" ng-init="form.basic.system='-1'" ng-change="sysChange()" required>
- <option value="-1">Please select...</option>
- <option ng-repeat="row in ruleSystems" value="{{$index}}" >{{row}}</option>
- </select>
- </div>
- </div>
- </div>
- <div class="col-md-12 col-lg-12 col-sm-12">
- <div class="form-group">
- <label class="col-md-2 col-lg-2 col-sm-2 control-label">
- DataAsset:
- </label>
-
- <div class="col-md-10 col-lg-10 col-sm-10">
- <!-- <input type="text" class="form-control" ng-model="form.basic.dataaset"> -->
- <select id="assetSelector" class="form-control" ng-model="form.basic.dataaset">
- <option value="">Please select...(optional)</option>
- <option ng-repeat="row in assets" value="{{row.name}}" >{{row.name}}</option>
- </select>
- </div>
-
- </div>
- </div>
- <div class="col-md-12 col-lg-12 col-sm-12">
- <div class="form-group" ng-class="{'has-error':Form.threshold.$invalid}">
- <label class="col-md-2 col-lg-2 col-sm-2 control-label">
- Threshold:
- </label>
-
- <div class="col-md-10 col-lg-10 col-sm-10">
- <input type="number" class="form-control" ng-model="form.basic.threshold" name="threshold">
- <span class="error text-small block" ng-if="Form.threshold.$error.number">Only number is allowed</span>
- </div>
- </div>
- </div>
- <div class="col-md-12 col-lg-12 col-sm-12">
- <div class="form-group">
- <label class="col-md-2 col-lg-2 col-sm-2 control-label">
- Schedule Type:
- </label>
-
- <div class="col-md-10 col-lg-10 col-sm-10 ">
- <select class="form-control" ng-init="form.basic.scheduleType='1'" ng-model="form.basic.scheduleType" ng-init="form.basic.scheduleType='0'">
- <option ng-repeat="row in scheduleTypes" value="{{$index}}" >{{row}}</option>
- </select>
- </div>
- </div>
- </div>
- <div class="col-md-12 col-lg-12 col-sm-12">
- <div class="form-group" ng-class="{'has-error':Form.email.$dirty&&Form.email.$invalid, 'has-success':Form.email.$valid}">
- <label class="col-md-2 col-lg-2 col-sm-2 control-label">
- Notification email<span class="symbol required"></span>:
- </label>
-
- <div class="col-md-10 col-lg-10 col-sm-10">
- <input type="email" class="form-control" ng-model="form.basic.email" name="email" ng-required="currentStep==1" placeholder="Please input valid email address" ng-pattern="'^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$'">
- <span class="error text-small block" ng-if="Form.email.$dirty&&Form.email.$invalid">Please, enter a valid email address.</span>
- </div>
- </div>
- </div>
- <div class="col-md-12 col-lg-12 col-sm-12">
- <div class="form-group">
- <label class="col-md-2 col-lg-2 col-sm-2 control-label">
- Owner:
- </label>
-
- <div class="col-md-10 col-lg-10 col-sm-10">
- <input type="text" class="form-control" ng-model="form.basic.owner" ng-init="form.basic.owner=ntAccount" disabled>
- </div>
- </div>
- </div>
- <div class="col-md-12 col-lg-12 col-sm-12">
- <div class="form-group " >
- <label class="col-md-2 col-lg-2 col-sm-2 control-label">
- Publish URL:
- </label>
-
- <div class="col-md-10 col-lg-10 col-sm-10 has-error">
- <input type="text" class="form-control" ng-model="form.publishUrl" ng-init="form.publishUrl='https://bark.vip.ebay.com/api/v1/metrics/<name>'" disabled>
- <span class="error text-small block" >Please remember this URL which is used to publish your metrics</span>
- </div>
- </div>
- </div>
- <div class="col-md-12 col-lg-12 col-sm-12">
- <div class="form-group " >
- <label class="col-md-2 col-lg-2 col-sm-2 control-label">
- Publish data format:
- </label>
-
- <div class="col-md-10 col-lg-10 col-sm-10 ">
- <pre style="background-color:transparent;color:inherit;border:none">Method: POST
- Endpoint: {{form.publishUrl}}
- Body:
- {
- "metricName": "{{form.basic.name}}",
- "timestamp": 1463373496583,
- "value": 99.9
- }</pre>
-
- </div>
- </div>
- </div>
-
-
- </div>
-
- <div class="createrule-hint">
- <p>
- <i class="fa fa-info-circle"></i> After submitted, please go to "<a class="bark-link" href='#/measures
-
-'>Models</a>" to check the model status
- </p>
- </div>
-
-
- </fieldset>
-
- </div>
-
- <div class="form-group btn-container" >
- <button class="btn btn-primary btn-o next-step btn-wide pull-right" ng-click="form.submit(Form)">
- Submit
- </button>
- </div>
- </div>
- </div>
-
- <div class="modal fade" id="confirm-pu" role="dialog">
- <div class="modal-dialog modal-xg modal-lg">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
- <h4 class="modal-title">Save the model with the below information?</h4>
- </div>
- <div class="modal-body">
- <ng-include src="'/pages/measures/confirmation-pu.html'"/>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
- <button type="button" class="btn btn-primary" ng-click="form.save()">Save</button>
- </div>
- </div>
- </div>
- </div>
- </div>
- </form>
- </div><!--//row-->
-</div>
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/measures/createrule-va.html
----------------------------------------------------------------------
diff --git a/ui/pages/measures/createrule-va.html b/ui/pages/measures/createrule-va.html
deleted file mode 100644
index caed0c2..0000000
--- a/ui/pages/measures/createrule-va.html
+++ /dev/null
@@ -1,407 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div class="container-fluid">
- <div class="row">
- <h5 class="over-title margin-bottom-15">Create DQ Model</h5>
- </div><!--//row-->
- <div class="row">
- <form name="Form" id="form" novalidate>
- <div id="wizard" class="swMain" >
- <ul>
- <li ng-click="form.goTo(Form, 1)">
- <a href="" ng-class="{'selected' : currentStep >= 1, 'done' : currentStep > 1}" class="selected" style="">
- <div class="stepNumber">
- 1
- </div>
- <span class="stepDesc text-small"> Choose Target </span>
- </a>
- </li>
- <li ng-click="form.goTo(Form, 2)">
- <a href="" ng-class="{'selected' : currentStep >= 2, 'done' : currentStep > 2}" class="" style="">
- <div class="stepNumber">
- 2
- </div>
- <span class="stepDesc text-small"> Select Models </span>
- </a>
- </li>
- <li ng-click="form.goTo(Form, 3)">
- <a href="" ng-class="{'selected' : currentStep >= 3, 'done' : currentStep > 3}" class="" style="">
- <div class="stepNumber">
- 3
- </div>
- <span class="stepDesc text-small"> Configuration </span>
- </a>
- </li>
-
- </ul>
-
- <div id="step-1" ng-show="currentStep == 1" class="formStep" >
- <label class="stepDesc">This step let you choose the target for data quality comparision with target, Apollo datasets are enabled, other platofrms are coming soon. Currently you can only select the attributes from one schema</label>
- <div class="container-fluid">
- <!-- select db tree -->
- <div class="col-md-4 col-lg-4 col-sm-4">
- <fieldset>
- <legend>Please select schema</legend>
- <div class="add-dataset" style="color:#b2c831">
- <a class="bark-link" href="#/createdataasset">Cannot find your DataAsset? Click here to add</a>
- </div>
- <div angular-treeview="true"
- tree-model="dbList"
- node-id="id"
- node-label="name"
- node-children="children"
- l1-icon="fa fa-database"
- l2-icon="fa fa-table"
- l3-icon="fa fa-file-text-o"
- class="y-scrollable">
- </div>
-
- </fieldset>
- </div>
-
- <!-- schema definition list -->
- <div class="col-md-8 col-lg-8 col-sm-8">
- <fieldset>
- <legend>
- Select one attribute
- </legend>
-
- <div class="y-scrollable">
- <div>
- <label>View schema:</label> <i ng-show="currentNode.parent" style="color:#fff;font-weight: bold;">{{currentNode.parent.name}}.{{currentNode.name}}</i>
- </div>
- <div>
- <label>Selected Column:</label> <i style="color:#fff;font-weight: bold;">{{form.selection}}</i>
- </div>
- <div>
- <table st-table="schemaCollection" class="table table-striped">
- <thead>
- <tr style="background-color:#7D95CC">
- <th></th>
- <th>Column Name</th>
- <th>Description</th>
- <th>Data Type</th>
- <th>Sample Data</th>
-
- </tr>
- </thead>
- <tbody>
- <tr ng-if="!schemaCollection || schemaCollection.length == 0">
- <td colspan="5" style="text-align:center" ><span class="highlight">Please select a schema from the left tree first</span></td>
- </tr>
- <tr ng-repeat="row in schemaCollection">
- <td><input type="radio"
- name="selAttr"
- value="{{row.name}}"
- ng-model="form.selection"
- />
- </td>
- <td>{{row.name}}</td>
- <td>{{row.desc}}</td>
- <td>{{row.type}}</td>
- <td class="highlight">{{row.sample}}</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </fieldset>
- </div>
-
- <div class="form-group btn-container">
- <button class="btn btn-primary btn-o next-step btn-wide pull-right" ng-click="form.next(Form)">
- Next <i class="fa fa-arrow-circle-right"></i>
- </button>
- </div>
-
- </div>
-
- </div>
-
-
-
-
- <div id="step-2" ng-show="currentStep == 2" class="formStep" >
- <label class="stepDesc">Please choose one of the validity models provided below:</label>
- <div class="container-fluid">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <fieldset>
- <div class="y-scrollable">
- <div class="container col-md-12 col-lg-12 col-sm-12">
- <div class="row">
- <div class="col-md-3 col-lg-3 col-sm-3">
- <h5>Simple Statistics</h5>
- <div class="container-fluid">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <input name="vaType" type="radio" ng-model="form.vaType" value="2" ng-init="form.vaType=2" /> <label>Null Count</label>
- </div>
- </div>
- <div class="container-fluid">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <input name="vaType" type="radio" ng-model="form.vaType" value="3"/> <label>Unique Count</label>
- </div>
- </div>
- <div class="container-fluid">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <input name="vaType" type="radio" ng-model="form.vaType" value="4"/> <label>Duplicate Count</label>
- </div>
- </div>
- <h5>Summary Statistics</h5>
- <div class="container-fluid">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <input name="vaType" type="radio" ng-model="form.vaType" value="5"/> <label>Maximum</label>
- </div>
- </div>
- <div class="container-fluid">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <input name="vaType" type="radio" ng-model="form.vaType" value="6"/> <label>Minimum</label>
- </div>
- </div>
- <div class="container-fluid">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <input name="vaType" type="radio" ng-model="form.vaType" value="7"/> <label>Mean</label>
- </div>
- </div>
- <div class="container-fluid">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <input name="vaType" type="radio" ng-model="form.vaType" value="8"/> <label>Median</label>
- </div>
- </div>
- <h5>Advanced Statistics</h5>
- <div class="container-fluid">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <input name="vaType" type="radio" ng-model="form.vaType" value="9" disabled/> <label>Regular Expression Match</label>
- </div>
- </div>
- </div>
- <div class="col-md-9 col-lg-9 col-sm-9" ng-include="'/pages/measures/va-explaination.html'">
- <!-- <ng-include src="'/models.html'"/> -->
- </div>
- </div>
- </div>
- </div>
- </fieldset>
- </div>
-
- <div class="form-group btn-container" >
- <button class="btn btn-primary btn-o back-step btn-wide pull-left" ng-click="form.prev(Form)">
- <i class="fa fa-arrow-circle-left"></i> Back
- </button>
- <button class="btn btn-primary btn-o next-step btn-wide pull-right" ng-click="form.next(Form)">
- Next <i class="fa fa-arrow-circle-right"></i>
- </button>
- </div>
- </div>
- </div>
-
- <div id="step-3" ng-show="currentStep == 3" class="formStep" >
- <label class="stepDesc">Please setup the model required information</label>
- <div class="container-fluid">
-
- <!-- schema definition list -->
- <div class="col-md-12 col-lg-12 col-sm-12">
- <fieldset>
- <legend>
- Required Information
- </legend>
- <div class="y-scrollable">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <div class="form-group" ng-class="{'has-error':Form.ruleName.$dirty&&Form.ruleName.$invalid, 'has-success':Form.ruleName.$valid}">
- <label class="col-md-2 col-lg-2 col-sm-2 control-label">
- Model Name<span class="symbol required"></span>:
- </label>
-
- <div class="col-md-10 col-lg-10 col-sm-10 ">
- <input type="text" class="form-control" ng-model="form.basic.name" name="ruleName" placeholder="Please input the measure name" required ng-pattern="'([0-9a-zA-Z\\_\\-])+'">
- <span class="error text-small block " ng-if="Form.ruleName.$dirty && Form.ruleName.$error.required">Model Name is required</span>
- <span class="error text-small block " ng-if="Form.ruleName.$dirty && Form.ruleName.$error.pattern">Only letter, number, "-" and "_" are allowed</span>
- </div>
-
- </div>
- </div>
- <div class="col-md-12 col-lg-12 col-sm-12">
- <div class="form-group">
- <label class="col-md-2 col-lg-2 col-sm-2 control-label">
- Model Definition:
- </label>
-
- <div class="col-md-10 col-lg-10 col-sm-10 ">
- <input type="text" class="form-control" ng-model="form.basic.desc" placeholder="Please input detail description of your model">
- </div>
- </div>
- </div>
- <div class="col-md-12 col-lg-12 col-sm-12">
- <div class="form-group">
- <label for="typeSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
- Model Type:
- </label>
-
- <div class="col-md-10 col-lg-10 col-sm-10 ">
- <select id="typeSelector" class="form-control" ng-model="form.basic.type" ng-init="form.basic.type='1'" disabled required>
- <option ng-repeat="row in ruleTypes" value="{{$index}}" >{{row}}</option>
- </select>
- </div>
- </div>
- </div>
- <div class="col-md-12 col-lg-12 col-sm-12">
- <div class="form-group">
- <label for="systemSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
- Organization:
- </label>
-
- <div class="col-md-10 col-lg-10 col-sm-10 ">
- <select id="systemSelector" class="form-control" ng-model="form.basic.system" required disabled>
- <option ng-repeat="row in ruleSystems" value="{{$index}}" >{{row}}</option>
- </select>
- </div>
- </div>
- </div>
- <div class="col-md-12 col-lg-12 col-sm-12">
- <div class="form-group">
- <label class="col-md-2 col-lg-2 col-sm-2 control-label">
- DataAsset:
- </label>
-
- <div class="col-md-10 col-lg-10 col-sm-10">
- <input type="text" class="form-control" ng-model="currentNode.name" disabled>
- </div>
- </div>
- </div>
- <div ng-show="form.vaType==9" class="col-md-12 col-lg-12 col-sm-12" ng-class="{'has-error':Form.regex.$dirty && Form.regex.$invalid, 'has-success':Form.regex.$valid}">
- <div class="form-group">
- <label class="col-md-2 col-lg-2 col-sm-2 control-label">
- Regular Expression<span class="symbol required"></span>:
- </label>
-
- <div class="col-md-10 col-lg-10 col-sm-10">
- <div class="row">
- <div class="col-md-10 col-lg-10 col-sm-10">
- <input type="text" class="form-control" ng-model="form.basic.regex" name="regex" placeholder="Some expression like ^[A-Za-z]+$" ng-required="form.vaType==9" ng-change="form.testRegex(Form)">
- <span class="error text-small block" ng-if="Form.regex.$dirty && Form.regex.$invalid">Please input valid regular expression.</span>
- </div>
- <div class="col-md-2 col-lg-2 col-sm-2">
- <button type="button" class="btn btn-primary btn-o next-step" style="width:100%;" ng-click="needTestRegex=!needTestRegex" ng-init="needTestRegex=false;"><i class="faChevron" ng-class="needTestRegex ?'fa fa-angle-down':'fa fa-angle-right'" style="width:10px"></i> Test Regex</button>
- </div>
- </div>
- <div class="row" ng-show="needTestRegex">
- <div class="col-md-10 col-lg-10 col-sm-10">
- <input type="text" class="form-control" ng-model="form.basic.regexTestStr" name="regexTestStr" placeholder="Please input the test string here" ng-change="form.testRegex(Form)">
- </div>
- <div class="col-md-2 col-lg-2 col-sm-2" style="padding-top:8px;">
- <span class="test-result" ng-class="{'bg-success': regexTestResult=='Matched', 'bg-danger': regexTestResult=='Unmatched'}">{{regexTestResult}}</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="col-md-12 col-lg-12 col-sm-12">
- <div class="form-group" ng-class="{'has-error':Form.threshold.$invalid}">
- <label class="col-md-2 col-lg-2 col-sm-2 control-label">
- Threshold:
- </label>
-
- <div class="col-md-10 col-lg-10 col-sm-10">
- <input type="number" class="form-control" ng-model="form.basic.threshold" name="threshold">
- <span class="error text-small block" ng-if="Form.threshold.$error.number">Only number is allowed</span>
- </div>
- </div>
- </div>
- <div class="col-md-12 col-lg-12 col-sm-12">
- <div class="form-group">
- <label class="col-md-2 col-lg-2 col-sm-2 control-label">
- Schedule Type:
- </label>
-
- <div class="col-md-10 col-lg-10 col-sm-10 ">
- <select class="form-control" ng-init="form.basic.scheduleType='1'" ng-model="form.basic.scheduleType" ng-init="form.basic.scheduleType='0'">
- <option ng-repeat="row in scheduleTypes" value="{{$index}}" >{{row}}</option>
- </select>
- </div>
- </div>
- </div>
- <div class="col-md-12 col-lg-12 col-sm-12">
- <div class="form-group" ng-class="{'has-error':Form.email.$dirty&&Form.email.$invalid, 'has-success':Form.email.$valid}">
- <label class="col-md-2 col-lg-2 col-sm-2 control-label">
- Notification email<span class="symbol required"></span>:
- </label>
-
- <div class="col-md-10 col-lg-10 col-sm-10">
- <input type="email" class="form-control" ng-model="form.basic.email" name="email" ng-required="currentStep==3" placeholder="Please input valid email address" ng-pattern="'^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$'">
- <span class="error text-small block" ng-if="Form.email.$dirty&&Form.email.$invalid">Please, enter a valid email address.</span>
- </div>
- </div>
- </div>
- <div class="col-md-12 col-lg-12 col-sm-12">
- <div class="form-group">
- <label class="col-md-2 col-lg-2 col-sm-2 control-label">
- Owner:
- </label>
-
- <div class="col-md-10 col-lg-10 col-sm-10">
- <input type="text" class="form-control" ng-model="form.basic.owner" ng-init="form.basic.owner=ntAccount" disabled>
- </div>
- </div>
- </div>
- </div>
-
- <!-- <div style="color:#fff">
- <label style="color:#b2c831">Tips: </label>After submitted, please go to "Rule Repository" to check the rule status
- </div> -->
-
- <div style="color:#b2c831">
- <p>
- <i class="fa fa-info-circle"></i> After submitted, please go to "<a class="bark-link" href="#/measures">Models</a>" to check the model status
- </p>
- </div>
-
- </fieldset>
- </div>
-
- <div class="form-group btn-container" >
- <button class="btn btn-primary btn-o back-step btn-wide pull-left" ng-click="form.prev(Form)">
- <i class="fa fa-arrow-circle-left"></i> Back
- </button>
- <button class="btn btn-primary btn-o next-step btn-wide pull-right" ng-click="form.submit(Form)">
- <!-- <button class="btn btn-primary btn-o next-step btn-wide pull-right" data-toggle="modal" data-target="#confirm"> -->
- Submit
- </button>
- </div>
- </div>
- </div>
-
- <div class="modal fade" id="confirm-va" role="dialog">
- <div class="modal-dialog modal-xg modal-lg">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
- <h4 class="modal-title">Save the model with the below information?</h4>
- </div>
- <div class="modal-body">
- <ng-include src="'/pages/measures/confirmation-va.html'"/>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
- <button type="button" class="btn btn-primary" ng-click="form.save()">Save</button>
- </div>
- </div>
- </div>
- </div>
- </form>
- </div><!--//row-->
-</div>
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/measures/createrule0.html
----------------------------------------------------------------------
diff --git a/ui/pages/measures/createrule0.html b/ui/pages/measures/createrule0.html
deleted file mode 100644
index 4f520a7..0000000
--- a/ui/pages/measures/createrule0.html
+++ /dev/null
@@ -1,259 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div class="container-fluid" id="main" >
- <div class="row">
- <h5 class="over-title margin-bottom-15">Create DQ Model</h5>
- </div><!--//row-->
- <div class="row">
-
- <div class="col-lg-6 col-md-6 col-sm-6 ruletypes">
- <section id="panel-1" class="panel panel-red" style="cursor:pointer" ng-click="click('ac')">
- <div class="panel-heading">
- <span style="font-size:20px">Accuracy</span>
- <span class="pull-right" style="font-size:20px">
- <span class="fa fa-arrow-circle-right" ng-click="click()"></span>
- </span>
- </div>
- <div class="swMain panel-body" >
-
- <label class="label-definition">Definition: Measured by how the values agree with an identified source of truth</label>
-
- <ul style="border-radius:0; background: none">
- <li >
- <a href="" class="selected" >
- <div class="stepNumber">
- 1
- </div>
- <span class="stepDesc text-small"> Choose Source </span>
- </a>
- </li>
- <li>
- <a href="" >
- <div class="stepNumber">
- 2
- </div>
- <span class="stepDesc text-small"> Choose Target </span>
- </a>
- </li>
- <li >
- <a href="" >
- <div class="stepNumber">
- 3
- </div>
- <span class="stepDesc text-small"> Mapping Source and Target </span>
- </a>
- </li>
- <li>
- <a href="" >
- <div class="stepNumber">
- 4
- </div>
- <span class="stepDesc text-small"> Configuration </span>
- </a>
- </li>
-
- </ul>
- <div>
-
- <ol>
- <li>Select the source dataset and fields which will be used for comparision</li>
- <li>Select the target dataset and fields which will be used for comparision</li>
- <li>Mapping the target fields with source</li>
- <li>Set basic configuration for your model (name, system, threshold, etc.)</li>
- </ol>
- </div>
-
-
- </div>
- <div class="panel-footer stepDesc">
- <label>Example:</label> suppose source table A has 1000 records and target table B only has 999 records pefectly matched with A for selected fields, then
- Accuracy Rate(%) = 999/1000 * 100% = 99.9%
- </div>
- </section>
- </div>
- <div class="col-lg-6 col-md-6 col-sm-6 ruletypes" style="opacity:0.6">
- <section id="panel-2" class="panel panel-primary" style="cursor:default;">
- <!--ng-click="click('va')" -->
- <div class="panel-heading">
- <span style="font-size:20px">Data Profiling</span>
- <span class="pull-right" style="font-size:20px">
- <span class="fa fa-arrow-circle-right"></span>
- </span>
- </div>
- <div class="swMain panel-body" >
-
- <label class="label-definition">Definition: Data profiling is the process of examining the data available in an existing data set and collecting statistics and information about that data</label>
-
- <ul style="border-radius:0; background: none">
- <li >
- <a href="" class="done" style="cursor:default">
- <div class="stepNumber">
- 1
- </div>
- <span class="stepDesc text-small"> Choose Target </span>
- </a>
- </li>
- <li>
- <a href="" class="selected" style="cursor:default" >
- <div class="stepNumber">
- 2
- </div>
- <span class="stepDesc text-small">Define/Select Models </span>
- </a>
- </li>
- <li >
- <a href="" style="cursor:default" >
- <div class="stepNumber">
- 3
- </div>
- <span class="stepDesc text-small"> Configuration </span>
- </a>
- </li>
-
-
- </ul>
- <div>
-
- <ol>
- <li>Select the target dataset and fields which want to be checked</li>
- <li>Define your syntax check logic which will be applied on the selected fields</li>
- <li>Set basic configuration for your model(name, system, threshold, etc.)</li>
- </ol>
-
-
- </div>
-
-
- </div>
- <div class="panel-footer stepDesc">
-
- <label>Example:</label> Check the data range(minimum, maximum) within a set of allowable values
- </div>
- </section>
- </div>
-
- </div><!--//row-->
-
- <div class="row">
- <div class="col-lg-6 col-md-6 col-sm-6 ruletypes" style="opacity:0.6;">
- <section id="panel-3" class="panel panel-yellow" style="cursor:default;">
- <!--ng-click="click('an')"-->
- <div class="panel-heading">
- <span style="font-size:20px">Anomaly Detection</span>
- <span class="pull-right" style="font-size:20px">
- <span class="fa fa-arrow-circle-right"></span>
- </span>
- </div>
- <div class="swMain panel-body" >
-
- <label class="label-definition">Definition: Identification of items, events or observations which do not conform to an expected pattern or other items in a dataset</label>
-
- <ul style="border-radius:0; background: none">
- <li >
- <a href="" class="done" style="cursor:default">
- <div class="stepNumber">
- 1
- </div>
- <span class="stepDesc text-small"> Choose Target </span>
- </a>
- </li>
- <li>
- <a href="" class="selected" style="cursor:default" >
- <div class="stepNumber">
- 2
- </div>
- <span class="stepDesc text-small">Define/Select Models </span>
- </a>
- </li>
- <li >
- <a href="" style="cursor:default" >
- <div class="stepNumber">
- 3
- </div>
- <span class="stepDesc text-small"> Configuration </span>
- </a>
- </li>
-
-
- </ul>
- <div>
-
- <ol>
- <li>Select the target dataset and fields which want to be checked</li>
- <li>Select the pre-defined anomaly detection methods which will be applied on the selected fields</li>
- <li>Set basic configuration for your model(name, system, threshold, etc.)</li>
- </ol>
- </div>
- </div>
- <div class="panel-footer stepDesc">
- <label>Example1:</label> Check the total row count changed day over day (or hour over hour) on one Dataset
- <label>Example2:</label> Check the values of all records in Column A should be matched with one expression pattern (first 3 character is 'abc') in one Dataset
- </div>
- </section>
- </div>
-
- <div class="col-lg-6 col-md-6 col-sm-6 ruletypes" style="opacity:0.6;">
- <section id="panel-4" class="panel panel-green" style="cursor:default;">
- <!--ng-click="click('pu')"-->
- <div class="panel-heading">
- <span style="font-size:20px">Publish DQ Metrics Directly</span>
- <span class="pull-right" style="font-size:20px">
- <span class="fa fa-arrow-circle-right"></span>
- </span>
- </div>
- <div class="swMain panel-body" >
-
- <label class="label-definition">Definition: This is used to publish DQ results which already calculated offline by customers</label>
-
- <ul style="border-radius:0; background: none">
- <li >
- <a href="" style="cursor:default" class="onlyone selected">
- <div class="stepNumber">
- 1
- </div>
- <span class="stepDesc text-small"> Configuration </span>
- </a>
- </li>
-
-
-
-
- </ul>
- <div>
-
- <ol>
- <li>Set basic configuration for your model(name, system, threshold, etc.)</li>
- </ol>
- </div>
- </div>
- <div class="panel-footer stepDesc">
- <label>Example:</label> This example shows how to publish viewitem accuracy result with RESTful service
- <pre style="background-color:transparent;color:inherit;border:none;overflow:hidden;margin:0 0;padding:0 0">Method: POST
-Endpoint: {{publishURL}}
-Body:{"metricName": "viewitem_accuracy", "timestamp": 1463373496583, "value": "99.9"}</pre>
- </div>
- </section>
- </div>
-
- </div><!--//row-->
-
-
-
-</div>
-
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/measures/delete-confirm.html
----------------------------------------------------------------------
diff --git a/ui/pages/measures/delete-confirm.html b/ui/pages/measures/delete-confirm.html
deleted file mode 100644
index 7b26df7..0000000
--- a/ui/pages/measures/delete-confirm.html
+++ /dev/null
@@ -1,95 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div class="container-fluid" id="deleteContent" style="overflow:auto;">
- <div class="row">
- <h5 class="over-title margin-bottom-15">Basic information</h5>
- </div><!--//row-->
- <div class="row">
-
- <div class="col-lg-12 col-md-12 col-sm-12">
- <div id="viewrule-definition" class="viewrule-content">
- <div class="row">
- <label class="col-md-4 col-lg-4 col-sm-4">
- Measure Name:
- </label>
-
- <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
- {{deletedRow.name}}
- </div>
- </div>
-
- <div class="row">
- <label class="col-md-4 col-lg-4 col-sm-4">
- Measure Definition:
- </label>
-
- <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
- {{deletedRow.description}}
- </div>
- </div>
-
- <div class="row">
- <label class="col-md-4 col-lg-4 col-sm-4">
- Measure Type:
- </label>
-
- <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
- {{deletedRow.type|strmap:'modeltype'}}
- </div>
- </div>
-
- <div class="row">
- <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4">
- Organization:
- </label>
-
- <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
- {{deletedRow.organization|strmap:'modelsystem'}}
- </div>
- </div>
-
- <div class="row">
- <label class="col-md-4 col-lg-4 col-sm-4">
- DataAsset:
- </label>
-
- <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
- {{sourceTable}} {{targetTable}}
- </div>
- </div>
-
- <div class="row">
- <label class="col-md-4 col-lg-4 col-sm-4">
- Owner:
- </label>
-
- <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
- {{deletedRow.owner}}
- </div>
- </div>
-
-
- </div>
- </div>
-
-
- </div><!--//row-->
-
-
-</div>
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/measures/detail.html
----------------------------------------------------------------------
diff --git a/ui/pages/measures/detail.html b/ui/pages/measures/detail.html
deleted file mode 100644
index 37dbfa8..0000000
--- a/ui/pages/measures/detail.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-
-<!DOCTYPE html>
-
-<html lang="en">
-
-<head>
-
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <meta name="description" content="">
- <meta name="author" content="">
- <link rel="icon" href="/img/favicon.ico">
-
- <title>Griffin - Data Quality Service</title>
-
- <!-- Bootstrap Core CSS -->
- <link href="bower_components/bootswatch/cyborg/bootstrap.css" rel="stylesheet">
- <!-- Custom Fonts -->
- <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
-
- <link href="bower_components/AngularJS-Toaster/toaster.css" rel="stylesheet">
-
- <link href="css/main.css" rel="stylesheet">
- <link href="css/treeview.css" rel="stylesheet">
- <link href="css/treeview-check.css" rel="stylesheet">
- <link href="css/sidebar.css" rel="stylesheet">
- <link href="pages/measures/measure.css" rel="stylesheet">
- <link href="pages/metrics/metrics.css" rel="stylesheet">
- <link href="pages/template/bigchart.css" rel="stylesheet">
- <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
- <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
- <!--[if lt IE 9]>
- <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
- <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
- <![endif]-->
-
-</head>
-
-
-<body>
-
-<div id="bigChartContainer" class="big-chart-container" style="display:none;" ng-controller="BigChartCtrl">
- <div id="bigChartShow" class="big-chart-content">
- <div class="container-fluid">
- <div class="pull-right" style="position:fixed;right:20px;top:10px;z-index:1050;">
- <button type="button" id="bigChartClose" class="bark-close thick" aria-label="Close" ng-click="closeBigChart()">
- </button>
- </div>
-
- <div class="pull-right" style="position:fixed;right:150px;top:10px;z-index:1050;">
- <a href ng-click="downloadSample()" style="font-size:15px;color:#d48265;"><u>Download Sample</u></a>
- </div>
-
- <div class="row">
- <div id="bigChartDiv"></div>
- </div>
- </div>
- </div>
-</div>
-</body>
-</html>
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/measures/measure.css
----------------------------------------------------------------------
diff --git a/ui/pages/measures/measure.css b/ui/pages/measures/measure.css
deleted file mode 100644
index 1c49004..0000000
--- a/ui/pages/measures/measure.css
+++ /dev/null
@@ -1,347 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License.
-
-*/
-.pagination > li > a{
- cursor:pointer;
-}
-
-
-.swMain>ul {
- display: table;
- list-style: none;
- margin: 0 0 20px;
- padding: 10px 0;
- position: relative;
- width: 100%;
- background: #f7f7f8;
- border-radius: 5px
-}
-
-.swMain>div.formStep{
- background-color: #000000;
- border-radius: 5px;
- padding:10px;
- /*height:800px;*/
-}
-
-.swMain>ul li {
- display: table-cell;
- text-align: center;
- width: 1%
-}
-
-.swMain>ul li>a:before {
- border-top: 4px solid #c8c7cc;
- content: "";
- display: block;
- font-size: 0;
- height: 1px;
- overflow: hidden;
- position: relative;
- top: 21px;
- width: 100%;
- z-index: 1
-}
-
-.swMain>ul li:first-child>a:before {
- left: 50%;
- max-width: 51%
-}
-
-.swMain>ul li:last-child>a:before {
- max-width: 50%;
- width: 50%
-}
-
-.swMain li>a.done:before,.swMain>ul li>a.selected:before {
- border-color: #007AFF
-}
-
-.onlyone:before{
- left:0 !important;
- max-width: 100% !important;
- width: 100% !important;
-}
-
-.swMain>ul .stepNumber {
- background-color: #fff;
- border: 5px solid #c8c7cc;
- border-radius: 100%;
- color: #546474;
- display: inline-block;
- font-size: 15px;
- height: 40px;
- line-height: 30px;
- position: relative;
- text-align: center;
- width: 40px;
- z-index: 2
-}
-
-.swMain>ul li>a.selected .stepNumber {
- border-color: #007AFF
-}
-
-/*.swMain ul li>a.done .stepNumber,.swMain>ul li:last-child>a.selected .stepNumber {*/
-.swMain ul li>a.done .stepNumber{
- border-color: #007AFF;
- background-color: #007AFF;
- color: #fff;
- text-indent: -9999px
-}
-
-/*.swMain ul li>a.done .stepNumber:before,.swMain>ul li:last-child>a.selected .stepNumber:before {*/
-.swMain ul li>a.done .stepNumber:before {
- content: "\f00c";
- display: inline;
- float: right;
- font-family: FontAwesome;
- font-weight: 300;
- height: auto;
- text-shadow: none;
- margin-right: 7px;
- text-indent: 0
-}
-
-.swMain ul li>a.done.wait .stepNumber {
- background-color: #F6F6F6!important;
- color: #CCC!important;
- text-indent: 0!important
-}
-
-.swMain ul li>a.done.wait .stepNumber:before {
- content: ""!important
-}
-
-.swMain>ul li .stepDesc {
- color: #8e8e93;
- display: block;
- font-size: 14px;
- margin-top: 4px;
- max-width: 100%;
- table-layout: fixed;
- text-align: center;
- word-wrap: break-word;
- z-index: 104
-}
-
-.swMain li>a.done .stepDesc,.swMain>ul li>a.selected .stepDesc {
- /*color: #2B3D53*/
- color: #007AFF
-}
-
-.swMain>ul li>a.disabled {
- cursor: default
-}
-
-.swMain .progress {
- margin-bottom: 30px
-}
-
-.swMain .stepContainer {
- height: auto!important
-}
-
-/*.swMain .close,.swMain .loader,.swMain [class*=" button"],.swMain [class^=button] {
- display: none
-}*/
-
-.swMain .y-scrollable{
- overflow-y: auto;
- overflow-x: hidden;
- max-height: 600px;
-}
-
-fieldset{
- border: 1px solid #e6e8e8;
- border-radius: 5px;
- margin:20px 0;
- padding: 25px;
- position:relative;
- min-width:0;
- display:block;
-
-}
-
-fieldset legend{
- background-color: #1f1f1f;
- /*font-family: Lato,sans-serif;*/
- /*color: #007AFF;*/
- /*font-size: 15px;*/
- left: 10px;
- padding: 0 10px;
- position: absolute;
- top: -12px;
- font-weight: 400;
- width: auto!important;
- border: none!important;
-}
-
-.btn-o{
- background:0 0!important;
-}
-
-.btn-wide{
- min-width:120px;
-}
-
-.highlight {
- background: rgba(255, 230, 0, 0.5);
- padding: 3px 5px;
- margin: -3px -5px;
- line-height: 1.7;
- word-break: break-word;
- /*border-radius: 3px;*/
- /*display:inline-block;*/
-}
-
-.label-definition{
- color:#fff;
-}
-.formStep>.stepDesc{
- color: #b2c831;
-}
-
-.formStep>.container-fluid{
- /*position:relative;*/
-}
-
-.btn-container{
- height:50px;
- /*position: absolute;
- bottom: 10;*/
-}
-
-.panel-disabled {
- border-color: #B9D3DF;
-}
-.panel-disabled > .panel-heading {
- background-color: #B9D3DF;
- border-color: #B9D3DF;
-}
-
-.panel-body>ul{
- border-radius:0;
- background: none;
- margin:0;
-}
-
-
-.panel-green {
- border-color: #5cb85c;
-}
-
-.panel-green .panel-heading {
- border-color: #5cb85c;
- color: #fff;
- background-color: #5cb85c;
-}
-
-.panel-green a {
- color: #5cb85c;
-}
-
-.panel-green a:hover {
- color: #3d8b3d;
-}
-
-.panel-red {
- border-color: #d9534f;
-}
-
-.panel-red .panel-heading {
- border-color: #d9534f;
- color: #fff;
- background-color: #d9534f;
-}
-
-.panel-red a {
- color: #d9534f;
-}
-
-.panel-red a:hover {
- color: #b52b27;
-}
-
-.panel-yellow {
- border-color: #f0ad4e;
-}
-
-.panel-yellow .panel-heading {
- border-color: #f0ad4e;
- color: #fff;
- background-color: #f0ad4e;
-}
-
-.panel-yellow a {
- color: #f0ad4e;
-}
-
-.panel-yellow a:hover {
- color: #df8a13;
-}
-
-.viewrule-content{
- border:1px solid #fff;
- border-radius:4px;
- padding:10px;
-}
-
-.ruletypes>.panel{
- cursor:pointer
-}
-
-/*.ruletypes>.panel:hover{*/
-#panel-1:hover{
- box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
- -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
- -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */
-}
-
-.createrule-hint{
- color:#b2c831;
- padding-top:10px;
-}
-
-
-::-webkit-scrollbar {
- width: 6px;
-}
-::-webkit-scrollbar-track {
- background-color: #eaeaea;
- /*background-color: #0a0a0a;*/
- border-left: 1px solid #ccc;
-}
-::-webkit-scrollbar-thumb {
- background-color: #ccc;
-}
-::-webkit-scrollbar-thumb:hover {
- background-color: #aaa;
-}
-
-.disabled {
- pointer-events: none;
- cursor: default;
- opacity: 0.6;
-}
-
-.test-result {
- border-radius: 5px;
- padding: 1px 5px;
-}
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/measures/measures.html
----------------------------------------------------------------------
diff --git a/ui/pages/measures/measures.html b/ui/pages/measures/measures.html
deleted file mode 100644
index faf7dbd..0000000
--- a/ui/pages/measures/measures.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div >
- <p>
- <a class="btn btn-primary btn-o btn-wide" href="#!/createrule0"><i class="fa fa-plus"></i> Create Measure</a>
- </p>
-
- <div id="modelContainer">
- <table st-table="displayed" st-pipe="paging" class="table table-striped">
- <thead>
- <!-- <tr>
-
- <th colspan="7">
- <input st-search placeholder="Search..." type="search" style="color:#000000"/>
- </th>
- </tr> -->
- <tr style="background-color:#7D95CC">
- <th st-ratio="15">Measure Name</th>
- <!--<th st-ratio="15">Organization</th>-->
- <th st-ratio="15">Measure Type</th>
- <th st-ratio="20">Description</th>
- <!--<th st-ratio="15">Create Date</th>-->
- <!--<th st-ratio="10">Model Stage</th>-->
- <th st-ratio="5">Organization</th>
- <th st-ratio="5">Action</th>
- </tr>
- </thead>
- <tbody>
- <tr ng-if="!rowCollection || rowCollection.length == 0">
- <td colspan="7" style="text-align:center">No content!</td>
- </tr>
- <tr ng-repeat="row in displayed">
- <td><a href="#!/viewrule/{{row.id}}">{{row.name}}</a></td>
- <!--<td>{{row.system|strmap:'modelsystem'}}</td>-->
- <td>{{row.type|strmap:'modeltype'}}</td>
- <td>{{row.description}}</td>
- <!--<td>{{row.createDate | date:'short'}}</td>-->
- <!--<td><label class="label" ng-class="row.status==0?'label-default':row.status==1?'label-info':'label-success'" >{{row.status|strmap:'modelstatus'}}</label></td>-->
- <td>{{row.organization}}</td>
- <td>
-
- <a ng-class="(!adminAccess && ntAccount!=row.owner)?'disabled':''" href="" ng-click="remove(row)" title="delete" style="text-decoration:none">
- <i class="fa fa-trash-o"></i>
- </a>
-
- <a href="#!/viewrule/{{row.id}}" title="subscribe">
- <i class="fa fa-eye"></i>
- </a>
- </td>
- <!-- <td>
- <button class="btn btn-sm" popover-placement="top" popover="{{row.email}}" type="button">
- <i class="glyphicon glyphicon-eye-open"></i>
- </button>
- <a ng-href="mailto:{{row.email}}">email</a></td>
- <td>
- <button type="button" ng-click="removeRow(row)" class="btn btn-sm btn-danger">
- <i class="glyphicon glyphicon-remove-circle">
- </i>
- </button>
- </td> -->
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td colspan="8" class="text-right">
- <div st-items-by-page="10" st-pagination="" st-displayed-pages="10"></div>
- </td>
- </tr>
- </tfoot>
- </table>
- </div>
- <div class="modal fade" id="deleteConfirmation" role="dialog">
- <div class="modal-dialog modal-xg modal-lg">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
- <h4 class="modal-title">Delete the model with the below information?</h4>
- </div>
- <div class="modal-body">
- <ng-include src="'/pages/measures/delete-confirm.html'"/>
- </div>
- <div class="modal-footer">
- <p style="text-align: left;color: white;font-size: 150%;">If you delete this measure, your running jobs on this measure will also be deleted, please be careful!</p>
- <button type="button" class="btn btn-default" ng-click="confirmDelete()">Yes</button>
- <button type="button" class="btn btn-primary" data-dismiss="modal">No</button>
- </div>
- </div>
- </div>
- </div>
-</div>
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/measures/va-explaination.html
----------------------------------------------------------------------
diff --git a/ui/pages/measures/va-explaination.html b/ui/pages/measures/va-explaination.html
deleted file mode 100644
index 18ccc9a..0000000
--- a/ui/pages/measures/va-explaination.html
+++ /dev/null
@@ -1,771 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<!-- Simple Statistics -->
- <!-- Null Count -->
-<div class="container-fluid" ng-show="form.vaType==2">
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <h5 class="text-left" style="margin-left: 0px">What is Null Count ?</h5>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <label class="text-left">
- Null is a special marker used to indicate that a data value does not exist.
- </label>
- </div>
- </div>
- </div>
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <h5 class="text-left" style="margin-left: 0px">Example</h5>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <label class="text-left">
- Suppose we have the below data table, then the Null Count of "FIRSTNAME" is <kbd style="font-size: 16px">3</kbd>
- </label>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <table class="table table-bordered text-center">
- <thead>
- <tr class="success">
- <td>ID</td>
- <td>FRISTNAME</td>
- <td>LASTNAME</td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>lei</td>
- <td>li</td>
- </tr>
- <tr>
- <td>2</td>
- <td>lei</td>
- <td>li</td>
- </tr>
- <tr>
- <td>3</td>
- <td>lei</td>
- <td>li</td>
- </tr>
- <tr>
- <td>4</td>
- <td>
- <abbr title="the value isn't necessary " class="initialism"><mark>null</mark></abbr>
- </td>
- <td>stone</td>
- </tr>
- <tr>
- <td>5</td>
- <td>lei</td>
- <td>li</td>
- </tr>
- <tr>
- <td>6</td>
- <td>lei</td>
- <td>li</td>
- </tr>
- <tr>
- <td>7</td>
- <td>
- <abbr title="the value isn't necessary " class="initialism"><mark>null</mark></abbr>
- </td>
- <td>stone</td>
- </tr>
- <tr>
- <td>8</td>
- <td>
- <abbr title="the value isn't necessary " class="initialism"><mark>null</mark></abbr>
- </td>
- <td>zhang</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
-</div>
- <!-- Unique Count -->
-<div class="container-fluid" ng-show="form.vaType==3">
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <h5 class="text-left" style="margin-left: 0px">What is Unique Count ?</h5>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <label class="text-left">
- The UNIQUE Constraint prevents two records from having identical values in a particular column.
- </label>
- </div>
- </div>
- </div>
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <h5 class="text-left" style="margin-left: 0px">Example</h5>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <label class="text-left">
- Suppose we have the below data table which has four attributes-ID, NAME, AGE and FAVOURITE FOOD. Then the Unique Count is <kbd style="font-size: 16px">2</kbd>
- </label>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <table class="table table-bordered text-center">
- <colgroup>
- <col span="2" style="background-color:#064225">
- </colgroup>
- <thead>
- <tr class="success">
- <td>ID</td>
- <td>NAME</td>
- <td>AGE</td>
- <td>FAVOURITE FOOD</td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>Lily</td>
- <td>20</td>
- <td>APPLE</td>
- </tr>
- <tr>
- <td>2</td>
- <td>Lucy</td>
- <td>20</td>
- <td>APPLE</td>
- </tr>
- <tr>
- <td>3</td>
- <td>John</td>
- <td>20</td>
- <td>APPLE</td>
- </tr>
- <tr>
- <td>4</td>
- <td>David</td>
- <td>20</td>
- <td>APPLE</td>
- </tr>
- <tr>
- <td>5</td>
- <td>Sam</td>
- <td>35</td>
- <td>banana</td>
- </tr>
- <tr>
- <td>6</td>
- <td>Kaka</td>
- <td>35</td>
- <td>banana</td>
- </tr>
- <tr>
- <td>7</td>
- <td>stone</td>
- <td>35</td>
- <td>banana</td>
- </tr>
- <tr>
- <td>8</td>
- <td>Adison</td>
- <td>35</td>
- <td>banana</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
-</div>
- <!-- Duplicate Count -->
-<div class="container-fluid" ng-show="form.vaType==4">
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <h5 class="text-left" style="margin-left: 0px">What is Duplicate Count ?</h5>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <label class="text-left">
- Duplicate Count is the number of duplicate rows in a table and generate an output column that shows how many times each row occurs.
- </label>
- </div>
- </div>
- </div>
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <h5 class="text-left" style="margin-left: 0px">Example</h5>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <label class="text-left">
- Suppose we have the below data table, and we only count the the number of duplicate rows for age. Then the Duplicate Count is <kbd style="font-size: 16px">2</kbd>
- </label>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <table class="table table-bordered text-center">
- <thead>
- <tr class="success">
- <td>ID</td>
- <td>NAME</td>
- <td>AGE</td>
- <td>FAVOURITE FOOD</td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>Lily</td>
- <td>21</td>
- <td>APPLE</td>
- </tr>
- <tr>
- <td>2</td>
- <td>Lucy</td>
- <td class="info">20</td>
- <td>APPLE</td>
- </tr>
- <tr>
- <td>3</td>
- <td>John</td>
- <td class="info">20</td>
- <td>APPLE</td>
- </tr>
- <tr>
- <td>4</td>
- <td>David</td>
- <td class="info">20</td>
- <td>APPLE</td>
- </tr>
- <tr>
- <td>5</td>
- <td>Sam</td>
- <td>37</td>
- <td>banana</td>
- </tr>
- <tr>
- <td>6</td>
- <td>Kaka</td>
- <td class="warning">35</td>
- <td>banana</td>
- </tr>
- <tr>
- <td>7</td>
- <td>stone</td>
- <td class="warning">35</td>
- <td>banana</td>
- </tr>
- <tr>
- <td>8</td>
- <td>Adison</td>
- <td>38</td>
- <td>banana</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
-</div>
-<!-- Summary Statistics -->
- <!-- Maximum -->
-<div class="container-fluid" ng-show="form.vaType==5">
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <h5 class="text-left" style="margin-left: 0px">What is Maximum ?</h5>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <label class="text-left">
- Maximum is the biggest value of the selected column.
- </label>
- </div>
- </div>
- </div>
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <h5 class="text-left" style="margin-left: 0px">Example</h5>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- Suppose we have the below data table, then the maximum is: 26 <kbd style="font-size: 16px">26</kbd>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <table class="table table-bordered text-center">
- <thead>
- <tr class="success">
- <td>ID</td>
- <td>NAME</td>
- <td>AGE</td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>lei</td>
- <td>17</td>
- </tr>
- <tr>
- <td>2</td>
- <td>lei</td>
- <td>18</td>
- </tr>
- <tr>
- <td>3</td>
- <td>lei</td>
- <td>18</td>
- </tr>
- <tr>
- <td>4</td>
- <td>lei</td>
- <td>21</td>
- </tr>
- <tr>
- <td>5</td>
- <td>lei</td>
- <td>23</td>
- </tr>
- <tr>
- <td>6</td>
- <td>lei</td>
- <td>23</td>
- </tr>
- <tr>
- <td>7</td>
- <td>lei</td>
- <td>24</td>
- </tr>
- <tr>
- <td>8</td>
- <td>lei</td>
- <td>
- <abbr title="the value is the biggest number " class="initialism"><mark>26</mark></abbr>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
-</div>
- <!-- Minimum -->
-<div class="container-fluid" ng-show="form.vaType==6">
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <h5 class="text-left" style="margin-left: 0px">What is Minimum ?</h5>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <label class="text-left">
- Minimum is smallest value of the selected column.
- </label>
- </div>
- </div>
- </div>
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <h5 class="text-left" style="margin-left: 0px">Example</h5>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- Suppose we have the below data table, then the minimum is: <kbd style="font-size: 16px">14</kbd>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <table class="table table-bordered text-center">
- <thead>
- <tr class="success">
- <td>ID</td>
- <td>NAME</td>
- <td>AGE</td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>lei</td>
- <td>17</td>
- </tr>
- <tr>
- <td>2</td>
- <td>lei</td>
- <td>18</td>
- </tr>
- <tr>
- <td>3</td>
- <td>lei</td>
- <td>18</td>
- </tr>
- <tr>
- <td>4</td>
- <td>lei</td>
- <td>
- <abbr title="the value is the minimum number " class="initialism"><mark>14</mark></abbr>
- </td>
- </tr>
- <tr>
- <td>5</td>
- <td>lei</td>
- <td>23</td>
- </tr>
- <tr>
- <td>6</td>
- <td>lei</td>
- <td>23</td>
- </tr>
- <tr>
- <td>7</td>
- <td>lei</td>
- <td>24</td>
- </tr>
- <tr>
- <td>8</td>
- <td>lei</td>
- <td>26</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
-</div>
- <!-- Mean -->
-<div class="container-fluid" ng-show="form.vaType==7">
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <h5 class="text-left" style="margin-left: 0px">What is Mean ?</h5>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <label class="text-left">
- Mean is the usual average.
- </label>
- </div>
- </div>
- </div>
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <h5 class="text-left" style="margin-left: 0px">Example</h5>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- Suppose we have the below data table, then the mean of AGE is: <kbd style="font-size: 16px">20</kbd>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <table class="table table-bordered text-center">
- <thead>
- <tr class="success">
- <td>ID</td>
- <td>NAME</td>
- <td>AGE</td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>lei</td>
- <td>18</td>
- </tr>
- <tr>
- <td>2</td>
- <td>lei</td>
- <td>18</td>
- </tr>
- <tr>
- <td>3</td>
- <td>lei</td>
- <td>19</td>
- </tr>
- <tr>
- <td>4</td>
- <td>lei</td>
- <td>19</td>
- </tr>
- <tr>
- <td>5</td>
- <td>lei</td>
- <td>21</td>
- </tr>
- <tr>
- <td>6</td>
- <td>lei</td>
- <td>21</td>
- </tr>
- <tr>
- <td>7</td>
- <td>lei</td>
- <td>22</td>
- </tr>
- <tr>
- <td>8</td>
- <td>lei</td>
- <td>22</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
-</div>
- <!-- Median -->
-<div class="container-fluid" ng-show="form.vaType==8">
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <h5 class="text-left" style="margin-left: 0px">What is Median ?</h5>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <label class="text-left">
- Median is the middle value.
- </label>
- </div>
- </div>
- </div>
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <h5 class="text-left" style="margin-left: 0px">Example</h5>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- Suppose we have the below data table, then the median of AGE is: <kbd style="font-size: 16px">21</kbd>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <table class="table table-bordered text-center">
- <thead>
- <tr class="success">
- <td>ID</td>
- <td>NAME</td>
- <td>AGE</td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>lei</td>
- <td>17</td>
- </tr>
- <tr>
- <td>2</td>
- <td>lei</td>
- <td>18</td>
- </tr>
- <tr>
- <td>3</td>
- <td>lei</td>
- <td>19</td>
- </tr>
- <tr>
- <td>4</td>
- <td>lei</td>
- <td>20</td>
- </tr>
- <tr>
- <td>5</td>
- <td>lei</td>
- <td>21</td>
- </tr>
- <tr>
- <td>6</td>
- <td>lei</td>
- <td>21</td>
- </tr>
- <tr>
- <td>7</td>
- <td>lei</td>
- <td>22</td>
- </tr>
- <tr>
- <td>8</td>
- <td>lei</td>
- <td>22</td>
- </tr>
- <tr>
- <td>9</td>
- <td>lei</td>
- <td>23</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
-</div>
-<!-- Regular Expression Matching -->
-<div class="container-fluid" ng-show="form.vaType==9">
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <h5 class="text-left" style="margin-left: 0px">What is the Regular Expression Match?</h5>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <label class="text-left">
- In theoretical computer science and formal language theory, a regular expression (sometimes called a rational expression) is a sequence of characters that define a search pattern, mainly for use in pattern matching with strings, or string matching, i.e. "find and replace"-like operations.
- </label>
- </div>
- </div>
- </div>
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <h5 class="text-left" style="margin-left: 0px">Example</h5>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <label class="text-left">
- There is a series characters of in the column of IDENTIFIER in the following table, and we can use a kind of Regular Expression Matching to search it.
- </label>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <table class="table table-bordered text-center">
- <thead>
- <tr class="success">
- <td>IDENTIFIER</td>
- <td>NAME</td>
- <td>AGE</td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>#1111</td>
- <td>lei</td>
- <td>17</td>
- </tr>
- <tr>
- <td>#1245</td>
- <td>lei</td>
- <td>18</td>
- </tr>
- <tr>
- <td>15245</td>
- <td>lei</td>
- <td>18</td>
- </tr>
- <tr>
- <td>87956</td>
- <td>lei</td>
- <td>21</td>
- </tr>
- <tr>
- <td>
- <abbr title="the value is the biggest number " class="initialism">
- <mark>monkey</mark>
- </abbr>
- </td>
- <td>lei</td>
- <td>23</td>
- </tr>
- <tr>
- <td>
- <abbr title="the value is the biggest number " class="initialism">
- <mark>tiger</mark>
- </abbr>
- </td>
- <td>lei</td>
- <td>23</td>
- </tr>
- <tr>
- <td>456</td>
- <td>lei</td>
- <td>24</td>
- </tr>
- <tr>
- <td>324</td>
- <td>lei</td>
- <td>26</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <p class="text-left">
- <strong>Suppose Regular Expression is :</strong> ^[A-Za-z]+$
- </p>
- </div>
- </div>
- </div>
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <p class="text-left">
- <strong>The regular expression matching means :</strong> Matches a string consisting of 26 english letters
- </p>
- </div>
- </div>
- </div>
- <div class="container-fluid">
- <div class="row">
- <div class="col-md-12 col-lg-12 col-sm-12">
- <p class="text-left">
- The result is: <kbd>2 (MONKEY AND TIGER)</kbd>
- </p>
- </div>
- </div>
- </div>
-</div>